Axes and scales

Welcome to the axes and scales tutorial. In this tutorial you will learn:

  • Why additional axes can make a better chart
  • How to set up a secondary y-axis
  • How to format your axes to display units
  • How to set up minimum and maximum values for your axes
  • Axis types you can use with arcadiaCharts

Why add a second axis?

Let's take a look back at your first line chart:

var myData = "Month,Max Temperature, Min Temperature, Precipitation\n"+
				"Jan, 26.7, 18.7, 90.2\n"+
				"Feb, 26.9, 18.6, 56.1\n"+
				"Mar, 27.6, 19.6, 55.9\n"+
				"Apr, 28.2, 20.4,  39.1\n"+
				"May, 29.3, 21.3, 28\n"+
				"Jun, 30.3, 22.3, 12.7\n"+
				"Jul, 30.8, 23.1, 15\n"+
				"Aug, 31.5, 23.4, 11.2\n"+
				"Sep, 31.4, 23.1, 19.8\n"+
				"Oct, 30.5, 22.4, 57.9\n"+
				"Nov, 28.9, 21.3, 76.2\n"+
				"Dec, 27.3, 19.4, 96.5\n"; 

It doesn´t look very convincing. You have no idea whether the temperature is in celsius or in fahrenheit. The chart consists of a line at the top and a line at the bottom. For January we have about 80 mysterious units of precipitation and about 5 mysterious units of temperature. So one could say that in January it's 3 times wetter than it is warm. Does that make sense? No.

When we look at an actual climograph (http://www.ucm.es/info/cif/plot/un-newca.htm) we see there are two y-axes. The temperature is measured in °C and the precipitation in mm. The scale of the precipitaion axis is twice as big as the scale of the temperature axis. We can do this in arcadiaCharts too.

How to set up a secondary axis

Adding the secondary y-axis

Line-charts and bar-charts can have three axes: X-axis, Y-axis and 2nd Y-axis. Pie charts don´t have any axes, so this is irrelevant there.

First we tell the chart to use the secondary y-axis for the data column we called “Precipitation”:

.addToSecondaryAxisByTitle('Precipitation')

The result will look like this:

Note that arcadiaCharts automatically scales the axes so the lines use the whole chart area.

In the next step we want to create more meaningful axis labels.

Formatting the axis labels

Adding the secondary axis produced more meaningful graphs but simply looking at the chart itself isn't sufficient to tell us which line belongs to which axis. During the labeling your chart tutorial we will add axis titles to make this clear, but first we have to take care of the axis labels.

We have some numbers on the axes and from the data we know that we are talking about temperatures from 4°C to 18°C and rainfall from 45 to 90 mm per square meter. But the viewer of the chart could equally well read 45°F - 90°F and 4 to 18 inches. So we need to add units to the axis labels using the command setAxisTickmarkFormattingPattern(axisIdentity, 'formatingPattern')

.setAxisTickmarkFormattingPattern(ac.AxisIdentity.Y_AXIS, '#0 °C')
.setAxisTickmarkFormattingPattern(ac.AxisIdentity.Y2_AXIS, '#0 mm')

We can target the x-axis using ac.AxisIdentity.X_AXIS; ac.AxisIdentity.Y_AXIS targets the y-axis and ac.AxisIdentity.Y2_AXIS targets the secondary y-axis.

The formatting patterns consist of symbols which represent numbers, separators and patterns. For more information about formatting patterns please refer to formatting patterns reference.

Setting minimum/maximum values

When we allocated the two value sets to the two y-axes, these axes got scaled automatically, so the temperature axis goes from 18°C to 32°C and the precipitation axis from 10 mm to 100 mm. In general this is reasonable behavior that adequately displays the ups and downs of your data. But in the case of a climate chart we usually want to have a visible zero-line. This can be done with the command setAxisMinimumAsNumber(axisIdentity, value)

.setAxisMinimumAsNumber(ac.AxisIdentity.Y_AXIS, 0)
.setAxisMinimumAsNumber(ac.AxisIdentity.Y2_AXIS, 0)	

While we are adjusting the minimum/maximum values, there is another feature that can usefully be implemented: Some climate charts use a fixed scaling, so the precipitation numbers are twice as high as the temperature numbers, when °C/mm units are used. This allows for differentiation between humid and arid months. In our chart we use the command the command setAxisMaximumAsNumber(axisIdentity, value)

.setAxisMaximumAsNumber(ac.AxisIdentity.Y_AXIS, 50)
.setAxisMaximumAsNumber(ac.AxisIdentity.Y2_AXIS, 100)	

And this is how the chart looks:

Introduction to axis types - category, linear, date, logarithmic

Category axis

A category axis can display all types of values, even higher order values such as date values or numbers. The values are displayed in the order in which they appear in the value set. Only the X-axis can be set as a category axis.

Linear axis

A linear axis expects values in number format (integer or floating point). The values are displayed sorted in ascending order according to their value. Both X and Y axes can be of type “linear”.

Date axis

Only the X-axis can be set as a date axis. A date axis expects date values. In the JavaScript version of arcadiaCharts the date values can only be created using the csv data importer. See the corresponding section of the reference manual for further details on this subject.

The behavior of a date axis differs from that of the other axis types. In contrast to the other axis types the tickmarks are - depending on the data - unevenly spaced on the date axis. This is due to the fact that each month has a different number of days. The distance between February 1st and March 1st is shorter than the distance between March 1st and April 1st. If the date axis displays only whole years then the distances between each year are almost the same (a little longer in leap years).

If you wish to have even distances between months you have to choose a category axis instead.

More information on the date axis can be found in the corresponding section of the reference manual.

Logarithmic axis

A logarithmic axis expects data in numeric format (integer or floating point). The axis will display the data accordingly with tickmarks at 10power0, 10power1, 10power2 etc.

Both X and Y-axes can be set to type “logarithmic”.

For more information on the logarithmic axis, see the corresponding section in the reference manual.

Congratulations, you now know how to add a second axis, format its labels and set up maximum and minimum values