Make charts online using the Google Chart API

Posted on December 1, 2008 at 5:34 am

The Google Chart API is a web service that you can connect to quickly generate charts for your blogs or websites. Since it is a web service, you will not have to install anything in your web server. All you need is a basic understanding on how it works.

Here is an actual example of a chart created using Google Chart API:

You can see that the chart was generated using a simple URL parameter manipulation:

There are at least 3 parameters (cht, chd and chl) to set to be able to generate a chart. Below are the steps to make those parameters:

Step 1: Define the Chart Type: cht

First you will need to define what type of chart you want. A listing of all available chart types are located here: http://code.google.com/apis/chart/types.html

In the example that we will create, we will use cht=p3 which is a pie chart. To make other types of charts like bar or line charts, just browse the types of charts and put in the corresponding cht parameter value.

Step 2: Define the parameter for data and labels: chd and chl

For example, we want to chart the distribution of each of the four brands below:

BrandX=40
BrandY=30
BrandZ=20
BrandA=10

The data (chd) parameter will be: chd=t:40,30,20,10

Note: In the example I chose to use Text Encoding. To use other types of encoding click on the link below: http://code.google.com/apis/chart/formats.html

The label parameter (chl) is chl=BrandX,BrandY,BrandZ,BrandA

The label parameter values are comma delimited and should have the same number of values as the data parameter.

Step 3: Define the size of the chart in pixel

The format is a simple chs=<width in pixels>x<height in pixels>, so if we want to have a 250X100 chart, we put it like this: chs=250X100

Step 4: Put the parameters together

Append the parameters to the main URL: http://chart.apis.google.com/chart?

+ parameter from step 1 + “&” + parameter from step 2 + “&” parameter from step 3

Note that the order of parameters in web services is not important as long as you separate them with the ampersand character “&”. See example below:

http://chart.apis.google.com/chart?cht=p3&chd=t:40,30,20,10&chs=250×100&chl=BrandX|BrandY|BrandZ|BrandA

It is clear that users can easily create dynamic charts using Google Chart API. This is ideal for users who don’t want to buy complex charting solutions for their web projects.