Back to DFS's Workshop Page
Back to Agenda Page

Graphics on the Fly

Creating dynamic web pages is one of PHP's significant characteristics. Processing information from forms, files and data bases and then selectively displaying results means that the visitor does not get shown the same thing every time. Here we will look at how to generate graphics on the fly.

Using PHP (see the complete list of the graphics functions on the web site), there are essentially three ways to display generated graphics:

Create a page which displays only the generated graphic, e.g. a PNG or JPEG
Create a graphic, save it to disk, and then display it by specifying the just created graphics file as the SRC (source) attribute value in an IMG (image) tag
Use a PHP script as the SRC attribute value in an IMG tag

Each technique has its own problems/shortcomings.

The first, while simple, means that you will have no text, not even a caption, on the page with the picture. This technique is used almost exclusively when you are displaying a full-size graphic after the user clicks on a thumbnail version.

The second allows you to have all of your script in a single file. The problem is that you now need to manage many versions of a graphic that are created and stored on the server's hard drive.

The last technique results in the nesting of script files, i.e., the main script will call another script which generates the graphic to be displayed in page being generated by the calling script.

It is the third technique which will be presented here.

Creating a Graph

The code used to produce the page to the right will be discussed. Three files were used to produce it: (1) The main .php file to generate the full page; (2) the .php file used to create the picture; and (3) the .inc file which draws the axes, etc. on the graph. The first calls the second, which calls the third.

The Driver Script:
```
<?php
// graphtest.php
echo "<html><head><title>Graph Test</title></head>\n<body>\n";
echo "This is my graph.\n";
echo "<img src=drawgraph.php?xsize=250&ysize=250&units=10 ";
echo "alt=\"This is a graph\" border=4>\n";
echo "This is after my graph.\n";
echo "</body></html>\n";
?>
```
This script could have been named with .html, but I wanted you to realize that it could just as easily have been generated itself. While the code is not at all complex, this would allow for the external specification of the size of the graph in pixels and the modulus for the placement of the ticks on the axes.

The Graphics Generator Script

This script is broken up into logical pieces for the purposes of discussion.

<?php
// drawgraph.php

This call to the Header function notifies the browser that what is to follow is graphics information. This is why this script can be called as the source inside the image tag used above in the graphtest.php script. The next line includes the file where the drawaxes() function is defined.

Header("Content-type: image/png");
include('graphing.inc');

The following lines provide default values for the size of the graphic and placement of the ticks.

if(empty($xsize))
  $xsize = 200;
if(empty($ysize))
  $ysize = 200;
if(empty($units))
  $units = 20;

These lines establish the size of the drawing space (providing the graphics handle $im) and select the colors which are to be used.

$im = imagecreate ($xsize, $ysize);
$bgcolor = ImageColorAllocate ($im, 0xBF, 0xBF, 0xBF);
$axescolor = ImageColorAllocate ($im, 0x00, 0x00, 0x00);
$textcolor1 = ImageColorAllocate ($im, 0xff, 0x00, 0x00);
$textcolor2 = ImageColorAllocate ($im, 0xd0, 0x00, 0x00);

The function drawaxes(), which is defined in the graphing.inc, is called.

drawaxes($im, $units, $bgcolor, $axescolor);

The next two lines use the ImageTTFText() function to create shadow text. You will need to determine which fonts are on the server you are using and where they are stored.

// Sample TrueType Fonts
ImageTTFText ($im, 15, 0, 30, 40, $textcolor2, "/usr/X11R6/lib/X11/fonts/truetype/SUSESerif-Roman.ttf", "Sample TrueType");
ImageTTFText ($im, 15, 0, 31, 39, $textcolor1, "/usr/X11R6/lib/X11/fonts/truetype/SUSESerif-Roman.ttf", "Sample TrueType");

This block of code illustrates a method of spacing lines of graphic text, printed using the five built-in fonts.

// Sample Built-in Fonts
$fontnum = 0;
$x = 30;
$y = (imagesy($im) / 2) + (2 * imagefontheight($fontnum));
imagestring($im, $fontnum, $x, $y, "Built-in font", $textcolor1);
$fontnum++;
$y = $y + (1.5 * imagefontheight($fontnum));
imagestring($im, $fontnum, $x, $y, "Built-in font", $textcolor1);
$fontnum++;
$y = $y + (1.5 * imagefontheight($fontnum));
imagestring($im, $fontnum, $x, $y, "Built-in font", $textcolor1);
$fontnum++;
$y = $y + (1.5 * imagefontheight($fontnum));
imagestring($im, $fontnum, $x, $y, "Built-in font", $textcolor1);
$fontnum++;
$y = $y + (1.5 * imagefontheight($fontnum));
imagestring($im, $fontnum, $x, $y, "Built-in font", $textcolor1);

These last two lines send the graphics data to the browser and then free the memory associated with the image.

Imagepng ($im);
ImageDestroy ($im);
?>

A Graphics Script Include File

This script is broken up into logical pieces for the purposes of discussion. The structure of the function should need no explanation.

<?php
// graphing.inc
function drawaxes($im, $units, $bgcolor, $axescolor){
   $sx = imagesx($im);
   $sy = imagesy($im);
   // CALCULATE POSITION OF ORIGIN
   $ox = $sx / 2;
   $oy = $sy / 2;
   // DRAW AXES
   imageline($im, 0, $sy / 2, $sx, $sy / 2, $axescolor);
   imageline($im, $sx / 2, 0, $sx / 2, $sy, $axescolor);
   // DRAW ORIGIN
   imagearc($im, $ox, $oy, 10, 10, 0, 360, $axescolor);
   // PUT TICKS ON AXES
   for( $x = $ox; $x < $sx; $x += $units)
     imageline($im, $x, $oy - 2, $x, $oy + 2, $axescolor);
   for( $x = $ox; $x > 0; $x -= $units)
     imageline($im, $x, $oy - 2, $x, $oy + 2, $axescolor);
   for( $y = $oy; $y < $sy; $y += $units)
     imageline($im, $ox - 2, $y, $ox + 2, $y, $axescolor);
   for( $y = $oy; $y > 0; $y -= $units)
     imageline($im, $ox - 2, $y, $ox + 2, $y, $axescolor);
   // LABEL AXES
   imagechar($im, 2, $sx - imagefontwidth(2) - 2,
      $oy - imagefontheight(2), "x", $axescolor);
   imagechar($im, 2, $ox - imagefontwidth(2) - 2,
      imagefontheight(2) / 2, "y", $axescolor);
}
?>

Notes

It is extremely important that you avoid generating any text in the scripts which produce graphics to be called from an image tag. As a test, put a blank line at the end of graphing.inc. The text inside the border is from the image tag in graphtest.php
There is no imagecircle() function. Instead, imagearc() is used to draw the circle for the origin, but you can just as well use imageellipse().