Hack31.Create Graphs with PHP

Hack 31. Create Graphs with PHP

Use PHP's image toolkit to create dynamic graphs from your data.

PHP has excellent dynamic imaging capabilities. You can use these to overlay images [Hack #32], or to create whole new images on the fly. This hack uses the image toolkit to do some simple scientific graphing of sine waves (proving that PHP is great for math as well as for imaging).

4.6.1. The Code

Save the code in Example 4-7 as graph.php.

Example 4-7. Graphing a mathematical function

 <? $width = 400; $height = 300; $data = array(); for( $i = 0; $i < 500; $i++ ) { $data []= sin( deg2rad( ( $i / 500 ) * 360 ) ); } $xstart = $width/10; $ystart = $height - ($height/10); $image = imagecreate($width, $height); $back = imagecolorallocate($image, 255, 255, 255); $border = imagecolorallocate($image, 64, 64, 64); imageline( $image, $xstart, 0, $xstart, $ystart, $border ); imageline( $image, $xstart, $ystart, $width, $ystart, $border ); imagestring( $image, 2, $xstart-20, $ystart-10, "1", $border ); imagestring( $image, 2, $xstart-20, 0, "-1", $border ); imagestring( $image, 2, $xstart, $ystart+5, "0", $border ); imagestring( $image, 2, $width-20, $ystart+5, "360", $border ); $datatop = 1; $databottom = -1; $oldx = 0; $oldy = 0; $datacount = count( $data ); $xscale = ( $width - $xstart ) / $datacount; $yscale = $ystart / ( $datatop - $databottom ); $midline = $ystart / 2; for( $i = 0; $i < $datacount; $i++ ) { $x = $xstart + ( $i * $xscale ); $y = $midline - ( $data[$i] * $yscale ); if ( $i > 0 ) { imageline( $image, $oldx, $oldy, $x, $y, $border ); } $oldx = $x; $oldy = $y; } header("Content-type: image/png"); imagepng($image); imagedestroy($image); ?> 

The script starts with some constants that define the size of the output image. Then the new image is created, and colors are allocated. Next, the border of the graph is drawn, along with the axis values using imagestring(). With the axis values in place, the script draws the mathematical data using a for loop to iterate over each data point and uses the imageline() function to draw a line between the current position and the previous position.

Because this script is intended for use on the Web, the content type of the output needs to be set properly to image/png, which tells browsers to expect a PNG graphic. Many browsers will automatically detect image content, but it's best to set the content type properly. With that done, the image is output using the imagepng() function.

It's best to leave the content-type header for the end of the script; that way, if the script fails, you will see the error results in the browser. If you set the header too early, the browser will get the content type and attempt to interpret the PHP error message as a PNG image.

4.6.2. Running the Hack

Put the files up on the PHP server and navigate to the graph.php page. You should see something like Figure 4-9.

Figure 4-9. The resulting graph

If you don't see the graph in Figure 4-9, it's likely that there is a server configuration problem. PHP is very flexible about how it's installed, and the image library doesn't need to be installed for PHP (in general) to run properly; but without the graphing libraries (obviously), you won't get a graphical PNG (you should see an error message).

4.6.3. See Also

• "Create Beautiful Graphics with SVG" [Hack #28]

• "Build Dynamic HTML Graphs" [Hack #14]

• "Build Lightweight HTML Graphs" [Hack #8]