Using the Google Chart API/Tools

Just when the world was raving madly about Internet and its power to influence, enters a very powerful player - Google. Is is only a search giant .. ? I won't answer, you see it everyday !

Developing a service and making its subsequent APIs (Application Programming Interface), developer tools and technical resources available to the masses to leverage the same has been the motto of all the players who've made it big on the Web. No doubts Google has had a good foresight and hence they have come with myriad of APIs' over http://code.google.com. A quick glance on the categories on the left over the above link will leave you in a spell ! Yes, the numbers and the topic of the APIs’ are just surprising !

Today I'll enlighten you about one of them - Google Chart API. It won’t be a comprehensive coverage on the subject like my blogs have been but a quick and a simple glance on what it has to offer. Enough for developers (even designers) to leverage them.


Google Chart API :

• What is it technically ?

>>> Its basically a web-service written by Google web-developers. All the pertaining info (type of chart, no. of sections, sections titles, etc) in the form of key-value pair is passed in the URL (that’s GET and even POST is possible) and the web-service hosted on Google servers parses the same and gives you the response in the MIME type - image/jpeg (i.e. your chart).

• Available types :

>>>  Image Charts :

-- 2D/3D charts with proportions, titles, etc but no events supported.
-- User only needs to ping with the URL to get the chart.
-- Very fast (much less than one second).

Check out some Examples Here.

>>> Interactive Charts :

-- Same as image charts with dynamic response based on mouse-hover/mouse-click/pre-defined events using Javascript.
-- User has to manage some code in Javascript.
-- Takes up to a few seconds (for complex charts).

Check out some Examples Here.

• A basic example :

Check the following Image Chart and its subsequent URL :

http://chart.apis.google.com/chart?
cht=p3&
chdl=January|February|March|April&
chs=350x100&
chl=January|February|March|April&
chd=t:20,20,20,40

Legend :

cht - Chart type (p - 2D, p3 - 3D)
chd - Chart data (proportion of each data sums into 100)
chl - Chart Labels (to be depicted on the chart)

chdl - Chart Design Legend (seen at the right depicting the labels)
chp - Angle in radians to be rotated (default starts from 3:00 PM. Possible values - 3.14,0.628 and so on)
chs - Chart Size (width x height in pixels)

Now for the above example we have used the GET method to get the Image chart but if the parameters passed are long and the URL length goes past 2000 characters than you can opt for the POST method.

I'm sure you loved this simple image chart. It's all very easy and there are many more in both types of charts. Check the links given above for more image and interactive charts and its documentation.

---

Some other Google API's to watch out :

• Google Authentication API over Here.

• Google Client Login API over Here. 

• Google Public DNS over Here.

Post a Comment