Graphs, charts using Google API with example

Google Charts

Google Charts API basically allows you to create pretty graphs simply by using an URL with correct parameters specified. It is fairly flexible, with many things you can change and customise - which is where it becomes bit complicated. It is quite easy to generate a chart, but it wasn't as easy to generate the exact chart we needed...

So, here below is example
chart with explanation that will hopefully help you understand Google Charts in better way.

Pie Chart..

 

http://chart.apis.google.com/chart?cht=p3&chs=410x180&chd=t:63,17,7,6,1&chco=50b65c,232279,FG00a0&chl=Cookies|Puff+Pastry|Muffins|Gelato|Chocolate

There are 3 parameters that ALL charts MUST have, and they are cht, chs, chd.

Chart Type (cht): Specifies the type of graph you have (pie, vertical bar etc)

Chart Size (chs): Specifies the pixel dimensions of your graph (width*height)

Chart Data (chd): The data that you want to display in your chart

Explanation...

1. Chart Type (cht): is quite straight forward - select the chart type you want, and put in the corresponding code which can be found from Google's Developer's Guide.

2. Chart Size (chs): You can specify the size of your graph in pixels: chs=width x height.

3. Chart Data (chd): is probably the most complicated as each chart has a slightly different syntax for data. For pie charts you need to make sure that the sum of your data points is 100 - ie. calculate the percentages and use the percentages as your data points.

Now, move to optional parameters, that allow you to customise the look of your chart and make the look pretty..

Chart Colour (chco): uses the Hex representation (RRGGBB) to specify the colour of your chart. For pie charts you can just put in one colour and all the segments will be shades of that colour. Or you can put in more and the segments will be a gradient from the first colour listed to the last colour listed.

Chart Labels (chl): specifies the labels for your data. It is optional, but you probably want to include them, so your chart will makes sense! With pie chart, it makes sense that the number of segments you have is the number of labels. So if you had 6 bits of data, you'll have 6 labels. However, unlike chd where values are comma separated, pie chart labels are separated by a vertical bar '|'.

Hope this helps...
In next post, we'll see how to create the Horizontal Bar Chart, Vertical Bar Chart, etc...