Thursday, April 11, 2013

Line graph using php



I this blog I am sharing a simple code to draw a line graph using php. Here I am using a value_array to hold my data for drawing the graph. If  we wants to draw the graph based on records  from database just replace the values of $value_array. Here I’m assumed that there is only 12 in that array.
$value_array=array();
$value_array[1] = 3500;
$value_array[2] = 2000;
$value_array[3] = 5000;
$value_array[4] = 500;
$value_array[5] = 2500;
$value_array[6] = 5;
$value_array[7] = 4250;
$value_array[8] = 1110;
$value_array[9] = 3720;
$value_array[10] = 1190;
$value_array[11] = 2670;
$value_array[12] = 440;
$array_count=count($value_array);
                $imagewd=600; //X value
                $imageht=550; //Y value
                $image=imagecreate($imagewd,$imageht);
                $colo=imagecolorallocate($image,55,55,55);
                $drcol=imagecolorallocate($image,00,00,00);
                $graph_col=imagecolorallocate($image,00,00,255);
                $text_color=imagecolorallocate($image,00,200,20);
                //-------------Horizontal Lines----------------------------------------------
                $cord1 = 50;
                while($cord1<=500){
                                imageline($image,0,$cord1,900,$cord1,$drcol);
                                $cord1 = $cord1+50;
                                }
//-------------End Horizontal Lines------------------------------------------
//-------------Vertical Lines------------------------------------------------
                $cord2 = 50;
                while($cord2<=600){
                                imageline($image,$cord2,0,$cord2,600,$drcol);
                                $cord2 = $cord2+50;
                                }
//-------------End Vertical Lines-------------------------------------------
$x1=0;
$y1=550;
$x2=0;
$y2=0;
imagesetthickness($image,3);//code changing thickness of graph
//Drawing Graph depending upon values---------------------
                for($i=1;$i<=$array_count;$i++){
                                $graph_value=$value_array[$i]*50/500;
                                $x2=$x1+50;
                                $y2=550-$graph_value;
                                imageline($image,$x1,$y1,$x2,$y2,$graph_col);
                                imagestring($image,4,$x2-10,$y2-13,$value_array[$i],$text_color); //Printing value's of each points
                                $x1=$x2;
                                $y1=$y2;
                }
                header("content-Type:image/jpeg");
                imagejpeg($image);
                imagedestroy($image);    
?>

I used following code to embed this graph to my html page.
                          
                                
                                                
                                                               
                                                                
                                                                                5000
                                                                                
                                                                
                                                                
                                                                                4500
                                                                                
                                                                
                                                                
                                                                                4000
                                                                                
                                                                
                                                                
                                                                                3500
                                                                                
                                                                
                                                                
                                                                                3000
                                                                                
                                                                
                                                                
                                                                                2500
                                                                                
                                                                
                                                                
                                                                                2000
                                                                                
                                                                
                                                                
                                                                                1500
                                                                                
                                                                
                                                                
                                                                                1000
                                                                                
                                                                
                                                                
                                                                                500
                                                                                
                                                                
                                                
                                
                                
                                                
                                
                
                
                                
                                
                                
                                                
                                                                
                                                                                
                                                                                
                                                                                
                                                                                jan
                                                                                
                                                               
                                                                                
                                                                                feb
                                                                                
                                                               
                                                                                
                                                                                mar
                                                                                
                                                               
                                                                                
                                                                                apr
                                                                                
                                                               
                                                                                
                                                                                may
                                                                                
                                                               
                                                                                
                                                                                jun
                                                                                
                                                               
                                                                                
                                                                                jul
                                                                                
                                                               
                                                                                
                                                                                aug
                                                                                
                                                               
                                                                                
                                                                                sep
                                                                                
                                                                                
                                                                                oct
                                                                                
                                                                                
                                                                                nov
                                                                                
                                                                                
                                                                                dec
                                                                                
                                                                
                                                
                                
                

How to Create a Graph using PHP


Here I am describing a simple method to create a dynamic bar graph using php. Here I am utilizing the php image functions based on GD image library.
We can us this code for representing your dates’ in graphical format. I am used a array ($values) for holding my data. We can take data in to this array either from the database or just give directly.
# ------This is my data to be displayed as graph
$values  =array();
$values[2010]=120;
$values[2011]=70;
$values[2012]=150;
$values[2013]=200;
$values[2014]=45;
$values[2015]=110;

$img_width=650;
$img_height=400;
$margins=20;
# ---- Find the size of graph by subtracting 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; //width of each bar
$total_bars=count($values); //total number of bars
$gap= ($graph_width- $total_bars * $bar_width ) / ($total_bars +1);  //gap between two bars
# -------  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);
$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);
                                $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);
?>   

I am showing 20 values in the y axis .we can change it with changing following codes
$ratio= $graph_height/$max_value;
$horizontal_lines=20;
$horizontal_gap=$graph_height/$horizontal_lines;

Here I wrote the entire code in graph.php file .if we ants to display it in any html file Just use the following code in the space where we actually wants to display the graph.


 
Powered by Blogger