Quick and Easy Graphing with the Google Chart API

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:

http://chart.apis.google.com/chart?cht=p3&chd=t:20,30,40&chs=275x100&chl=Puppies|Kittens|Trogdor&chco=40cae7|408cc6|7ec0b4

which spits out the following chart:

Example Pie 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,40 sets 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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.mikehealy.com.au cranial-bore

    I like it. Very easy to integrate into an existing page as the <img> src tag would just be the appropriate URL. I guess for apps served with SSL the image would need to be saved by the server and loaded from the app domain to avoid warnings though.

  • http://www.magain.com/ mattymcg

    Great write-up Rich! I’m amazed at how quick those PNGs are generated, even for the very first time before they obviously get cached…

  • kodi

    i did one in javascript too..(wow, almost a year from now). And i wrote it as an Prototype add on, you can see it here http://dragan.yourtree.org/blog/en/2007/12/15/google-chart-api-prototype-plugin/

  • http://m2i3.com myrdhrin

    Does anyone has an idea on why Google would provide that service for free? It obviously takes bandwidth and CPU… and from the little I’ve seen they don’t see to have any context to analyse the data…

  • Freelance Historian

    That’s very neat! Thanks for the head’s up- bookmarked this for later.

    Myrdhrin, perhaps they are using this as a test of an idea to later put into a full-fledged program, while at the same time getting folks accustomed to using it. I doubt that they could put ads on this as they now do with Youtube, now that Youtube is so integrated into the online lifestyle.

  • http://www.tyssendesign.com.au Tyssen

    404 on your City West Water link.

  • http://www.magain.com/ mattymcg

    Thanks Tyssen, link fixed.