Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Adding Multiple Axis Labels to a Google Chart

DZone's Guide to

Adding Multiple Axis Labels to a Google Chart

·
Free Resource
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.
Topics:

Published at DZone with permission of Lorna Mitchell, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}