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.

Author: cpjobling

Senior lecturer, College of Engineering, Swansea University