Did you know that you can create charts in Xojo with the MBS Xojo ChartDirector Plugin?

I will show you how this works, using the example of a cone chart. The example can be downloaded together with the plugin from our website for a free testing. You can find it under this path: Examples/ChartDirector/cone.xojo_binary_project

First we store the data we want to represent on the diagram in an array. These data could also come from a database, a JSON or a calculation. We create a second array with the labels of the areas, corresponding to the values.

// The data for the pyramid chart
dim data(-1) as double = array(156.0, 123, 211, 179)

// The labels for the pyramid chart
dim labels(-1) as string = array("Funds", "Bonds", "Stocks", "Cash")

In the diagrams we can determine not only the values and the labels, but also the colors that should be used in the diagram. We also create these as an array. In our case a dark blue, a light blue, a yellow and orange for the top.

// The semi-transparent colors for the pyramid layers
dim colors(-1) as integer 
colors.Append &h60000088
colors.Append &h6066aaee
colors.Append &h60ffbb00
colors.Append &h60ee6622

Next, we create the area on which our chart can be placed. Our cone chart is classified as a pyramid chart. For this reason we choose the class CDPyramidChartMBS. We would like to work on an area of 480 by 400 pixels.

Dim c As New CDPyramidChartMBS (480, 400)

Next, we specify the size and position of our cone. For the position of a cone, we specify the center of the cone. In our case, this should be at the position 280/180, i.e. shifted further to the right and a bit lower than the center of our workspace. The cone itself should have a width of 150 pixels at the base and a height of 300 pixels.

 c.setConeSize(280, 180, 150, 300) 

We can also specify in the settings how the angle is at which we are looking at our diagram. This creates a 3D effect. If you want a straight view, select an angle of 0

In our example we have chosen an angle of 15

// Set the elevation to 15 degrees
c.setViewAngle(15)

Now we have to give the data to the diagram. That we have already prepared in the array. In the method setData we first pass the data array and then the array with the labels.

c.setData(data, labels)

Next we define the colors for the single data sections. We already have them in our array. With the constant kDataColor we indicate that we want to define the color of the data areas. But we could also specify the line color or the font color alternatively, if we choose the appropriate constant.

c.setColors(c.kDataColor, colors)

We can also define a gap between the individual data areas. This is particularly visible if we set the view angle at 0. The values are given as a percentage. So in this case we would show a gap of 1% between each data section.

c.setLayerGap(0.01) 

We now want to write the labels on the left side of the diagram. How these labels should look like and which data they contain we can now specify a bit more precisely.

call c.setLeftLabel("{label}"+EndOfLine.unix+"US ${value}K"+EndOfLine.unix+"({percent}%)", "arialbd.ttf")

First, we specify the format we want for our labels in the data area. We describe this with the method setLeftLabel. First we write the name of the label and then we go to the next line with a line break. In this line we write the value together with the currency. First we write US $ then comes the value and after the value comes a K that stands for a thousand unit. The line is then changed again with a line break. In the last line we find the percentage of the total. In a further parameter we can determine the font, in our case it is Arial in bold. If necessary, we can also specify the font size and font color in further parameters.

With the method makeChartPicture we can create an image of the chart with our specifications. This picture we can then use as a backdrop in the window, paint it in a canvas, or insert it as an image in a PDF, e.g. in a report.

Backdrop=c.makeChartPicture

In Chartdirector there is no built-in support for displaying charts on Retina displays yet, but with a few tricks we can improve the resolution significantly. First, make sure that Hi-DPI is enabled in the Shared Supports section of the Buildingsettings. Another improvement is to set the ScaleFactor property with a value of 2.

c.ScaleFactor = 2

Here is Hi-DPI disabled and the ScaleFactor is not set by now.

Here is Hi-DPI enabled

Here is Hi-DPI enabled and we set the ScaleFactor

Another possibility is to use the setOutputOptions method. This also increases the resolution of your diagram:

c.setOutputOptions("dpi=144")
pic = c.makeChartPicture

Now you need a property "pic as picture" in the window and add a paint event:

Sub Paint(g As Graphics, areas() As REALbasic.Rect) Handles Paint
  If pic <> Nil Then
    g.DrawPicture pic, 0, 0, g.Width, g.Height, 0, 0, pic.width, pic.height
  End If
End Sub

I hope you enjoyed this little excursion into the world of the chart director. If you are interested, there is a great offer to buy the OmegaBundle. You get not only a Chart Director license and a DynaPDF license, but many more interesting and helpful tools and for about 90% cheaper than the original price. Check it out, the offer is valid only for a very limited time.