Using the Google Chart API | Fuzzy Tolerance

Making good charts on the web is tricky. You can’t really make anything but a bar chart in HTML, and getting that bit of coding right isn’t trivial. The most reliable method for charting is creating static images, but coding your own also isn’t trivial, and third part components can cost a pretty penny.

Fortunately, those nice folks at Google have released the Google Chart API. Now making charts is as easy as writing a URL.

What kind of charts can you make? How about different varieties of line, bar, and pie charts, as well as Venn diagrams and scatter plots. Each is highly customizable, including the chart title, legend, labels, and colors.

Take a look at this simple bar chart:

Here’s the IMG tag we used to make it:
<img src=”http://chart.apis.google.com/chart?
cht=p3
&chd=t:90,49,27
&chs=350x150
&chl=Fuzzy|Tolerance|Chart” />

Let’s break that down:

http://chart.apis.google.com/chart? This is the base URL location.
cht=p3 This is the chart type. We're telling it to make a 3D pie chart.
chs=350x150 This is the chart's size in pixels.
chd=t:90,49,27 This is the chart data.
chl=Fuzzy|Tolerance|Chart These are the labels, given in the same order as the data.

How cool is that? A snazzy 3D chart is just a simple URL away.

Now let’s look at a simple line chart:

Here’s the image tag for it:

Our chart type is lc for line chart, chxt=x,y means we’re going to have both x-axis and y-axis labels, and chxl spells out our labels. Note that we have more data points than lables - the data points are even distributed in the graph, so there’s no need to label each X position.

Here are some more advanced graphs. You can see the parameters for each by right-clicking on the image and viewing its properties.

Different chart types will have different parameters, all of which are meticulously documented with examples at the Google Chart API site.

Unless you have crazy charting needs, the Google Chart API should be able to handle anything you can throw at it. This is a great resource that I’ll be using any time I need a chart on one of my web sites.

Note: If you are a PHP user and need a different way to make charts (say for an internal site used by people who can’t get to the web), check out Libchart. It’s fairly easy to use and can create good basic charts. GNU GPL.