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.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>