Home > Google Charts, Statistics, Time Savers > Google Charts overview

Google Charts overview

August 18th, 2008
Goto comments Leave a comment

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/

Google Charts, Statistics, Time Savers

  1. No comments yet.
  1. No trackbacks yet.