PHPBuilder - Bar Charts With GD Page 3

RSS Twitter

Bar Charts With GD - Page 3

by: Stefan Wiesendanger
December 17, 2000

How To Generate The Image

Now that I've kept you waiting for so long, on to create that image! The source code below shows the general stub for creating an image in PHP.
Let's define the image's $width and $height first, since you'll probably want to include those in the calling HTML IMG tag. Next, we allocate some memory for drawing the image using the imagecreate() function. Also, we need to allocate all the colors we are going to use. The first color to be allocated will be the background color of the image by default. The RGB color values can also be given in decimal numbers, instead of the hex I use below.
Before sending the image out, we must include an HTTP header telling the receiving browser how to interpret the binary data it gets thrown at. Finally, imagegif() outputs the image over the net and imagedestroy() frees up the internal memory we reserved in the beginning.


/* chart.php */ 

$width 480
$height 250
$image imagecreate($width$height); 

// colors 
$white imagecolorallocate($image0xFF0xFF0xFF); 
$navy imagecolorallocate($image0x000x000x80); 
$black imagecolorallocate($image0x000x000x00); 
$gray imagecolorallocate($image0xC00xC00xC0); 

// draw something here 

// flush image 
header("Content-type: image/gif"); // or "Content-type: image/png" 
imagegif($image); // or imagepng($image) 

If you want to use the PNG image format instead of GIF, simply change the Content-type to image/png and replace imagegif() by imagepng(). A final trick is to use the imagegif/imagepng($image, $path) functions with a second argument. This will save the image to the file in $path, instead of sending it to the browser. We'll use this later for caching the image.
Layout And Borders
As of now, the image is disappointingly empty. Let's assume you want to plot a time series with 12 values. For example, a fictional president's approval ratings throughout one year. A public relations disaster hits sometime in April and it took the spin doctors a full 6 months and everybody's Christmas mood to restablish some confidence in his leadership. This is what the data might look like:


= array( 
"Jan" => 55
"Feb" => 54
"Mar" => 53
"Apr" => 33
"May" => 13
"Jun" => 15
"Jul" => 23
"Aug" => 28
"Sep" => 32
"Oct" => 45
"Nov" => 73
"Dec" => 71); 

We can easily get the maximum value to plot - 73 - and the number of elements - 12 - from this array using max() and sizeof(). This will allow us to scale the chart to the size of the image. But first, we'll have to decide on the general layout.
We need a vertical margin to leave some space both for a title on top and for X axis labels on the bottom. A horizontal margin will make room on the left-hand side for the Y axis labels. This leaves an area of $xsize by $ysize pixels for the chart.
In the code sniplet below, we use imagerectangle() to draw a frame for the chart area. Note that X and Y coordinates are counted from the upper left corner which is (0, 0).


$nval sizeof($data); 

$vmargin 20// top (bottom) vertical margin for title (x-labels) 
$hmargin 38// left horizontal margin for y-labels 

$base floor(($width $hmargin) / $nval); // distance between columns 

$ysize $height $vmargin// y-size of plot 
$xsize $nval $base// x-size of plot 

// plot frame 
$hmargin $xsize$vmargin $ysize$black); 


« Previous Page
Next Page »

Comment and Contribute

Your comment has been submitted and is pending approval.

Stefan Wiesendanger



(Maximum characters: 1200). You have characters left.