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/percentarea
This example is the version from Thu, 6th Apr 2016.
Project "percentarea.xojo_binary_project"
Class App Inherits Application
Const kEditClear = "&Löschen"
Const kFileQuit = "Beenden"
Const kFileQuitShortcut = ""
End Class
Class PicWindow Inherits Window
EventHandler Sub Open()
// The data for the area chart
dim data0(-1) as double=array(42, 49, 33, 38, 51, 46, 29, 41, 44, 57, 59, 52, 37, 34, 51, 56, 56, 60, 70, 76, 63, 67, 75, 64, 51.0)
dim data1(-1) as double=array(50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77, 84, 82, 80, 84, 98.0)
dim data2(-1) as double=array(87, 89, 85, 66, 53, 39, 24, 21, 37, 56, 37, 23, 21, 33, 13, 17, 14, 23, 16, 25, 29, 30, 45, 47, 46.0)
// The timestamps on the x-axis
dim labels(-1) as double = array(CDXYChartMBS.chartTime(1996, 1, 1), CDXYChartMBS.chartTime(1996, 4, 1), CDXYChartMBS.chartTime(1996, 7, 1), _
CDXYChartMBS.chartTime(1996, 10, 1), CDXYChartMBS.chartTime(1997, 1, 1), CDXYChartMBS.chartTime(1997, 4, 1), CDXYChartMBS.chartTime(1997, 7, 1), _
CDXYChartMBS.chartTime(1997, 10, 1), CDXYChartMBS.chartTime(1998, 1, 1), CDXYChartMBS.chartTime(1998, 4, 1), CDXYChartMBS.chartTime(1998, 7, 1), _
CDXYChartMBS.chartTime(1998, 10, 1), CDXYChartMBS.chartTime(1999, 1, 1), CDXYChartMBS.chartTime(1999, 4, 1), CDXYChartMBS.chartTime(1999, 7, 1), _
CDXYChartMBS.chartTime(1999, 10, 1), CDXYChartMBS.chartTime(2000, 1, 1), CDXYChartMBS.chartTime(2000, 4, 1), CDXYChartMBS.chartTime(2000, 7, 1), _
CDXYChartMBS.chartTime(2000, 10, 1), CDXYChartMBS.chartTime(2001, 1, 1), CDXYChartMBS.chartTime(2001, 4, 1), CDXYChartMBS.chartTime(2001, 7, 1), _
CDXYChartMBS.chartTime(2001, 10, 1), CDXYChartMBS.chartTime(2002, 1, 1))
// Create a XYChart object of size 500 x 280 pixels, using &hffffcc as background
// color, with a black border, and 1 pixel 3D border effect
dim c as new CDXYChartMBS(500, 280, &hffffcc, 0, 1)
// Set the plotarea at (50, 45) and of size 320 x 200 pixels with white
// background. Enable horizontal and vertical grid lines using the grey
// (&hc0c0c0) color.
c.setPlotArea(50, 45, 320, 200, &hffffff).setGridColor(&hc0c0c0, &hc0c0c0)
// Add a legend box at (370, 45) using vertical layout and 8 points Arial Bold
// font.
dim legendBox as CDLegendBoxMBS
legendBox = c.addLegend(370, 45, true, "arialbd.ttf", 8)
// Set the legend box background and border to transparent
legendBox.setBackground(CDXYChartMBS.kTransparent, CDXYChartMBS.kTransparent)
// Set the legend box icon size to 16 x 32 pixels to match with custom icon size
legendBox.setKeySize(16, 32)
// Add a title to the chart using 14 points Times Bold Itatic font and white font
// color, and &h804020 as the background color
c.addTitle("Quarterly Product Sales", "timesbi.ttf", 14, &hffffff).setBackground(&h804020)
// Set the labels on the x axis.
call c.xAxis.setLabels(labels)
// Set multi-style axis label formatting. Start of year labels are displayed as
// yyyy. For other labels, just show minor tick.
call c.xAxis.setMultiFormat(CDXYChartMBS.StartOfYearFilter, "{value|yyyy}", CDXYChartMBS.AllPassFilter, "-")
// Add a percentage area layer to the chart
dim layer as CDAreaLayerMBS
layer = c.addAreaLayer(CDXYChartMBS.kPercentage)
// Add the three data sets to the area layer, using icons images with labels as
// data set names
call layer.addDataSet(data0, &h40ddaa77, "<*block,valign=absmiddle*><*img="+c.GetPath(FindFile("service.png"))+"*> Service<*/*>")
call layer.addDataSet(data1, &h40aadd77, "<*block,valign=absmiddle*><*img="+c.GetPath(FindFile("software.png"))+"*> Software<*/*>")
call layer.addDataSet(data2, &h40aa77dd, "<*block,valign=absmiddle*><*img="+c.GetPath(FindFile("computer.png"))+"*> Hardware<*/*>")
// For a vertical stacked chart with positive data only, the last data set is
// always on top. However, in a vertical legend box, the last data set is at the
// bottom. This can be reversed by using the setLegend method.
layer.setLegend(CDXYChartMBS.kReverseLegend)
// Output the chart
Backdrop=c.makeChartPicture
End EventHandler
Function FindFile(name as string) As FolderItem
// Look for file in parent folders from executable on
dim parent as FolderItem = app.ExecutableFile.Parent
while parent<>Nil
dim file as FolderItem = parent.Child(name)
if file<>Nil and file.Exists then
Return file
end if
parent = parent.Parent
wend
End Function
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.