When an IT manager requests reports, you can practically
guarantee that they’ll expect to see graphical representations of figures
within those reports. You could either buy a third-party reporting tool to
create this graphical data, or you could use the GD image functionality within
PHP. Since PHP is free and you can add the bundled GD library at no cost,
it makes sense to use this as a cost-effective method for providing graphical
data representations. I’ll show you how to create a dynamic bar chart using PHP
that you can display within a Web page.

Image coordinates for the bar chart

A bar chart is simply a series of rectangles that represent
the unit or percentage amount of a maximum value, starting from a logical 0
point and proceeding to the specified amount of the maximum value with a
constant bar width. In image coordinate terms, this means that the rectangle
starts at an (x1, y1) coordinate extending to a (x2, y2) coordinate, where x1
equals the starting horizontal position, y1 equals the starting vertical
position, x2 equals the ending horizontal position, and y2 equals the ending
vertical position. All of this information is created from a series of unit or
percentage amounts converted to unit amounts.

Setting up the parameters

In my example, I want to feed one or more data amounts to my
PHP script and create a series of rectangles that create a chart image. Since
this will be dynamic data, the charting functionality must be able to receive data
points through the query string on the image source:

<img src="chart_image.php?pt1=25&pt2=58&…">

The PHP script will take this information, generate the
chart image, and return the constructed image with the bars mapped out.

I also want to add margins all around the chart image, which
allows image data to be added to the chart as text and lets me put tick marks
on the axes.

First, I’ll set up some local variables to hold constant
information:

$bar_w = 100;

$max_y = 300;

$margin_top = 20;

$margin_bottom = 20;

$margin_left = 20;

$margin_right = 20;
$y_div = 10;

$rects = array();

Here are descriptions for each of the variables:

  • $bar_w
    is the bar width for each bar on the chart.
  • $max_y
    is the maximum Y value on the chart.
  • The
    $margin_x variables are self-explanatory.
  • $y_div
    is the division of ticks on the Y-axis.
  • $rects
    will be the array of rectangle points.

Now it’s time to calculate the individual rectangles that
represent the data. I’ll iterate through the list of ptN items sent as GET information (the query string) to build my
rectangle points. See
Listing A.

This code will push rectangle coordinates on the $rects
array as an array of points: [x1, y1, x2, y2]. Since the logical origin of the
coordinate data is the lower, left-hand position of the graph and the origin of
the image is the top, left-hand position of the image, we have to convert the
data to the image coordinates. To do that, simply find the Y-axis—$margin_top +
$max_y—and subtract the data amount—$_GET[$pt]—where $pt equals “pt”
plus the iteration. Here are several data points to keep in mind:

  • The
    y2 value will always be the Y-axis.
  • The
    X coordinate data is calculated by taking the last x2 value as x1 and
    adding the width to get the x2 coordinate of the new rectangle.
  • The
    total image width is the last x2 value plus the right margin, and the
    total image width is the Y-axis plus the bottom margin.

Once you have this data, you can create the image. See
Listing B. The image is created using the height and width
calculations. A couple of color values (black and white) are allocated for the
image. And, the image is filled for a white background. Now I add the rectangular data in
Listing C.

The $rects array is stepped through to create each
rectangle. A random color is selected by pulling random red, green, and blue
values. Each rectangle is added using the points in the current element of the
$rects array. I add a tick mark at the bottom, right-hand portion of the
rectangle on the Y-axis. Then, I add the data name, ptN, underneath the Y-axis. The name is centered under the rectangle
by using the imagettfbbox function to
calculate the width of the bounding area of the text. This width is halved and
subtracted from the halfpoint value of the rectangle to get the X coordinate of
the text.

Finally, the axes are added, the vertical tick marks are
added, the image is returned in PNG format, and the image is removed from memory. See
Listing D.

See this example in action

To see a working example of this code, visit http://www.phillipweb.com/gdimage/chart.html. Unfortunately,
the imagettfbbox and imagettftext functions were not supported on this server.
However, I was successful in testing this functionality on my local Windows
2000 server with PHP v4.3 and GD bundled v2.0.28 compatible. You can find the
source for this example at http://www.phillipweb.com/gdimage/chart_image.txt.

Keep your developer skills sharp by automatically signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.