Today I want to show you how you can easily create a bar chart, using MBS Xojo ChartDirector Plugin in a canvas in your Xojo application.

In our case we want to show a statistic about the favorite colors of the Germans. Here is the data we want to display

For this we first create three different arrays. An array that contains the individual values and a matching array with the labels. For the values we have to make sure that they are in an array of type double, otherwise they cannot be used later. Last but not least we create an array in which we define the colors. In our case we have specified the color values in hexadecimal.

Dim data(-1) As Double = Array(40.0, 19.0, 18.0, 16.0, 11.0, 8.0, 7.0, 7.0, 6.0, 6.0)
Dim labels(-1)As String= Array ("blue", "red", "green", "black", "yellow", "white", "gray", "brown", "purple","orange")
Dim colors(-1) As Integer 

colors.Append &h0000ff
colors.Append &hff0000
colors.Append &h00ff00
colors.Append &h000000
colors.Append &hffff00
colors.Append &hffffff
colors.Append &h888888
colors.Append &h8b4513
colors.Append &hab82ff
colors.Append &hffa500

Then we create an object of the class CDXYChartMBS. This object can be seen as a kind of working environment in which we want to draw our chart later. It gets the width and height of our canvas.

Dim c As New CDXYChartMBS(canvas1.Width, Canvas1.height)

Next, our chart gets a title that indicates what data is actually worked with in the chart.

Call c.addTitle("Favorite colors in Germany", "timesbi.ttf", 18)

We then use the setPlotArea method to specify the area of the actual chart. First we specify the upper left point at which the diagram will be positioned. We move 50 pixels to the right and 55 pixels away from the top of the workspace. Then we define the width and the height. We want the background to be white. For this reason we also specify the background color here.

Call c.setPlotArea(50, 55, Canvas1.Width-80, Canvas1.height-100,&hffffff)

Now it is time to set the information for the x axis. First we pass the labels we have defined in the array to the x axis.

Then we set the tick offset for the x axis. The tick is normally in the middle of the bar (Figure 1), with the TickOffset we can now move this, so that as in our case the tick is then visible behind the bar and separates the individual areas from each other.

c.xAxis.setTickOffset(0.0)

Call c.xAxis.setLabels labels
c.xAxis.setTickOffset(0.5)

c.xAxis.setTickOffset(0.5)

If we want, we can also assign a label to the y axis, in this case the text Percent, so that we know that the values are given in percent.

Call c.yAxis.setTitle("Percent","arialbd.ttf", 10)

Now we want to pass the data to the diagram. For this we create an object of the class CDBarLayerMBS which we can use to make the settings for the bars. First we create our bars of the diagram with addBarLayer. In the parameters we pass the data that defines the level of each bar and the color array that holds the colors of each bar.

 
Dim layer As CDBarLayerMBS
layer=c.addBarLayer(data,colors) 

Since we also have a bar in our listing that is white, it makes sense to give the bars a black border with setBorderColor.

layer=c.addBarLayer(data,colors)

In this function we could also additionally specify a lighting effect factor that makes the bars look a little more three-dimensional.

Finally, we can use makeChartPicture to output our chart as a picture.

pic = c.makeChartPicture

I hope you enjoyed this trip into the world of charts. If you have got the taste and would like to buy a license of the chart director, I have another hot tip for you with which you get more for your money. Take a look at the Omega Bundle, which is currently available until 10th September 2023. Beside a ChartDirector license you will get some more great tools to make your work with Xojo easier.