Adding Multiple Axis Labels to a Google Chart

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.

3 thoughts on “Adding Multiple Axis Labels to a Google Chart

  1. Hi Lorna, long time no see. How’ve you been? Good, I hope. Anyway, I’ve been playing with the Google chart API myself in a few recent projects and I have to say that I too love it. Unfortunately, I can’t say I find the API itself that easy to use: you’ll have to know what chxt stands for, and it creates an unreadable query string.

    So, do you know of a (simple) PHP wrapper API, that will generate the correct query string by using a DSL? I would definitely love that :)

  2. berry__: Hey there, long time indeed – I am well and I hope you are too! I haven’t used a wrapper, because I found the google documentation easy to use so I just wrote some code that has a comment and then adds another parameter to the code. It would be easy to write a wrapper though, and there are a few around (http://groups.google.com/group/google-chart-api/web/useful-links-to-api-libraries) – if you do use a wrapper I’d be interested to hear how you find it.

Leave a Reply

Please use [code] and [/code] around any source code you wish to share.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)