Google's Chart API - An Example
I recently stumbled on Google’s new charting API. This is a great tool that will make creating charts and graphs much easier than some alternatives. I’ve seen some cases where you have to use extremely complex programming techniques server-side to create such charts; not so with Google.
It’s pretty simple to use: give Google a specific set of URL-encoded parameters, and it spits a PNG chart image back at you. I created a simple pie graph to display browser usage using it.
Data source: MarketShare by Net Appliance - February 2008 Browser Share Statistics
So here’s a quick and dirty breakdown of how the URL-encoded parameter works. First, the URL itself:
That’s a lot of parameters for this specific graph. So how’s it all work? Without getting too deep into it (that’s what the Documentation is for), here’s what I can tell you:
- http://chart.apis.google.com/chart? - your primary URL prefix. That’s the chart “server” if you will. Will always be required of course.
- chs=430x200 - “Chart Size” of 430 pixels wide by 200 pixels tall
- chd=t:74.88,17.27,5.7,0.69,0.68,0.59,0.18 - This is the primary data set. Specifically, it’s an ordered set of parameters. The order you plug this in is absolutely vital!
- 74.88% for MSIE
- 17.27% for Firefox
- 5.7% for Safari
- 0.69% for Opera
- 0.68% for Netscape
- 0.59% for Mozilla
- 0.18% for other browsers
- Notice how these are comma separated. So this parameter uses the decimal for our percentage-based numbers, but you need to separate each data set with a comma. i.e. 74.88,17.25,…
- cht=p3 - the type of chart. This is a pie chart, but there are other types available:
- Line charts (cht=1c or cht=1xy)
- Sparklines (cht=1s)
- Bar charts (cht=bhs, cht=bvs, cht=bhg, cht=bvg)
- Flat pie chart (cht=p)
- 3D pie chart (cht=p3)
- Venn Diagrams (cht=v)
- Scatter Plots (cht=s)
- Radar cahrts (cht=r)
- chl=MSIE|Firefox|Safari|Opera|Netscape|Mozilla|Other - This is the ordered data set labels to match our data we input earlier. See how MSIE is first, and so is 74.88% in our data variable? That’s because MSIE has 74.88% of browser share. Firefox is second, its browser share percentage is second, and so on. That’s “c h L” (lower case L) by the way. Just do like I do - think, Central Hockey League.
- chco=333333 - That’s a hex color for the basis of the graph. Google’s chart API automatically interpolates other colors based on what you input, so all your colors (if you only specify this one, though you can specify others - see documentation) will be a shade of this base color.
As you can tell, this is a pretty beastly and serious charting solution. It can even do maps! Here’s one of the United States:
As you can see, you can highlight a state or two. Very cool stuff!
I may do a more complete write-up and research on this later. Very interesting! Major kudos to Google on publishing a fantastic tool that will help statisticians everywhere!