Platforms to show: All Mac Windows Linux Cross-Platform
Required plugins for this example: MBS ChartDirector Plugin
You find this example project in your Plugins Download as a Xojo project file within the examples folder: /ChartDirector/multicolorline
This example is the version from Fri, 9th Feb 2023.
Project "multicolorline.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Delete"
Const kFileQuit = "&Quit"
Const kFileQuitShortcut = ""
End Class
Class MainWindow Inherits Window
EventHandler Sub Open()
// Data points for the line chart
Dim dataX() As Double = Array(0.0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25)
Dim dataX_size As Integer = dataX.Ubound + 1
Dim dataY() As Double = Array(30.0, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35, 50, 66, 56, 48, 52, 65, 62, 70)
Dim dataY_size As Integer = dataY.Ubound + 1
// The data point type. The color of the line segment will be based on the starting point type
// of the segment. In this example, we have 4 point types for 4 different colors. Note that for
// a line with N points, there will be (N - 1) line segments, so we only need (N - 1) values in
// the point type array.
Dim pointType() As Integer = Array(0, 0, 0, 1, 1, 0, 2, 3, 1, 1, 0, 0, 1, 1, 2, 2, 2, 3, 3, 2, 0, 1, 2, 3, 3)
Dim pointType_size As Integer = pointType.Ubound + 1
Dim colors() As Integer = Array( Ctype(&hff0000, Integer), &h0066ff, &hcc00cc, &h00cc00)
Dim colors_size As Integer = colors.Ubound + 1
Dim pointTypeLabels() As String = Array("Alpha", "Beta", "Gamma", "Delta")
// Create a XYChart object of size 600 x 430 pixels
Dim c As New CDXYChartMBS(600, 430)
// Set default text color to dark grey (&h333333)
c.setColor(CDBaseChartMBS.kTextColor, &h333333)
// Add a title box using grey (&h555555) 20pt Arial font
Call c.addTitle(" Multi-Color Line Chart", "Arial", 20, &h555555)
// Set the plotarea at (70, 70) and of size 500 x 300 pixels, with transparent background and
// border and light grey (&hcccccc) horizontal grid lines
Call c.setPlotArea(70, 70, 500, 300, CDBaseChartMBS.kTransparent, -1, CDBaseChartMBS.kTransparent, &hcccccc)
// Add a legend box with horizontal layout above the plot area at (70, 35). Use 12pt Arial font,
// transparent background and border, and line style legend icon.
Dim b As CDLegendBoxMBS = c.addLegend(70, 35, False, "Arial", 12)
b.setBackground(CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTransparent)
b.setLineStyleKey
// Set axis label font to 12pt Arial
Call c.xAxis.setLabelStyle("Arial", 12)
call c.yAxis.setLabelStyle("Arial", 12)
// Set the x and y axis stems to transparent, and the x-axis tick color to grey (&haaaaaa)
c.xAxis.setColors(CDBaseChartMBS.kTransparent, CDBaseChartMBS.kTextColor, CDBaseChartMBS.kTextColor, &haaaaaa)
c.yAxis.setColors(CDBaseChartMBS.kTransparent)
// Set the major/minor tick lengths for the x-axis to 10 and 0.
c.xAxis.setTickLength(10, 0)
// For the automatic axis labels, set the minimum spacing to 80/40 pixels for the x/y axis.
c.xAxis.setTickDensity(80)
c.yAxis.setTickDensity(40)
// Add a title to the y axis using dark grey (&h555555) 14pt Arial font
Call c.xAxis.setTitle("X-Axis Title Placeholder", "Arial", 14, &h555555)
Call c.yAxis.setTitle("Y-Axis Title Placeholder", "Arial", 14, &h555555)
// In ChartDirector, each line layer can only have one line color, so we use 4 line layers to
// draw the 4 different colors of line segments.
// In general, the line segments for each color will not be continuous. In ChartDirector,
// non-continuous line segments can be achieved by inserting NoValue points. To allow for these
// extra points, we use a buffer twice the size of the original data arrays.
Dim lineX_size As Integer = dataX_size * 2
Dim lineX() As Double
Dim lineY_size As Integer = dataY_size * 2
Dim lineY() As Double
Redim lineX(lineX_size-1)
Redim lineY(lineY_size-1)
// Use a loop to create a line layer for each color
For i As Integer = 0 To colors_size-1
Dim n As Integer = 0
For j As Integer = 0 To dataX_size-1
// We include data points of the target type in the line layer.
If ((j < pointType_size) And (pointType(j) = i)) Then
lineX(n) = dataX(j)
lineY(n) = dataY(j)
n = n + 1
Elseif ((j > 0) And (pointType(j - 1) = i)) Then
// If the current point is not of the target, but the previous point is of the
// target type, we still need to include the current point in the line layer, as it
// takes two points to draw a line segment. We also need an extra NoValue point so
// that the current point will not join with the next point.
lineX(n) = dataX(j)
lineY(n) = dataY(j)
n = n + 1
lineX(n) = dataX(j)
lineY(n) = CDBaseChartMBS.kNoValue
n = n + 1
End If
Next
// cut away empty space
Redim lineY(n-1)
Redim lineX(n-1)
// Draw the layer that contains all segments of the target color
Dim layer As CDLineLayerMBS = c.addLineLayer(lineY, colors(i), pointTypeLabels(i))
layer.setXData(lineX)
layer.setLineWidth(2)
Next
// 2x for higher DPI displays
c.setOutputOptions("bmpscale=2")
// Output the chart
pic = c.makeChartPicture
// drawn in paint event
End EventHandler
EventHandler Sub Paint(g As Graphics, areas() As REALbasic.Rect)
If pic <> Nil Then
// scale to window
g.DrawPicture pic, 0, 0, g.Width, g.Height, 0, 0, pic.Width, pic.Height
End If
End EventHandler
Property pic As Picture
End Class
MenuBar MainMenuBar
MenuItem FileMenu = "&File"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Edit"
MenuItem EditUndo = "&Undo"
MenuItem EditSeparator1 = "-"
MenuItem EditCut = "Cu&t"
MenuItem EditCopy = "&Copy"
MenuItem EditPaste = "&Paste"
MenuItem EditClear = "#App.kEditClear"
MenuItem EditSeparator2 = "-"
MenuItem EditSelectAll = "Select &All"
End MenuBar
End Project
The items on this page are in the following plugins: MBS ChartDirector Plugin.