« Optimization ideas fo… | Home | PDF Attachments in Fi… »

Charts with more than one x or y axis

When you use our chart classes in the MBS Xojo ChartDirector Plugin, you have the chance to have more than one X axis and/or more than one Y axis. When doing this, there are a few things to think about and some little things

The second axes for X and Y are basically always there, but only shown when you start configuring them. For example you may start with setting a title for the second axis:

// Add a title to the secondary (right) y axis call c.yAxis2.setTitle("Throughtput (MBytes)")

Now you may also want to set some colors:

// Set the axis, label and title colors for the primary y axis to red (&hc00000) // to match the first data set c.yAxis.setColors(&hc00000, &hc00000, &hc00000)

You now add layers to the graph, e.g. a bar layer and connect it to use the second Y axis here:

// Add a bar layer to for the second data set using green (&h00C000) color. Bind // the second data set to the secondary (right) y axis c.addBarLayer(data1, &h00c000).setUseYAxis2

When you run it, you see the bar layer and matching numbers shown in the right Y axis.

Now you can use negative tick length to have the ticks look to the left side inside the plot area:

// Set the tick length to -4 pixels (-ve means ticks inside the plot area) c.yAxis.setTickLength(-4)

If the two X or Y axes both show the same thing, but in different units (Fahrenheit vs Celsius, two currencies or miles vs. km), you can link them with a scale factor:

// Synchronize the y-axis such that y2 = 7.8 x y1 c.syncYAxis(7.8)

You can have a second X axis by configuring it:

// Add a title to the top x-axis call c.xAxis2.setTitle("New York Time")

Now when you configure the second X Axis, you can of course add custom labels for the data points:

// Set the labels on the x axis. call c.xAxis2.setLabels(labels1)

Because text labels are sometimes wider and need space, you can't print each label. Let's skip a few and just draw every third one:

// Display 1 out of 3 labels on the x-axis. Show minor ticks for remaining // labels. c.xAxis2.setLabelStep(3, 1)

You can define how far the gab between axis labels and axes are:

// Set the distance between the axis labels and the axis to 6 pixels c.xAxis2.setLabelGap(6)

You can even add more axes like a third Y axis with the addAxis method in CDXYChartMBS class. Here you pass the location with kLeft, kRight, kTop or kBottom constants. You receive a CDAxisMBS object, which you then configure it as desired:

// Add the third y-axis at 50 pixels to the left of the plot area dim leftaxis as CDAxisMBS leftAxis = c.addAxis(CDXYChartMBS.kLeft, 50) // Add a title on top of the third y axis. call leftAxis.setTitle("Temp"+endofline.unix+"(C)").setAlignment(CDXYChartMBS.kTopLeft2) // Set the axis, label and title colors for the third y axis to blue (0000cc) to // match the third data set leftAxis.setColors(&h0000cc, &h0000cc, &h0000cc)

Since we got a their Y axis on the left, let's also add a fourth one on the right side:

// Add the fouth y-axis at 50 pixels to the right of the plot area dim rightaxis as CDAxisMBS rightAxis = c.addAxis(CDXYChartMBS.kRight, 50) // Add a title on top of the fourth y axis. rightAxis.setTitle("Error"+endofline.unix+"(%)").setAlignment(CDXYChartMBS.kTopRight2) // Set the axis, label and title colors for the fourth y axis to purple (880088) // to match the fourth data set rightAxis.setColors(&h880088, &h880088, &h880088)

Later when you have the layer created, just assign the relevant axis to it:

// Add a line layer to for the third data set using blue (0000cc) color, with a // line width of 2 pixels. Bind the layer to the third y-axis. dim layer2 as CDLineLayerMBS layer2 = c.addLineLayer(data2, &h0000cc, "Temperature") layer2.setLineWidth(2) layer2.setUseYAxis(leftAxis)

This way you can show 4 types of data within one chart using 4 axes.

Please try the examples. If you have an older example, you may use a line like the following to increase the resolution of the image and get a high resolution picture:

// Output the chart c.setOutputOptions("dpi=192")

Let us know if you have questions. The example projects used here are dualyaxis, dualyaxis and multiaxes.

28 01 24 - 10:20