Create Dynamic Bar Graph In PHP

Sometimes, we want to see the data statistics from our database in the form of graph. There are lot of references about it in the internet. But, those references don't use the data from the database. We want seomthing dynamic, don't we? Because of that, please following the following tutorial.
1. Database
Create new database "graph" or any other names that you like.
2. Create New Table and Its Contents
Create new table "store" or any other names that you like. After that, please make sure that the table "store" has the following structure:
Table "store": 
CREATE TABLE store (
    id INT(11) NOT NULL AUTO_INCREMENT,
    name VARCHAR(500) NOT NULL,
    number INT(11) NOT NULL,
    PRIMARY KEY (id)
);

Once you've done creating table "store", it is time to enter data into table "store":
Insert data into table "store": 
INSERT INTO store (name,number) VALUES ("Jan",10);
INSERT INTO store (name,number) VALUES ("Feb",30);
INSERT INTO store (name,number) VALUES ("Mar",20);

3. PHP Files
You need to create 3 PHP Files:

Here's how it works. File "c.php" is the connection file which gives connection between the PHP and SQL database. File "graph.php" is the file where we'll generate graph. And file "index.php" adalah tambahan saja. File "index.php" calls the content from file "graph.php".
Ok. Let's start the tutorial...
c.php: 
<?php
$c=mysql_connect("localhost","dbuser","dbpwd");
mysql_select_db("graph", $c);
?>

graph.php: 
<?php

include "c.php";

$chart_query = mysql_query("SELECT id, name, number FROM store");
 
$values_graph=array();
 
while($row = mysql_fetch_array($chart_query))
{
  $key=$row['name'];
  $values_graph[$key] = (number_format($row['number'],1));
}
 
    $img_width=450;
    $img_height=300; 
    $margins=20;

 
    # ---- Find the size of graph by substracting the size of borders
    $graph_width=$img_width - $margins * 2;
    $graph_height=$img_height - $margins * 2; 
    $img=imagecreate($img_width,$img_height);

 
    $bar_width=20;
    $total_bars=count($values_graph);
    $gap= ($graph_width- $total_bars * $bar_width ) / ($total_bars +1);

 
    # -------  Define Colors ----------------
    $bar_color=imagecolorallocate($img,0,64,128);
    $background_color=imagecolorallocate($img,240,240,255);
    $border_color=imagecolorallocate($img,200,200,200);
    $line_color=imagecolorallocate($img,220,220,220);
 
    # ------ Create the border around the graph ------

    imagefilledrectangle($img,1,1,$img_width-2,$img_height-2,$border_color);
    imagefilledrectangle($img,$margins,$margins,$img_width-1-$margins,$img_height-1-$margins,$background_color);

 
    # ------- Max value is required to adjust the scale    -------
    $max_value=max($values_graph);
    $ratio= $graph_height/$max_value;

 
    # -------- Create scale and draw horizontal lines  --------
    $horizontal_lines=20;
    $horizontal_gap=$graph_height/$horizontal_lines;

    for($i=1;$i<=$horizontal_lines;$i++){
        $y=$img_height - $margins - $horizontal_gap * $i ;
        imageline($img,$margins,$y,$img_width-$margins,$y,$line_color);
        $v=intval($horizontal_gap * $i /$ratio);
        imagestring($img,0,5,$y-5,$v,$bar_color);

    }
 
 
    # ----------- Draw the bars here ------
    for($i=0;$i< $total_bars; $i++){ 
        # ------ Extract key and value pair from the current pointer position
        list($key,$value)=each($values_graph); 
        $x1= $margins + $gap + $i * ($gap+$bar_width) ;
        $x2= $x1 + $bar_width; 
        $y1=$margins +$graph_height- intval($value * $ratio) ;
        $y2=$img_height-$margins;
        imagestring($img,0,$x1+3,$y1-10,$value,$bar_color);
        imagestring($img,0,$x1+3,$img_height-15,$key,$bar_color);        
        imagefilledrectangle($img,$x1,$y1,$x2,$y2,$bar_color);
    }
    
    header("Content-type:image/png");
    imagepng($img);

?>

The content inside index.php is actually only HTML syntax.
index.php: 
<img src="graph.php?maybe=some?data=etc">
<br/>
OR This Way
<br/>
<img src="graph.php">

All set? You can access "graph.php" or "index.php" to see what you've done.
Good luck...
Your graph may look (more or less) like this:

Thanks to this reference: http://www.qualitycodes.com/tutorial.php?articleid=20&title=How-to-create-bar-graph-in-PHP-with-dynamic-scaling

Labels: , , , , , , , , ,