Recently I’ve been working on a project using Google Charts API and I absolutely love it. It makes pretty graphs and shows data really nicely – and it’s very painless. I did trip over a little trick today though which took me a little while to work out, so I thought I’d share it here: how to add two levels of label to an axis.

The axes in Google Charts are a bit interesting, because what they display bears absolutely no resemblance to what data is there – you label the axes separately, even if they are numbers. To label multiple things – in this example a scale and some units, you simply specify the axis more than once. To specify which axes should be shown, use chxt (CHart aXis Title) and set something like this:
&chxt=x,y,y

Then add the labels as required, for example:

http://chart.apis.google.com/chart?chxl=1:|Sun|Mon|Tue|Wed|Thu|Fri|Sat|2:||Week+37
&chxr=0,0,20&chxs=0,676767,11.5,0,lt,676767&chxt=y,x,x&chbh=a
&chs=360x240&cht=bvg&chco=CC0057CC,3D7930&chds=0,20
&chd=t1:10.059,12.578,13.6,11.135,11.018,7.104,6.92|50,60,100,40,20,40,30

This produces a graph like this:

You can then add labels (using chxl) and ranges (uses chxr) to your axes as you wish – and even add axis labels to the top and right hand graph edges, using the t and r axes, with as many of each as you’d like, and using their list position as a parameter to the range/label settings. I hope this is useful to someone, as it took me a little bit of research to figure it out.