Xojo Developer Conference
25/27th April 2018 in Denver.
MBS Xojo Conference
6/7th September 2018 in Munich, Germany.

Platforms to show: All Mac Windows Linux Cross-Platform

/ChartDirector/discontline
Function:
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/discontline
This example is the version from Sun, 17th Mar 2012.
Project "discontline.rbp"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class PicWindow Inherits Window
EventHandler Sub Open() //=================================================================== // For demo purpose, use random numbers as data for the chart //=================================================================== // Use a random table to create the data. The random table contains 4 cols x 31 // rows, using 9 as seed. dim rantable as new CDRanTableMBS(9, 4, 31) // Set the 1st col to be the series 1, 2, 3, .... rantable.setCol(0, 1, 1, 1) // Set the 2nd, 3rd and 4th col to be random number starting from 40, 50 and 60. // The change between rows is set to -5 to 5. The minimum value of any cell is 0. rantable.setCol(1, 40, -5, 5, 0) rantable.setCol(2, 50, -5, 5, 0) rantable.setCol(3, 60, -5, 5, 0) // Use the 1st col as the axis label dim labels(-1) as string // Use the 2nd, 3rd and 4th columns for 3 lines dim data0 as CDArrayMBS = rantable.getCol(1) dim data1 as CDArrayMBS = rantable.getCol(2) dim data2 as CDArrayMBS = rantable.getCol(3) // Simulate some data points have no data value dim i,count as integer dim dat0(-1) as Double dim dat1(-1) as Double dim dat2(-1) as Double count=data0.count-1 for i=0 to count dat0.append data0.getvalue(i) dat1.append data1.getvalue(i) dat2.append data2.getvalue(i) labels.append str(i+1) next for i=1 to 29 step 7 dat0(i)=CDXYChartMBS.kNoValue dat1(i)=CDXYChartMBS.kNoValue dat2(i)=CDXYChartMBS.kNoValue next //=================================================================== // Now we have the data ready. Actually drawing the chart. //=================================================================== // Create a XYChart object of size 600 x 220 pixels dim c as new CDXYChartMBS(600, 220) // Set the plot area at (100, 25) and of size 450 x 150 pixels. Enabled both // vertical and horizontal grids by setting their colors to light grey (&hc0c0c0) c.setPlotArea(100, 25, 450, 150).setGridColor(&hc0c0c0, &hc0c0c0) // Add a legend box (92, 0) (top of plot area) using horizontal layout. Use 8 pts // Arial font. Disable bounding box (set border to transparent). c.addLegend(92, 0, false, "", 8).setBackground(c.kTransparent) // Add a title to the y axis. Draw the title upright (font angle = 0) c.yAxis.setTitle("Average"+EndOfLine.UNIX+"Utilization"+EndOfLine.UNIX+"(MBytes)").setFontAngle(0) // Use manually scaling of y axis from 0 to 100, with ticks every 10 units c.yAxis.setLinearScale(0, 100, 10) // Set the labels on the x axis call c.xAxis.setLabels(labels) // Set the title on the x axis call c.xAxis.setTitle("Jun - 2001") // Add x axis (vertical) zones to indicate Saturdays and Sundays for i=0 to 28 step 7 c.xAxis.addZone(i, i + 2, &hc0c0c0) next // Add a line layer to the chart dim layer as CDLineLayerMBS layer = c.addLineLayer // Set the default line width to 2 pixels layer.setLineWidth(2) // Add the three data sets to the line layer call layer.addDataSet(dat0, &hcf4040, "Server #1") call layer.addDataSet(dat1, &h40cf40, "Server #2") call layer.addDataSet(dat2, &h4040cf, "Server #3") // Layout the chart to fix the y axis scaling. We can then use getXCoor and // getYCoor to determine the position of custom objects. c.layout // Add the "week n" custom text boxes at the top of the plot area. for i=0 to 3 // Add the "week n" text box using 8 pt Arial font with top center alignment. dim textbox as CDTextBoxMBS textbox = c.addText(layer.getXCoor(i * 7 + 2), 25, "Week "+str(i), "arialbd.ttf", 8, &h000000, c.kTopCenter) // Set the box width to cover five days textbox.setSize(layer.getXCoor(i * 7 + 7) - layer.getXCoor(i * 7 + 2) + 1,0) // Set box background to pale yellow &hffff80, with a 1 pixel 3D border textbox.setBackground(&hffff80, c.kTransparent, 1) next // Output the chart Backdrop=c.makeChartPicture End EventHandler
End Class
MenuBar MenuBar1
MenuItem FileMenu = "&Ablage"
MenuItem FileQuit = "#App.kFileQuit"
MenuItem EditMenu = "&Bearbeiten"
MenuItem EditUndo = "&Rückgängig"
MenuItem UntitledMenu1 = "-"
MenuItem EditCut = "&Ausschneiden"
MenuItem EditCopy = "&Kopieren"
MenuItem EditPaste = "&Einfügen"
MenuItem EditClear = "#App.kEditClear"
MenuItem UntitledMenu0 = "-"
MenuItem EditSelectAll = "&Alles auswählen"
End MenuBar
End Project

Feedback, Comments & Corrections

The items on this page are in the following plugins: MBS ChartDirector Plugin.




Links
MBS Xojo Plugins