Google Charts Example

Twitter Facebook Pinterest Google+ Stumbleupon LinkedIn


API’s are becoming more popular on the web as many of the big online companies such as Google, Yahoo and Facebook offer there own open source code for web developers to use freely and easily.

Google Charts Basics

To begin with I am going to go through how to use the Charts Basics API from Google. This is an extremely easy one to start off with as you don’t require an API key or to install anything, you don’t even need a dynamic server side script to get some nice results.

For this example I am going to jazz it up with a bit of PHP using an associative array but you can easily replace this with a database or XML feed.

To call a chart we use the query string linking to the API which will end up looking something like this.

<img src="http://chart.apis.google.com/chart?chs=250x100&amp;chd=t:10,80,35,10&amp;cht=lc&amp;chl=wk1|wk2|wk3|wk4"
alt="Sample chart" />

To generate this dynamicaly I used the following code

$arr = array();

$arr['Jan']['wk1'] = 10;
$arr['Jan']['wk2'] = 80;
$arr['Jan']['wk3'] = 35;
$arr['Jan']['wk4'] = 10;

$chart= 'http://chart.apis.google.com/chart?';
$chartsize = 'chs=250x100';
$type = "cht=lc";
$vals = 'chd=t:';
$keys = 'chl=';
$alt = "January";

foreach( $arr['Jan'] as $key => $value){
	$vals .= $value.',';
	$keys .= $key.'|';
	}

And Lastly to pull all the code together.

<img src="<? echo $chart;?>
<? echo $chartsize;?>
&amp;<? echo substr("$vals", 0, -1);?>
&amp;<? echo $type;?>
&amp;<? echo substr("$keys", 0, -1);?>"
alt="Sample chart" />

To develop this example further use the official documentation available here Google Chart Basic


Posted by Adi on March 7, 2009

Twitter Facebook Pinterest Google+ Stumbleupon LinkedIn

One response to “Google Charts Example”

  1. […] API's — Tags: PHP, simpleXML, twitter — Adi @ 2:45 pm April 29, 2009 Just like the Google Charts API the Twitter API can be super simple. Twitter uses a few different XML feeds to send and receive […]

Leave a Reply

Your email address will not be published. Required fields are marked *