How to quickly install Google Chart Tools with PhP easily.

Hi Guys,

Its been a while as ive been hard at work 🙁

I thought id share a quick tip with everyone out there who doesn’t understand Google charts.

Well,
Put simply its an easy way to create bar charts, pie chart and any other kind of chart.
You can use the google javascript tools to make interactive charts or simply call a URL with some data in it to create a static chart.

I’m going to show you how to make a quick and simple chart with some basic data from a mysql database.

    Example

Google pie chart with php

    How did I do it?

Lets quick put some assumptions in place.
Lets say you had a database with a bunch of rows in it containing an ip address and the browser used like so:
192.168.0.1 Firefox
192.168.0.2 Internet Explorer
And so on.

To create the graph i did this.
Once you have your PHP mysql connection setup. You can count the rows that match to give
yourself some numbers to play with.

If you dont have a MYsql DB to play with.
Just create the vars manually like:
$ff = “100”;
$ie = “200”;
$gc = “300”;
$uk = “400”;
This will allow the image echo we will do shortly to read some data.

1
2
3
4
5
6
7
8
9
10
<?php
$result = mysql_query("SELECT browser FROM visitorips where browser = 'Mozilla firefox'");
$ff = mysql_num_rows($result); 
$result = mysql_query("SELECT browser FROM visitorips where browser = 'Internet explorer'");
$ie = mysql_num_rows($result); 
$result = mysql_query("SELECT browser FROM visitorips where browser = 'Safari'");
$gc = mysql_num_rows($result); 
$result = mysql_query("SELECT browser FROM visitorips where browser = 'Unknown'");
$uk = mysql_num_rows($result); 
?>

This filled some vars ( $ff, $ie, $gc, $uk ) with some values like 100, 200, 300, 400

Now we have some values, We are going to echo a google chart image with these values in place:

1
2
3
<?php
echo '<img alt="BrowserType" src="http://chart.apis.google.com/chart?cht=p3&chs=600x200&chd=t:'.$ff.','.$ie.','.$gc.','.$uk.'&chl=Firefox '.$ff.'|MS IE '.$ie.'|Safari/Chrome '.$gc.'|Unknown '.$uk.'&chxt=x,y&chco=0000FF&chtt=Visitor%20browser%20types" />';
?>

What we did here was call the google chart API, We sent it some data:
chd=t:’.$ff.’,’.$ie.’,’.$gc.’,’.$uk.’ ( ie: chd=t:10,20,30,40 )
We then created the labels in the same order with the values added after:
&chl=Firefox ‘.$ff.’|MS IE ‘.$ie.’|Safari/Chrome ‘.$gc.’|Unknown ‘.$uk.’

A working PHP example to make a chart will be:

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$ff = "100";
$fftitle = "Firefox";
$ie = "200";
$ietitle = "IE";
$gc = "300";
$gctitle = "Chrome";
$uk = "400";
$uktitle = "Unknown";
 
echo '<img alt="BrowserType" src="http://chart.apis.google.com/chart?cht=p3&chs=600x200&chd=t:'.$ff.','.$ie.','.$gc.','.$uk.'&chl='.$fftitle.' '.$ff.'|'.$ietitle.' '.$ie.'|'.$gctitle.' '.$gc.'|'.$uktitle.' '.$uk.'&chxt=x,y&chco=0000FF&chtt=Visitor%20browser%20types" />';
?>

Done.

I hope this helped, I havent got much time so sorry for those who dont understand 🙁 I will try to put up a longer tutorial at some point.

Good luck.

Comments are closed.