Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/multicolorline


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.


The biggest plugin in space...