Of all the eye-catching tools on hand for creating a site, few possess the elegance and simplicity of a good chart. Unfortunately for me, it had been quite sometime since I’d had the opportunity to work with charts on the Web, so when a recent project tasked me with building the report infrastructure for a JavaScript application I was pretty excited to see just what chart-building tools were available these days.
Excited as I was, there was one problem, time. I needed to have a working prototype of these reports in a matter of days, so my opportunity to evaluate the countless libraries out there was limited at best. Even more importantly, I needed to be sure that any library I used was going to be fairly robust and lightweight, with no hidden gotchas, such as browser compatibility issues. So when I happened upon the Google Chart API I couldn’t have been happier.
The premise behind the Google Chart API is simple—all you need is a URL.
Just a URL you ask? Well, yes, with a caveat or two. The url looks a little like this:
https://chart.apis.google.com/chart?cht=p3&chd=t:20,30,40&chs=275x100&chl=Puppies|Kittens|Trogdor&chco=40cae7|408cc6|7ec0b4which spits out the following chart:
At a glance, this doesn’t look like the most pleasant of URLs, but with a bit of digging it actually reveals itself to be quite an elegant solution. This is how it works:
-
each parameter of the query string sets its own specific part of the chart. For example, where it says
cht=p3, what it’s actually saying is “give me a 3D pie chart.” -
The next section
chd=t:20,30,40sets the data format and provides the data for the chart. The charts you can generate are very customisable, with numerous different types of charts available, ranging from the humble bar chart to more complex radar charts and even maps.
So you’ve picked out a chart, and you’ve got your data at the ready. How do you generate one of these URLs?
Well, there are a lot of libraries available to perform this very task for popular languages such as PHP, Python, Rails, and many more. Personally, I wound up writing my own custom solution in JavaScript, which you can take a gander at on the City West Water – Target 155 water usage calculator web site. As an added bonus, you can calculate your daily water usage while you’re at it (I got 134 litres, woo!).
I’m sure you’ll agree that this is a super-elegant way to create charts and graphs, and it’s also extremely fast. If you’ve used the Google Chart API in any cool projects, be sure to let us know in the comments!
Richard Bone
