Displaying Pie Charts with Google Chart API

In one of my [current projects ” title=”” />I am publishing the results (in blog form) of the first assessment of my use of e-learning that I have ever formally tried. The majority of the questions use the Likert scale (where respondees are asked to rank their response to a statement along the scale of Strongly-agree to Strongly disagree) and I want to present the results with pie charts like this one. I could use Excel and export the charts, as gif images, for upload to my blog, but that’s not very Web 2.0! So instead I thought I’d use the Google Chart API instead. And here is an example of what can be achieved with a small bit of HTML magic.

The Google Chart API is a web service: you provide some information about the chart you want and it generates and returns a GIF image of the chart. The URL for the chart shown in this post is http://chart.apis.google.com/chart?chs=350×150&chd=t:60,40&cht=p&chl=Strongly Agree|Strongly Disagree. To embed a chart in an HTML document, just use the Chart API URL as the src attribute of an image as in:

&lt!– Use of & in the src attribute to stand for the & in the URL
is not a spelling mistake!
You have to use the HTML entity in order to be able to embed &
in the URL! –>
<img alt="Sample chart"
&aongly Agree|Strongly Disagree” />


p>Clearly, some familiarity with HTML is required to fully exploit this feature, but it’s well worth a look. Plus if you have a number of similar charts to produce, as my report will, you’ll probably find copy, paste and tweek to be much quicker than anything you could do with traditional desktop tools.