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/varwidthbar
This example is the version from Sun, 17th Mar 2012.
Project "varwidthbar.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()
// The data for the chart
dim data(-1) as double = array(800.0, 600.0, 1000, 1400)
dim widths(-1) as double = array(250.0, 500, 960, 460)
dim labels(-1) as string = array("Wind", "Hydro", "Coal", "Natural Gas")
// The colors to use
dim colors(-1) as integer
colors.Append &h00aa00
colors.Append &h66aaee
colors.Append &hee6622
colors.Append &hffbb00
// Create a XYChart object of size 500 x 350 pixels
dim c as new CDXYChartMBS(500, 350)
// Add a title to the chart using 15 pts Arial Italic font
call c.addTitle("Energy Generation Breakdown", "ariali.ttf", 15)
// Set the plotarea at (60, 60) and of (chart_width - 90) x (chart_height - 100)
// in size. Use a vertical gradient color from light blue (f9f9ff) to sky blue
// (aaccff) as background. Set grid lines to white (ffffff).
dim plotAreaBgColor as integer = c.linearGradientColor(0, 60, 0, c.getHeight() - 40, &haaccff, &hf9fcff)
call c.setPlotArea(60, 60, c.getWidth() - 90, c.getHeight() - 100, plotAreaBgColor, -1, -1, &hffffff)
// Add a legend box at (50, 30) using horizontal layout and transparent
// background.
c.addLegend(55, 30, false).setBackground(c.kTransparent)
// Add titles to x/y axes with 10 points Arial Bold font
call c.xAxis.setTitle("Mega Watts", "arialbd.ttf", 10)
call c.yAxis.setTitle("Cost per MWh (dollars)", "arialbd.ttf", 10)
// Set the x axis rounding to false, so that the x-axis will fit the data exactly
c.xAxis.setRounding(false, false)
// In ChartDirector, there is no bar layer that can have variable bar widths, but
// you may create a bar using an area layer. (A bar can be considered as the area
// under a rectangular outline.) So by using a loop to create one bar per area
// layer, we can achieve a variable width bar chart.
// starting position of current bar
dim currentX as double = 0
dim i as integer
for i=0 to UBound(data)
// ending position of current bar
dim nextX as double = currentX + widths(i)
// outline of the bar
dim dataX(-1) as double = array(currentX, currentX, nextX, nextX)
dim dataY(-1) as double = array(0, data(i), data(i), 0)
// create the area layer to fill the bar
dim layer as cdAreaLayerMBS = c.addAreaLayer(dataY, colors(i), labels(i))
layer.setXData dataX
// the ending position becomes the starting position of the next bar
currentX = nextX
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
The items on this page are in the following plugins: MBS ChartDirector Plugin.