Most of my teaching today has been about the basics of online presentation – online writing etc. As an exercise I pulled some [council news from the web ](http://www.preston.gov.uk/news/2009/oct/fishwick-election-results/)to give us something to work with.  It was a simple story, a local council by-election. But it had some nice angles to explore – turnout etc – and it was on a patch I was interested in as part of the [Bespoke project ](http://www.bespokeproject.org/)running out of the University.

I was really pleased to see some of the third year print students immediately looking at tables and graphs as a way of displaying the result. They were using Word to hack out the copy and used the Chart generator to make pie charts. A few things tripped them up.

The first was the generic colour scheme for the charts. The election results included Labour, Conservative and Liberal Democrat candidates. But you can see that the biggest result was formatted as blue – a bit of a problem when it was a Labour win.

[![A win for Blue? ](https://i1.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/graph-1-300x261.gif?resize=300%2C261 "graph-1")](https://i0.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/graph-1.gif)
A win for Blue?
Changing the colour of the data is pretty easy in Word 2007. Just right-click the segment and pick Format Data point. Pick Fill from the list then check Solid fill. Pick and colour and click close it’s done.
[![That's better. A win for Labour.](https://i0.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/graph-2-300x256.gif?resize=300%2C256 "graph-2")](https://i2.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/graph-2.gif)
That's better. A win for Labour.
But then comes the next problem. You have to get the image out of Word.

In principle this is not too hard. Simply highlight the image, copy it and then paste it in to an image editing package to save it for the web. Of course it’s that last bit that is the pain – especially if you don’t have a decent editor to hand. And often the image is squashed or distorted.

Using online services

As an alternative solution to using Word or needing an image editor, I suggested using Google docs. The spreadsheet option allows you to create a chart which you can then share or export as an image. Easy to do

  • Enter the data
  • Select the data you want to work with
  • Use the Wizard to make the chart
[![Easy to use but limited](https://i1.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/Untitled-2.gif?resize=403%2C332 "Untitled-2")](https://i1.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/Untitled-2.gif)
Easy to use but limited
When the image is saved there is a neat option to export the image
[![Getting an image out of Google docs](https://i2.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/graph-3.gif?resize=260%2C189 "graph-3")](https://i2.wp.com/www.andydickinson.net/wp-content/uploads/2009/10/graph-3.gif)
Getting an image out of Google docs Google spreadsheet chart
The image it chucks out looks pretty good but you can see that we have the same problem with colour, that we had with Word. Unfortunately there isn’t much we can do about that.

The Chart API

One option is to delve a little deeper in to the thing that helps make the google charts – the Google Charts Api. Unfortunately the code is a little arcane and often needs a little more effort to understand the construction of the chart than a visual hack around.  Luckily there are plenty of third party sites that offer wizards for google charts.

Jon Winstanley has a great little app for quick charts and it also allows you to pick colours for your data.  It still requires a little concentration around the data structure but it works well.

Another is James B. Allen’s chart generator which has a more of a WYSIWYG feel to it.

Google Chart

Appropriate use.

There are other chart apis and chart builders but the open and free tools from Google are really tempting and, with the help of people like James and Jon, some easy to use third-party apps.

Graphs and charts are an obvious and easy way to show people data, especially as they scan for detail. Of course in all of this chart magic, one thing is worth noting. Perhaps the best way to present the information is the simplest:

  1. Labour: 656 Votes
  2. Conservatives: 283 Votes
  3. Lib Dems: 239 Votes