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/unevenpoints
This example is the version from Sun, 17th Mar 2012.
Project "unevenpoints.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class Window1 Inherits Window
EventHandler Sub Open()
// Data points which more unevenly spaced in time
dim data0Y(-1) as double = array(62.0, 69, 53, 58, 84, 76, 49, 61, 64, 77, 79.0)
dim data0X(-1) as double
data0X.Append CDXYChartMBS.chartTime(2007, 1, 1)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 2)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 5)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 7)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 10)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 14)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 17)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 18)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 19)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 20)
data0X.Append CDXYChartMBS.chartTime(2007, 1, 21)
// Data points which are evenly spaced in a certain time range
dim data1Y(-1) as double = array(36.0, 25, 28, 38, 20, 30, 27, 35, 65, 60, 40, 73, 62, 90, 75, 72)
dim data1Start as double = CDXYChartMBS.chartTime(2007, 1, 1)
dim data1End as double = CDXYChartMBS.chartTime(2007, 1, 16)
// Data points which are evenly spaced in another time range, in which the
// spacing is different from the above series
dim data2Y(-1) as double = array(25.0, 15, 30, 23, 32, 55, 45)
dim data2Start as double = CDXYChartMBS.chartTime(2007, 1, 9)
dim data2End as double = CDXYChartMBS.chartTime(2007, 1, 21)
// Create a XYChart object of size 600 x 400 pixels. Use a vertical gradient
// color from light blue (99ccff) to white (ffffff) spanning the top 100 pixels
// as background. Set border to grey (888888). Use rounded corners. Enable soft
// drop shadow.
dim c as new CDXYChartMBS(600, 400)
c.setBackground(c.linearGradientColor(0, 0, 0, 100, &h99ccff, &hffffff), &h888888)
c.setRoundedFrame
c.setDropShadow
// Add a title using 18 pts Times New Roman Bold Italic font. #Set top margin to
// 16 pixels.
c.addTitle("Product Line Order Backlog", "timesbi.ttf", 18).setMargin(0, 0, 16, 0)
// Set the plotarea at (60, 80) and of 510 x 275 pixels in size. Use transparent
// border and dark grey (444444) dotted grid lines
dim plotArea as CDPlotAreaMBS = c.setPlotArea(60, 80, 510, 275, -1, -1, c.kTransparent, c.dashLineColor(&h444444, &h000101), -1)
// Add a legend box where the top-center is anchored to the horizontal center of
// the plot area at y = 45. Use horizontal layout and 10 points Arial Bold font,
// and transparent background and border.
dim legendBox as CDLegendBoxMBS = c.addLegend(plotArea.getLeftX + plotArea.getWidth / 2, 45, false, "arialbd.ttf", 10)
legendBox.setAlignment(c.kTopCenter)
legendBox.setBackground(c.kTransparent, c.kTransparent)
// Set x-axis tick density to 75 pixels and y-axis tick density to 30 pixels.
// ChartDirector auto-scaling will use this as the guidelines when putting ticks
// on the x-axis and y-axis.
c.yAxis.setTickDensity(30)
c.xAxis.setTickDensity(75)
// Set all axes to transparent
c.xAxis.setColors(c.kTransparent)
c.yAxis.setColors(c.kTransparent)
// Set the x-axis margins to 15 pixels, so that the horizontal grid lines can
// extend beyond the leftmost and rightmost vertical grid lines
c.xAxis.setMargin(15, 15)
// Set axis label style to 8pts Arial Bold
call c.xAxis.setLabelStyle("arialbd.ttf", 8)
call c.yAxis.setLabelStyle("arialbd.ttf", 8)
call c.yAxis2.setLabelStyle("arialbd.ttf", 8)
// Add axis title using 10pts Arial Bold Italic font
call c.yAxis.setTitle("Backlog in USD millions", "arialbi.ttf", 10)
// Add the first data series
dim layer0 as CDLineLayerMBS = c.addLineLayer
layer0.addDataSet(data0Y, &hff0000, "Quantum Computer").setDataSymbol(c.kGlassSphere2Shape, 11)
layer0.setXData(data0X)
layer0.setLineWidth(3)
// Add the second data series
dim layer1 as CDLineLayerMBS = c.addLineLayer
layer1.addDataSet(data1Y, &h00ff00, "Atom Synthesizer").setDataSymbol(c.kGlassSphere2Shape, 11)
layer1.setXData(data1Start, data1End)
layer1.setLineWidth(3)
// Add the third data series
dim layer2 as CDLineLayerMBS = c.addLineLayer
layer2.addDataSet(data2Y, &hff6600, "Proton Cannon").setDataSymbol(c.kGlassSphere2Shape, 11)
layer2.setXData(data2Start, data2End)
layer2.setLineWidth(3)
// 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
The items on this page are in the following plugins: MBS ChartDirector Plugin.