Creating a three dimensional pie chart using Google's Chart API
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!
The Google Chart API returns a PNG image in response to a URL. So you have to include an
The URL must be in the following format:
The following parameters are required with every query:
Other optional parameters we're going to use in this tutorial are:
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:
Set the chart type
We want it to be a three dimensional pie chart:
Add the labels
We have a total of three labels; won, draw and lost:
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.
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>:
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!
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:
You ofcourse are able to make a dynamic version of the above pie chart. This can be achieved as follows:
Good luck everybody!
Nice tutorial MaZtah, you did a good job of explaining all the basics.
Good job and thank you. :-)
Very nice explanation. :-)
I have not used the Google Chart API yet, but after reading your tutorial, I will defiantly take a look!
The 50,000 requsts/24 hrs does concern me though ...
In the past I have used the FREE (Community Edition) PHP/SWF Charts at http://www.maani.us ... check out the gallery.
By clicking on any chart, the PHP code generating it is relieved ... nice documentation, built in animations, 100% customizable!
|All times are GMT. The time now is 07:56 AM.|
Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0