Using GD functions in PHP to create a bar chart

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:

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.