Platforms to show: All Mac Windows Linux Cross-Platform
/ChartDirector/gradientmultibar
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/gradientmultibar
This example is the version from Sun, 17th Mar 2012.
Project "gradientmultibar.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 bar chart
dim data0(-1) as double = array(100.0, 125, 245, 147, 67)
dim data1(-1) as double = array(85.0, 156, 179, 211, 123)
dim data2(-1) as double = array(97.0, 87, 56, 267, 157)
dim labels(-1) as string = array("Mon", "Tue", "Wed", "Thur", "Fri")
// Create a XYChart object of size 540 x 375 pixels
dim c as new CDXYChartMBS(540, 375)
// Add a title to the chart using 18 pts Times Bold Italic font
call c.addTitle("Average Weekly Network Load", "timesbi.ttf", 18)
// Set the plotarea at (50, 55) and of 440 x 280 pixels in size. Use a vertical
// gradient color from grey (888888) to black (000000) as background. Set border
// and grid lines to white (ffffff).
call c.setPlotArea(50, 55, 440, 280, c.linearGradientColor(0, 55, 0, 335, &h888888, &h000000), -1, &hffffff, &hffffff)
// Add a legend box at (50, 25) using horizontal layout. Use 10pts Arial Bold as
// font, with transparent background.
c.addLegend(50, 25, false, "arialbd.ttf", 10).setBackground(CDXYChartMBS.kTransparent)
// Set the x axis labels
call c.xAxis.setLabels(labels)
// Draw the ticks between label positions (instead of at label positions)
c.xAxis.setTickOffset(0.5)
// Set axis label style to 8pts Arial Bold
call c.xAxis.setLabelStyle("arialbd.ttf", 8)
call c.yAxis.setLabelStyle("arialbd.ttf", 8)
// Set axis line width to 2 pixels
c.xAxis.setWidth(2)
c.yAxis.setWidth(2)
// Add axis title
call c.yAxis.setTitle("Throughput (MBytes Per Hour)")
// Add a multi-bar layer with 3 data sets and 4 pixels 3D depth
dim layer as CDBarLayerMBS = c.addBarLayer(CDXYChartMBS.kSide, 4)
call layer.addDataSet(data0, &h66aaee, "Server #1")
call layer.addDataSet(data1, &heebb22, "Server #2")
call layer.addDataSet(data2, &hcc0000, "Server #3")
// Set bar border to transparent. Use bar gradient lighting with light intensity
// from 0.75 to 1.75.
call layer.setBorderColor(CDXYChartMBS.kTransparent, CDXYChartMBS.barLighting(0.75, 1.75))
// Configure the bars within a group to touch each others (no gap)
layer.setBarGap(0.2, CDXYChartMBS.kTouchBar)
// 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.