The AB Publish Blog AB Publish Website Creation RSS feed

Google does it again

I have just spent the evening helping one of AB Publish's clients.
The challenge was to present some data in a non-tabular format (let's face it - tables on websites can look boring)

We searched around on the internet and we discovered Google Image Charts (or Google Chart API).
Apparently it was released on December 6,2007, so I guess I am a little late in finding it ;)

The purpose of this free utility is to dynamically generate charts via an http request.
To put it simply, an address typed into your browser will generate an image of the data which you pass as parameters.

 

The classic "Hello World" example for a change ;)

Hello WorldEvery programming language guidebook always starts with the infamous "Hello World" algorithm. The aim is to display the words "Hello World" on the screen, printer, DVD or whatever output you are using.

Google Image Charts is no different and one way of visualising the power of what is offered is by the Hello World example (see the result on the right if you are unable to follow the link). I was amazed - the address I had typed into the browser displayed a perfect pie-chart!

The full address of the above "Hello World" example is:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

With only 4 parameters passed to an address somewhere at google.com, an image is shown.

 

Ok, but can I change things?

Hello WorldGoogle have made everything very easy with their Google Image Charts.
For example, more 'World' and less 'Hello'...change the chart data values (CHD) in the address. My new Hello World example is ready...

The percentages for the two segments 'Hello' and 'World' have been changed from 60:40 to 10:90, which is instantly reflected in the rendered chart.

The new full address is:
http://chart.apis.google.com/chart?cht=p3&chd=t:10,90&chs=250x100&chl=Hello|World

Hello WorldOk, but the 3D effect is a little old-hat and I want something clean and crisp...in that case change the chart type value (CHT) in the address from 'p3' to 'p' for a simple pie-chart.

The new Hello World example is ready to go...and the full value is:
http://chart.apis.google.com/chart?cht=p&chd=t:10,90&chs=250x100&chl=Hello|World

Sales by RegionOk, but this time I want to change the headings to something more meaningful for my Business Website and although I finally prefer the 3D effect I want something bigger, and the colours do not match my Business Internet Colours so they need to change, and I want a title...in that case, change the chart legends (CHL) to whatever the headings you wish to display; change the chart type (CHT) back to 'p3' for a 3D pie-chart, change the chart size (CHS) to whatever value you wish and add new parameters for the chart colours (CHCO) and the chart title (CHTT).

The final Sales by Region example is finished, and the full value is:
http://chart.apis.google.com/chart?cht=p3&chd=t:70,20,10&chs=350x200&chl=UK|Europe|America&chco=AB0000|0000FF|FFFF00&chtt=Sales+by+Region&chts=000000,16

 

I love it!

The actual start of all this activity this evening was to find a way to represent the daily ticket sales for a theatre piece.
I had to show 6 nights performances for which there were between 348 and 622 ticket sales to display.
Origianlly it was a table but this lacked sparkle...

The final results are displayed both as a bar graph and as a pie chart:

Ticket Sales Bar Chart

Ticket Sales Pie Chart

These can both be seen in the real life example of Red Devil Statistics where I saved the resulting images from Google, added a border and then uploaded the images using the easiest Internet Creation system around, the AB Publish Internet Site.

I am very happy with the results and plan to go into more detail about Google Image Charts in the future...

I also offer a big thank you to the owner of Red Devils who contacted us - at first I thought it was just some boring overtime...but in fact it turned out that I learnt something new...
If you have any questions or problems then please do not hesitate to get in touch - not only can we help you, but we help ourselves too ;)

Just in case you are interested, I will paste the 2 addresses to type into your borwser here to generate the above charts from GoogleImage Charts:

http://chart.apis.google.com/chart
   ?chf=bg,s,000000
   &chxl=1:|Mon+28%2F03%2F11+(352)|Tue+29%2F03%2F11+(370)|Wed+30%2F03%2F11+(348)|Thu+31%2F03%2F11+(480)|Fri+01%2F04%2F11+(493)|Sat+02%2F04%2F11+(622)
   &chxp=1,87,72,56,40,24,8
   &chxr=0,0,700|1,0,95
   &chxs=0,FFFFFF,11.5,0,l,676767|1,FFFFFF,11.5,0,l,676767
   &chxt=x,y
   &chbh=a,3,0
   &chs=600x250
   &cht=bhg
   &chco=AB1010|FFFF00,FFFF00,AB1010,FFFF00,AB1010,FFFF00
   &chds=0,700,0,700,0,700,0,700,0,700,0,700
   &chd=t:352|370|348|480|493|622
   &chdlp=b
   &chg=14,100,100,0
   &chma=150,50,20,40

AND

http://chart.apis.google.com/chart
   ?chf=bg,s,000000
   &chxs=0,FFFFFF,11.5
   &chxt=x
   &chs=600x250
   &cht=p3
   &chco=AB1010|FFFF00
   &chds=-5,622
   &chd=t:352,370,348,480,493,622
   &chdlp=b
   &chp=0.3
   &chl=Mon+28%2F03%2F11+(352)|Tue+29%2F03%2F11+(370)|Wed+30%2F03%2F11+(348)|Thu+31%2F03%2F11+(480)|Fri+01%2F04%2F11+(493)|Sat+02%2F04%2F11+(622)
   &chma=0,0,25,25|0,5

 

Although they look frightening, I will explain all the details in future posts...

Tue 24 May 2011 21:10:48

AB Publish - Create your own business website with 30 day FREE trial!
LiveZilla Live Help

Business Website Creator Mail - AB Publish

Contact Us

Business Website Creator Phone - AB Publish

0115 727 0567

Free Trial for Business Website - AB Publish