I came across Google Charts the other day and wanted to let people know what it’s all about. I found it incredibly easy to use to make a simple chart but a little more complicated to make something more complex.

The hello world example is given as follows:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World (should be used within an <img src=”" /> tag)

To be clear, Google Charts does not use an API key system like Google Maps which takes a layer of complication away.

Let me break up the key parts of the url used to generate the above example…
The first part http://chart.apis.google.com/chart? should always be the same followed by a combination of the following:

• cht = Type of chart you want to make (Common types are p3, lc, bhs, bvs)
• chd = Chart data stream(s), usually in the form of t:item1,item2,item3
• chs = Chart size (widthxheight)
• chl = Chart Label separated by a | per dataset

The next logical step is to look at bar charts because you can do all sorts with datasets/axis/labelling and colouring. See the following example (it’s not as complicated as it looks as I will show):

http://chart.apis.google.com/chart?chs=300x 120&cht=bvg&chg=0,10,1,5&chds=0,25&chxt=y&chxl=0:||5|10|15|20|25&chbh=60&chd=t:10,24, 6&chm=t10,000000,0,0,11|t24,000000,0,1,11| t6,000000,0,2,11&chl=14/08/08|15/08/08 |18/08/08

This one is different in more ways that the obvious fact that it’s not a pie chart any more; it has labels on the axis, background lines, it’s scaled and there are labels per bar. The additional parts of the url are structured in the following manner:

• cht=bvg (it was p3 before meaning 3D pie chart, this one is a vertical bar instead)
• chg = Chart grid accepts 4 arguments: x step, y step, line length, blank length
• chds = Data scale, arguments are minimum and maximum (this example 0-25)
• chxt = Defines which axis have labels on (x, y, r)
• chxl = Defines the labels for above in the form id:label1|label,id:label1|label2
• chbh = Bar height (or width in this case as we are using a vertical chart)
• chm  = Labels for each bar, arguments are id, colour, dataset id, dataset index

This has been a very simple guide to understanding how to use Google Charts. There are Infinitely more resources available at: http://code.google.com/apis/chart/