25.3 Bar Graphs

Bar graphs are a good way to compare values to each other. Creating them is a relatively simple task because each data point is a rectangle. The height of the rectangle represents the value of the data point. To make the transition, a scaling factor is used. In Listing 25.3 the graph is 200 pixels tall and the scaling factor is two. This means that a data point with the value 75 will be 150 pixels tall. The output is shown in Figure 25.3.

Listing 25.3 Creating a bar graph

<?php
    /*
    ** Bar graph
    */

    //fill in graph parameters
    $GraphWidth = 400;
    $GraphHeight = 200;
    $GraphScale = 2;
    $GraphFont = 5;
    $GraphData = array(
        "Beef"=>"99",
        "Pork"=>"75",
        "Chicken"=>"15",
        "Lamb"=>"66",
        "Fish"=>"22");

    //create image
    $image = imagecreate($GraphWidth, $GraphHeight);
    imageantialias($image, TRUE);

    //allocate colors
    $colorBody = imagecolorallocate($image, 0xFF, 0xFF, 0xFF);
    $colorGrid = imagecolorallocate($image, 0xCC, 0xCC, 0xCC);
    $colorBar = imagecolorallocate($image, 0xFF, 0xFF, 0x00);
    $colorText = imagecolorallocate($image, 0x00, 0x00, 0x00);

    //fill background
    imagefill($image, 0, 0, $colorBody);

    //draw vertical grid line
    $GridLabelWidth = imagefontwidth($GraphFont)*3 + 1;
    imageline($image,
        $GridLabelWidth, 0,
        $GridLabelWidth, $GraphHeight-1,
        $colorGrid);

    //draw horizontal grid lines
    $styleDashed = array_merge(array_fill(0, 4, $colorGrid),
        array_fill(0, 4, IMG_COLOR_TRANSPARENT));
    imagesetstyle($image, $styleDashed);
    for($index = 0;
        $index < $GraphHeight;
        $index += $GraphHeight/10)
    {
        imageline($image,
            0, $index,
            $GraphWidth-1, $index,
            IMG_COLOR_STYLED);

        //draw label
        imagestring($image,
            $GraphFont,
            0,
            $index,
            round(($GraphHeight - $index)/$GraphScale),
            $colorText);
    }

    //add bottom line
    imageline($image,
        0, $GraphHeight-1,
        $GraphWidth-1, $GraphHeight-1,
        $colorGrid);

    //draw each bar
    $BarWidth = (($GraphWidth-$GridLabelWidth)/count($GraphData))
        - 10;
    $column = 0;
    foreach($GraphData as $label=>$value)
    {
        //draw bar
        $BarTopX = $GridLabelWidth +
            (($column+1) * 10) + ($column * $BarWidth);
        $BarBottomX = $BarTopX + $BarWidth;
        $BarBottomY = $GraphHeight-1;
        $BarTopY = $BarBottomY - ($value * $GraphScale);

        imagefilledrectangle($image,
            $BarTopX, $BarTopY,
            $BarBottomX, $BarBottomY,
            $colorBar);

        //draw label
        $LabelX = $BarTopX +
            (($BarBottomX - $BarTopX)/2) -
            (imagefontheight($GraphFont)/2);
        $LabelY = $BarBottomY-10;

        imagestringup($image,
            $GraphFont,
            $LabelX,
            $LabelY,
            "$label: $value",
            $colorText);

        $column++;
    }

    //output image
    header("Content-type: image/png");
    imagepng($image);
?>

The business of creating the graph is similar to the process described earlier in which a button is created. A blank image is created, several colors are allocated, and functions are called for drawing shapes into the image. The script allows the width of the bars to adapt to the width of the graph. The width of the graph is divided by the number of bars drawn. A 10-pixel gutter is drawn between the bars. In the center of the bar the data point's label is written along with its value.