What do you do when you want to show the reports of some particular analysis in your website? Some of the answers to this question would probably be:

  • Use a server side framework to code in the chart
  • Use a database to collect the report data and then code for the framework integration
  • Insert chart image after generating a chart in a software
  • Use some heavy JavaScript libraries which add to the loading time of the page

Google Graph API

But if you had only a few outcomes and wished to show a simple chart in your web page to the readers of your website or blog then probably you would be fixed in a situation like this. The main reasons being:

  • Use of an HTML only website or blog which does not allow server side scripting
  • Lack of knowledge of using a chart framework even if you had server side scripting
  • Burden of the process in creating a simple chart.
  • Wastage of your precious time.

But with the power of Google Chart API in your hands all you need to know is to insert an image in your web page and watch your chart come to life. But if you are thinking that what could be the use of using a static image for showing a chart then you are wrong. The Google Chart API is so simple yet so powerful that can give you some amazing features:

  • Create charts simply by using URL with some parameters
  • Inserting the chart is as simple as you would be inserting an image
  • The chart is created on the fly dynamically
  • No need of server side coding
  • No need of JavaScript to code or view your chart
  • Any resolution of the chart with only a change in URL parameters
  • Manipulating the parameters of the URL would change the chart
  • A variety of styles to choose as per your tastes.

Doesn’t this sound pretty much magical. If the above features excite you then probably the process of showing you how to create a simple chart right in this article itself will be enchanting. So lets proceed ahead.

Creating a chart with the Google Chart API

Lets take a simple case study for our chart. Suppose you are writing an article on the trends in the usage of browser’s and instead of showing the data in tabular format you could show present the data with some visual cues. Charts are the perfect way to do it. You must have already been at a site which shows amazing chart representations for some reports. Google however does not have anything sleek yet in their chart varieties but hey they surely have simple and sweet ones.

I am taking the browser usage trends of my blog readers. According to the statistics the trends show that 60% of my blog readers use Firefox, 25% use MSIE, 10% Safari and 5% the rest.

So if I have to represent this data in the form of a chart then first of all I simply need to choose the chart type according to my liking from the various Google Chart Types. From all, I will choose the 3D pie chart. So for drawing the chart we will have to build a URL with in this fashion:

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

Select the particular chart name, In my case it is p3. So the first parameter of the URL will be:

cht=p3

Now for the data, I will use the Simple Encoding technique which is indeed, simple. According to the technique my data representation would be done as follows:

chd=s:8ZKF (Four characters for the value indicate the four divisons in the chart)

We have to specify the resolution for the chart. According to my blog layout I would choose a height of 200px and the width of 400px. So the parameter would be,

chs=400x200

Titles have to be given to the data representation. So, for each of the four characters above in the data we would have to give its equivalent number of pipe delimited titles as follows,

chl=FireFox|MSIE|Safari|Others

Finally we come to the coloring part. You can specify any color you require. The API automatically shades the other chart divisions if the appropriate number of colors are not provided. I want my chart to have shades of 2 colors, blue and green so I would give the last parameter as follows:

chco=1B75DF,92BF23 (Colors have to be in hexadecimal format)

Our chart is complete! Don’t believe it?. You just have to combine the URL with the parameters and put in your browser’s address bar or click here. Google will do the rest of the stuff for you.

http://chart.apis.google.com/chart?cht=p3&chd=s:8ZKF&chs=400×200
&chl=FireFox|MSIE|Safari|Others&chco=1B75DF,92BF23

Inserting the chart into your web site or blog

It is very simple to insert the chart into your blog or website. Since the resulting output of the URL is an image (.png) you just have to copy the entire URL and encapsulate it into an image tag as follows:

<img src=”http://chart.apis.google.com/chart?cht=p3&chd=s:8ZKF&chs=400×200
&chl=FireFox|MSIE|Safari|Others&chco=1B75DF,92BF23
” title=”Browser Stats” alt=”Browser Stats”/>

Browser Stats

You are seeing the live representation of the chart above. Isn’t this concept just fantastic? Now go ahead and start creating some visual presentations in your article and let me know about your creations. :)


Stumble Digg Technorati Subscribe Delicious