I ran across this great, easy but very useful API a few days ago. Now for the tutorial.. let's assume we make a website for the TalkPHP soccerteam. They've played 10 matches (6 won, 3 draw, 1 lost). We'll be making a nice three dimensional pie chart of those stats!
Let me point out one little disadvantage before we start: This API has a limit to 50,000 queries per 24 hours. But futhermore nothing fency!
Little introduction
The Google Chart API returns a PNG image in response to a URL. So you have to include an
<img /> into your page, and the API will return the chart. You are able to create several charts; line, bar, pie (the one we're going to create in this tutorial) and others.
URL Format
The URL must be in the following format:
http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>.
The parameters
The following parameters are required with every query:
- Chart size (
chs=<width in pixels>x<height in pixels>)
- Chart data (
chd=<encoding type>:<chart data string>)
- Chart type (
cht=<chart type>)
Other optional parameters we're going to use in this tutorial are:
- Chart title (
chtt=<chart title>)
- Pie chart labels (
chl=<label1|label2|label3>)
- Chart colors (
chco=<hexadecimal format>)
You can specify as many parameters as you like, in any order. Just make sure you separate all the parameters by an ampersand (&).
Inserting the parameters
Alright! Let's go and fill in some parameters.
The width and height
Let's give the image a width of 300 pixels, and a height of 200 pixels:
http://chart.apis.google.com/chart?chs=300x200
Set the chart type
We want it to be a three dimensional pie chart:
http://chart.apis.google.com/chart?chs=300x200&cht=p3
Add the labels
We have a total of three labels; won, draw and lost:
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Lost|Draw|Won
Add the data
TalkPHP's soccerteam has won 60% of their matches, 30% draw and 10% are lost. We can choose out of three encoding types to insert data.
- Simple encoding
- Text encoding
- Extended encoding
I prefer Text encoding because you can use percents as numbers. 0.0 stands for 0%, 1.0 for 1%, 30.0 for 30% and so on. -1 stands for a missing value. Separate all values by a comma (,).
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:6 0.0,30.0,10.0
Give it a title!
The title will be "Pie chart for TalkPHP's soccerteam <new line> By maZtah". Insert on the spaces a '+', and use a '|' for the <new line>:
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:6 0.0,30.0,10.0&chtt=Pie+chart+for+TalkPHP's+soccert eam|By+maZtah
Last but not least: change the color!
As we do not like the default orange color, we are going to change it in trendish pink!
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:6 0.0,30.0,10.0&chtt=Pie+chart+for+TalkPHP's+soccert eam|By+maZtah&chco=ff0099
The result
Let's see what it looks like, right now!
Beautiful, isn't it?
Alright! Let's get to our last point!
Including the image to our webpage.
This can be done easily by the following code:
HTML Code:
<img src="http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:60.0,30.0,10.0&chtt=Pie+chart+for+TalkPHP's+soccerteam|By+maZtah&chco=ff0099" width="300" height="200" alt="Pie chart for TalkPHP soccerteam<br />By maZtah" />
Extra: making it dynamic
You ofcourse are able to make a dynamic version of the above pie chart. This can be achieved as follows:
PHP Code:
<?php
$iWon = 6;
$iDraw = 3;
$iLost = 1;
?>
<img src="http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:<?php echo $iWon; ?>.0,<?php echo $iDraw; ?>.0,<?php echo $iLost; ?>.0&chtt=Pie+chart+for+TalkPHP's+soccerteam|By+maZtah&chco=ff0099" width="300" height="200" alt="Pie chart for TalkPHP soccerteam<br />By maZtah" />
Ofcourse you could write a more advanced function to draw such a chart, but that's beyond the goal of this tutorial.
Reference:
http://code.google.com/apis/chart/.
Good luck everybody!
Join the friendly bunch on IRC...
Creating a three dimensional pie chart using Google's Chart API
Linear Mode
