A Quick Look at Google Charts

Need chart graphics for your website? Google released their Charts web API not too long ago, making reasonably nice charts available to anyone with an Internet connection and web browser. No expensive diagramming software nor Excel spreadsheets are necessary. Using Google Charts really is as easy as pie (charts).

Types of Charts

Currently, there are nine chart types, with some newly released, giving you a wide range of chart types to work with.

1. Line charts.
2. Sparklines.
3. Bar charts.
4. Pie charts.
5. Venn diagrams.
6. Scatter plots.
7. Radar charts.
8. Maps. Oddly, of the seven regions you can select, there’s no North America, only “usa”. (I guess Canada doesn’t matter after all?)
9. Google-o-meter.

Google Charts Format

To use Google Charts, all you have to do is supply a series of key/value parameter pairs with a specific API URL. From the docs:

http://chart.apis.google.com/chart?<parameter 1>&parameter 2>…&<parameter n>

If you are using a chart label with special characters in it, they’ll be auto-replaced with a code of the format “%nn”. For example, a space is replaced with %20.

Cautions

1. Pie charts will be clipped if the image size is too small. There is a limit to the overall size of any chart. You’ll know because you’ll get a “400 Bad Request” error, but to avoid it, keep the square area under 300,000 pixels. The max in any dimension is 1,000 pixels.
2. Map size is an exception. They cannot be more than 440×220, according to the docs. So it’s likely your map chart will be clipped.
3. They don’t use Google Maps, just plain border maps.
4. The Google Charts docs says that there’s no limit on usage, but if your API calls will exceed 250,000 calls/day, email them an estimate.

Embedding Google Charts in Your Web Pages
Because the Charts interface produces content of type “image”, you can embed the results in your web page using an HTML “img” tag. The image format is PNG.

Creating Chart Animations With Google Charts

One area in which Google Charts beats charting in spreadsheets (e.g., Excel, OpenOffice) is enabling chart animations. Google Charts doesn’t have animations, but you can generate a sequence of images by changing parameters, then drop them all into a suitable application such as Moviemaker (Windows) or iMovie (Mac). Any “stop motion” software will do the trick as well.

Just be sure to name your saved image files with a keyphrase and a number. For example, image-001, image-002, etc. The only reason for this is that most software will order media files dropped into the panel in canonical order. That makes it easier to grab a bunch and drop them all into the video timeline en masse instead of one at a time. Here’s a basic algorithm:

Manual:

1. Decide on chart type.
2. Use Firefox browser and install any screen grab extension/ plugin.
3. Get your dataset ready.
4. For each each “tuple” of data (pair, triple, quadruple), which represents the parameter values for one chart:
   1. Render the chart by typing in the appropriate URL.
   2. Save the image by right-clicking on the image.
   3. Use a “numbered” file name. (Don’t lose track of the order.)
5. Open your video application.
6. Drop all the images into your workspace.
7. Change your options to specify how long each snapshot should show for (I use 0.5 seconds below), and the transition time between snaps (I use 0.25 sec). The short the times, of course the faster the animation.
8. Grab the images either en masse or individually (if necessary) and drop them into the video timeline area of your workspace. See video below.

Automated:
To automate the process, write a bit of code to generate and save the images, appropriately named. Then use your video app to finish up.

The video below first shows step #7 above, then a fragment of a chart animation I created for an article at FreelanceSwitch (not published yet). Note: the SplashCast player will pause momentarily between video segments.