Google Chart API

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.

This is generated with the following image element.

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=400×125

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.