Charts with more than one x or y axis

Add-Ons
1

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.

1 Like