Google charts for Christmas

It must be Christmas, 24 Ways is opening its advent calendar doors to any web designers who care to listen. The entire site is worth a read but what caught my eye, yesterday, was an article about Google Charts and how easy it is to use to generate your own charts on the fly.

To generate your own chart, start with:

<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=s:ZreelPuevfgznf2008" />

which produces the following chart.

You can see that the image tag references the Google Charts API, passes it a few parameters which Google outputs as an image – Done.

The article then explains how to create, pie, bar and line graph, all by passing different parameters and values. Creating something as complex as:

<img src="http://chart.apis.google.com/chart?chco=00AF33,4BB74C,EE2C2C,CC3232,33FF33,66FF66,9AFF9A,C1FFC1,CCFFCC&chl=Egg+nog|Christmas+Ham|Milk+(not+including+egg+nog)|Cookies|Roast+Chestnuts|Chocolate|Various+Other+Beverages|Various+Other+Foods|Snacks&chtt=Food+and+Drink+Consumed+Christmas+2007&cht=p&chs=600x300&chd=s:KUIZFDPJF" />

Heres a summary of the parameters:

  • cht – Chart type (lc is a line chart, p is a pie chart, bhg is a bar chart etc.).
  • chs – Chart size (height and width).
  • chd – Chart data. (Tricky, Google uses simple encoding)
  • chtt – Chart title (use + in place of spaces)
  • chco – Chart Colours (use hex value, but not prefixed with # as in CSS).
  • chl – Chart labels (separate by a pipe | character)

Further Reading: Google Charts API

One reply on “Google charts for Christmas”

Comments are closed.