Google publishes chart API for web pages

Let’s say you want to add a chart to a blog post. How do you generate the chart? I’d guess that the majority of bloggers would use some client software like Excel that can create charts to enter the data, save the chart as an image, and upload it.

But what if you want the chart to represent volatile data, like the results of an ongoing survey that are stored in a database?

Well, the good folks at Google have released the Google Chart API. It’s a really simple API for generating various kinds of chart images from data and options provided in a URL. A single HTTP GET request with parameters is all you need. You can even use the URL as the src attribute on an img tag, as shown below:

A Google chart

The URL for this image is http://chart.apis.google.com/chart?cht=p3&chs=300×250&chd=s:Google, where “p3″ is the type of chart (3-D Pie), “300×250″ is the chart size, and “s:Google” is the data.

The data, you say?

And that’s where “simple” starts to break down. Each letter in the word “Google” in this example stands for a data point with a value between 0 and 61, where “A” thru “Z” represent 0-25, “a” thru “z” map to 26-51, “0″ thru “9″ cover 52-61, and missing values are represented by an underscore. Commas are used to separate series. The leading “s:” says that the encoding is “simple”.

So that means you have to scale your data to the range 0-61, and then encode it using those rules. It’s so simple that Google provides an example Javascript routine to convert an array of values to the required string, based on a maximum.

That’s not the only method for encoding data that Google provides, but the two other methods also require that you scale your data to a fixed range of values, so you might as well use the “simple” one.

Other than that minor headache, though, the API is pretty neat. You can control colors and transparency, titles, legends, axis labels, line styles, and more. For chart types, you can choose between Line, Bar, Pie, Venn, and Scatter diagrams — with specific options for each.

Check out the API documentation and go nuts! Oh, sorry, their usage policy limits you to 50,000 queries per user per day — so try to keep it under control, folks.

UPDATE: I created a little tool in PHP for prototyping these charts. You can use it here, or download the sources.





9 Responses to Google publishes chart API for web pages

  1. The API may be simple to a Java programmer but as a blogger using typepad who just wants to stick a chart in a typelist widget (by pasting in the image tag code) the data encoding looks far from simple – as you rightly say. I just wanted a pie chart based on three values (7655,6184,6056) but apparently I need to run a Javascript program to encode them or figure out some scaling equation. There must be a simpler way – I suppose the answer is to wait until someone creates a Google Chart widget for typepad :)

    • It should be fairly trivial to translate the javascript function into PHP, and then you could wrap that with a function that takes arguments for all the options — or some such. Then embed that in a plugin. I don’t use typepad myself, but I might whip up something for WordPress.

      • Chip: Now that would be a *GREAT* idea.. nobody has done it, so if you could cook up a plugin that integrate these functionalities, it would certainly attract some attention to you.

  2. The API may be simple to a Java programmer but as a blogger using typepad who just wants to stick a chart in a typelist widget (by pasting in the image tag code) the data encoding looks far from simple – as you rightly say. I just wanted a pie chart based on three values (7655,6184,6056) but apparently I need to run a Javascript program to encode them or figure out some scaling equation. There must be a simpler way – I suppose the answer is to wait until someone creates a Google Chart widget for typepad :)

    • It should be fairly trivial to translate the javascript function into PHP, and then you could wrap that with a function that takes arguments for all the options — or some such. Then embed that in a plugin. I don't use typepad myself, but I might whip up something for WordPress.

      • Chip: Now that would be a *GREAT* idea.. nobody has done it, so if you could cook up a plugin that integrate these functionalities, it would certainly attract some attention to you.

  3. Pingback: Chart mixer for prototyping Google Chart API -- Chip’s Tips for Developers