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