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.
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.
This is the type of chart, in this case a vertical bar type.
The size of chart in pixels
The chart colours in hex format. Only hex format is supported.
The chart labels
Auto-size the chart columns if they don’t fit, By default each column is 25 pixels wide.
Defines the axes for the rest of the axis labelling.
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
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.
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
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.