Atom Feed SITE FEED   ADD TO GOOGLE READER

Use the Google Chart API

Want sexy charts, but without the grief of Excel? In your blogs, emails, and projects? Use the recently released Google Chart API for fast and easy charts.

Google Chart API
Chart: Easy=30%, Awesome=20%, Fun=50%

Let's suppose we want to make the above pie chart. We simply build a URL that describes the image, and Google Chart API will draw if for us. Here's the HTML for the labelled chart above:

<strong>Google Chart API</strong>
<img src="http://chart.apis.google.com/chart?cht=p&amp;chd=s:DCF&amp;chl=Easy|Awesome|Fun&amp;chs=270x150"
alt="Chart: Easy=30%, Awesome=20%, Fun=50%"
width="270" height="150" />

Data encoding: chd=s:DCF


chd means chart data, and s means string encoding. In string encoding, each character in [A-Za-z0-9] represents a different value between 0 and 61; A=0, B=1, C=2 ... a=26, b=27 etc. In this case, D=3, C=2, and F=5. In pie-chart terms, that translates to D=30%, C=20% and F=50%.

Label encoding: chl=Easy|Awesome|Fun


As you would expect, chl means chart label. In our case, we label the 30% slice (D) with "Easy", the 20% slice (C) with "Awesome" and the 50% slice (F) with "Fun". The labels are arranged in the same order as the data and separated with the pipe character.

Size chs=270x150


Finally we give the chart a size. chs means chart size with the value encoded as width x height, both given in pixels. The sizes are slightly annoying, since it tends to clip the labels if the chart isn't an appropriate aspect ratio.

Blogs, Emails, IMs...


Pie charts are just the tip of the iceberg. Read through the full Google Chart API, and start adding visuals in your blogs and emails!