Using Googles Chart API to Create Charts for your Web Apps

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

The Google Charts API allows you to send data to Google and have it returned as a graph or chart. All the hard work is done for you by Google and its servers and you simply reference an image in your HTML. You pass Google the raw data — the numbers for the charts, axis labels, and so on — as part of the image’s URL. If you want to add charts to your site or web based applications to show dynamic data the Google API is a quick, easy and attractive choice.

The Google chart API is capable of producing Bar Charts, Line Charts, Radar Charts, Scatter Graphs, Venn Diagrams, Pie Charts, Maps and a Google-o-meter. You create your chart by building a URL to send as a request the Googles servers.

http://chart.apis.google.com/chart?cht=p3&chd=t:39,47,8,4,2&​chs=380x180&chl=IE|Firefox|Chrome|Safari|Opera

Popular Web Browsers Nov 2009

The above example shows what the above URL returns as a PNG image, the data represents the most popular web browsers as of November 2009 according the W3C (rounded to the nearest whole number). Some extra parameters have been added to set chart colours.

To include the chart in your page you simply use the URL as the path in an image tag.

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:39,47,8,4,2&​chs=380x180&chl=IE|Firefox|Chrome|Safari|Opera" />

If you look at the URL used in the example you’ll see we are passing some parameters along in the query string (the bit after the question mark). The query string in it’s simplest from passes the type of chart cht, the size of the image produced chs and the data chd.
The data portion of the URL is the only bit that requires some understanding to get you head around and only if your data falls outside a 0-100 structure.
The Google documentation is very good and is probably the best place to start with your own charts.

The disadvantage of using the Google API is you are relying on Google to provide the service and sharing your data with them. Google have increased its usage limit from 50,000 requests per day to a unlimited number with a suggestion you contact them if you think you will exceed 250,000 per day, this could be an issue depending on your traffic levels.

What does Google get out of offering this service for free? Well I guess Google gets your raw data and can therefore index it in some way that it can then produce relevant search results for specific queries. I think it is unlikely Google uses the data for anything more sinister but if your data is sensitive and your application needs to be secure I would suggest using something else.

There are alternatives, one being to create your graph in Photoshop if the data is static. The beauty of Google Charts however is you can make the chart dynamic by building the URL that is passed to Google on the fly using some a script to pull the data from a database for example. Yahoo! provide a similar service via it’s YUI tools that allows you to produce bar charts in Flash. The disadvantage here is no flash, no chart. The other option is to use JavaScript with projects like Flot and Plotkit creating some nice looking charts that do offer more flexibility to the design. The disadvantages with this method is the reliance on JavaScript being available and increased work load for the client machine. When HTML5 becomes more widely supported using the <canvas> attribute is likely to be a good alternative but at the moment you may find the lack of browser support to limiting.

The advantage Goggle has over the alternatives is the chart that is produced is a PNG and therefore will work in just about any platform, without flash or JavaScript. Also by using Googles servers you reduce the work the clients machine or your server need to do. It may actually speed up your page load times as the charts are being called from another location allowing more resources to be downloaded by the browser simultaneously. From my experiences so far Googles servers are quick to serve any requests.

This article was posted on 4 December 2009 in Misc

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.