The Power Of Google Chart API

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. πŸ™‚

33 thoughts on “The Power Of Google Chart API

  1. I like how your first image of the pie chart can not be created with googles API, little on the misleading side.

  2. @exo – That is just a graphic related to the topic being discussed. But it is intentional message for Google that we require sleek & fancy looking charts and not plain boring ones. πŸ™‚

  3. I’ve created an independent, open source implementation of the Google Chart API, using a Java servlet backed by JFreeChart. Check out the Eastwood Chart Servlet at jfree.org. You have to run it on your own server, but you can tweak the code, add new chart types, etc. etc., and you won’t run into any per-day usage limits. I think it is a good alternative if you don’t want to (or can’t) be dependent on Google.

  4. Hi David,

    Thanks for visiting my blog. I have used JFreeChart in my earlier project and it has been very useful. Its nice that you have made an emulator like Google’s API. I’ll definitely have a look.

  5. Well, as far as I can tell, the Love-o-Graph uses ambient data available on the internet to compile compatibility profiles of each specific pairing of individuals via a highly complicated and proprietary algorithm, then encodes the results as a URL. Or, possibly, it just uses the letters in the names entered.

  6. 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.
    I read two times, printed out and hung it on the fridge. Now every morning I know what I should do πŸ™‚

  7. helo. I’am french so i don’t understand all the sentences but in french i can say “yep ! votre website est tres cool” πŸ˜‰ I hope that frensh people become like you !

  8. I think the chart API is great – but I think Google Maps API is great too! Here is my site that uses both! This is the correct url btw

  9. Does the Google Charts API support Pareto Charts?
    And what about a combination of Column and Line Charts? Is it supported?
    Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *