Google Chart API

14 June, 2009 · 2 minutes to read

Google Chart API

I’ve just been using the Google Chart API to create charts in some web parts. If you haven’t come across it before it’s a fantastic free tool for charting. For example the 2 images which follow come straight from Google using data embedded in the url.

All you need to do to include a chart is include an image element in your html pointing to the Google chart servers with the appropriate parameters. You do of course need an internet connection for this to work as the images are retrieved directly from Google.

You can control everything about how the chart is built and displayed and 9 different types of charts available. I think that this is a valuable addition to your toolset. To see more details go to the Developers Guide.

As an example I’ll work through an example with some of the data I was using, lesson attendance data.

chart

This is generated with the following image element.

<img src=”http://chart.apis.google.com/chartcht=bvs&chs=400x125 &chco=008000,FFFF00,FF9900,FF0000,0000FF&chdl=Present|Late|Authorised%20Absence|Unauthorised20Absence&chba=a&chxt=x,y&chxl=0:|Psy|Bus|Inf|Phy||1:|0|25|50 &chds=0,50 &chd=t:4,21,22,0|0,0,0,0|0,0,0,0|1,16,7,0” />

It looks complex, and until you get the hang of the parameters it can be, but going through each parameter in turn it turns out to be remarkably easy to use.

cht=bvs

This is the type of chart, in this case a vertical bar type.

chs=400x125

The size of chart in pixels

chco=008000,FFFF00,FF9900,FF0000,0000FF

The chart colours in hex format. Only hex format is supported.

chdl=Present|Late|Authorised%20Absence|Unauthorised20Absence

The chart labels

chba=a

Auto-size the chart columns if they don’t fit, By default each column is 25 pixels wide.

chxt=x,y

Defines the axes for the rest of the axis labelling.

chxl=0:|Psy|Bus|Inf|Phy||1:|0|25|50

Any axes labels. The digit followed by a : indicates it’s for that positioned axes in chxt. So this futher splits down into

0:|Psy|Bus|Inf|Phy meaning for axis x use the values Psy, Bus, Inf & Phy

1:|0|25|50 meaning for axis y use the values 0, 25 and 50

chds=0,50

This defines the scaling of the graph. Be default the scale is 0 to 100 so for this data where the maximum is 37, it would all be squashed in the bottom half of the image. Another thing to bear in mind is that values smaller than the ranges will not appear and values greater than the maximum will be truncated to the maximum.

chd=t:4,21,22,0|0,0,0,0|0,0,0,0|1,16,7,0

This is the actual data. The t indicates the type of data, in this case text with data scaling as we’ve included the chds parameter. The possibilities are

  • Text: Float number 0 – 100
  • Test with data scaling: Any positive or negative number
  • Simple encoding: Integers 0 – 61. Each value represented by a single alphanumeric character. This is the shortest data string, but is very limited.
  • Extended encoding: Integers 0 – 4095. Each value represented by two alphanumeric characters.
Richard Willis headshot

Written by Richard Willis

Managing Director / Founder

Richard started SalamanderSoft in 2007 after a successful career as a software developer. Wanting to start his own company and with experience in integrating school systems he set out to build the best integration system for schools and to exceed customer expectations. He starting out on his own, doing all the coding, support and sales until finally the growing number of customers meant he needed to start growing the team. He is still heavily involved in coding the core Integration Suite product in addition to running the company and being the first point of contact for prospective customers.

Copyright © 2020 SalamanderSoft Limited