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.