Using Googles Chart API to Create Charts for your Web Apps
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.
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
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.
<canvas> attribute is likely to be a good alternative but at the moment you may find the lack of browser support to limiting.
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.