407 Drawing Figures and Graphing Data exit; } }; // get current results of poll, regardless of whether they voted $query = 'select * from poll_results'; if(!($result = @mysql_query($query, $db_conn))) { echo 'Could not connect to db<br />'; exit; } $num_candidates = mysql_num_rows($result); // calculate total number of votes so far $total_votes=0; while ($row = mysql_fetch_object ($result)) { $total_votes += $row->num_votes; } mysql_data_seek($result, 0); // reset result pointer Part 1, shown in Listing 19.5.1, connects to the MySQL database, updates the votes according to what the user typed, and gets the new votes.After we have that informa- tion, we can begin making calculations in order to draw the graph. Part 2 is shown in Listing 19.5.2. Listing 19.5.2 showpoll.php—Part 2 Sets Up All the Variables for Drawing /******************************************* Initial calculations for graph *******************************************/ // set up constants putenv('GDFONTPATH=C:\WINNT\Fonts'); $width=500; // width of image in pixels - this will fit in 640x480 $left_margin = 50; // space to leave on left of image $right_margin= 50; // ditto right $bar_height = 40; $bar_spacing = $bar_height/2; $font = 'arial'; $title_size= 16; // point $main_size= 12; // point $small_size= 12; // point $text_indent = 10; // position for text labels on left // set up initial point to draw from $x = $left_margin + 60; // place to draw baseline of the graph Listing 19.5.1 Continued 24 525x ch19 1/24/03 2:57 PM Page 407 408 Chapter 19 Generating Images $y = 50; // ditto $bar_unit = ($width-($x+$right_margin)) / 100; // one "point" on the graph // calculate height of graph - bars plus gaps plus some margin $height = $num_candidates * ($bar_height + $bar_spacing) + 50; Part 2 sets up some variables that we will use to actually draw the graph. Working out the values for these sorts of variables can be tedious, but a bit of fore- thought about what you want the finished image to look like will make the drawing process much easier.The values we use here were arrived at by sketching the desired effect on a piece of paper and estimating the required proportions. The $width variable is the total width of the canvas we will use.We also set up the left and right margins (with $left_margin and $right_margin,respectively); the “fat- ness” and spacing between the bars ($bar_height and $bar_spacing); and the font, font sizes, and label position ($font, $title_size, $main_size, $small_size, and $text_indent). Given these base values, we can then make a few calculations.We want to draw a baseline that all the bars stretch out from.We can work out the position for this baseline by using the left margin plus an allowance for the text labels for the X coordinate, and again an estimate from our sketch for the Y coordinate. We also work out two important values: first, the distance on the graph that repre- sents one unit: $bar_unit = ($width-($x+$right_margin)) / 100; // one "point" on the graph This is the maximum length of the bars—from the baseline to the right margin—divid- ed by 100 because our graph is going to show percentage values. The second value is the total height that we need for the canvas: $height = $num_candidates * ($bar_height + $bar_spacing) + 50; This is basically the height per bar times the number of bars, plus an extra amount for the title. Part 3 is shown in Listing 19.5.3. Listing 19.5.3 showpoll.php—Part 3 Sets Up the Graph, Ready for the Data to Be Added /******************************************* Set up base image *******************************************/ // create a blank canvas $im = imagecreate($width,$height); // Allocate colors $white=ImageColorAllocate($im,255,255,255); $blue=ImageColorAllocate($im,0,64,128); Listing 19.5.2 Continued 24 525x ch19 1/24/03 2:57 PM Page 408 409 Drawing Figures and Graphing Data $black=ImageColorAllocate($im,0,0,0); $pink = ImageColorAllocate($im,255,78,243); $text_color = $black; $percent_color = $black; $bg_color = $white; $line_color = $black; $bar_color = $blue; $number_color = $pink; // Create "canvas" to draw on ImageFilledRectangle($im,0,0,$width,$height,$bg_color); // Draw outline around canvas ImageRectangle($im,0,0,$width-1,$height-1,$line_color); // Add title $title = 'Poll Results'; $title_dimensions = ImageTTFBBox($title_size, 0, $font, $title); $title_length = $title_dimensions[2] - $title_dimensions[0]; $title_height = abs($title_dimensions[7] - $title_dimensions[1]); $title_above_line = abs($title_dimensions[7]); $title_x = ($width-$title_length)/2; // center it in x $title_y = ($y - $title_height)/2 + $title_above_line; // center in y gap ImageTTFText($im, $title_size, 0, $title_x, $title_y, $text_color, $font, $title); // Draw a base line from a little above first bar location // to a little below last ImageLine($im, $x, $y-5, $x, $height-15, $line_color); In Part 3, we set up the basic image, allocate the colors, and then begin to draw the graph. We fill in the background for the graph this time using ImageFilledRectangle($im,0,0,$width,$height,$bg_color); The ImageFilledRectangle() function, as you might imagine, draws a filled-in rectan- gle.The first parameter is, as usual, the image identifier.Then we must pass it the X and Y coordinates of the start point and the end point of the rectangle.These correspond to the upper-left corner and the lower-right corner, respectively. In this case, we are filling the entire canvas with the background color, which is the last parameter, and it’s white. We then call ImageRectangle($im,0,0,$width-1,$height-1,$line_color); Listing 19.5.3 Continued 24 525x ch19 1/24/03 2:57 PM Page 409 410 Chapter 19 Generating Images to draw a black outline around the edge of the canvas.This function draws an outlined rectangle instead of a filled one.The parameters are the same. Notice that we have drawn the rectangle to $width-1 and $height-1—a canvas of width by height goes from (0, 0) to these values. If we drew it to $width and $height, the rectangle would be out- side the canvas area. We use the same logic and functions as we did in our last script to center and write the title on the graph. Finally, we draw the baseline for the bars with ImageLine($im, $x, $y-5, $x, $height-15, $line_color); The ImageLine() function draws a line on the image we specify ($im) from one set of coordinates ($x, $y-5) to another ($x, $height-15), in the color specified by $line_color. In this case, we draw the baseline from a little above where we want to draw the first bar, to a little above the bottom of the canvas. We are now ready to fill in the data on the graph. Part 4 is shown in Listing 19.5.4. Listing 19.5.4 showpoll.php—Part 4 Draws the Actual Data onto the Graph and Finishes Up /******************************************* Draw data into graph *******************************************/ // Get each line of db data and draw corresponding bars while ($row = mysql_fetch_object ($result)) { if ($total_votes > 0) $percent = intval(round(($row->num_votes/$total_votes)*100)); else $percent = 0; // display percent for this value ImageTTFText($im, $main_size, 0, $width-30, $y+($bar_height/2), $percent_color, $font, $percent.'%'); if ($total_votes > 0) $right_value = intval(round(($row->num_votes/$total_votes)*100)); else $right_value = 0; // length of bar for this value $bar_length = $x + ($right_value * $bar_unit); // draw bar for this value ImageFilledRectangle($im, $x, $y-2, $bar_length, $y+$bar_height, $bar_color); 24 525x ch19 1/24/03 2:57 PM Page 410 411 Drawing Figures and Graphing Data // draw title for this value ImageTTFText($im, $main_size, 0, $text_indent, $y+($bar_height/2), $text_color, $font, $row->candidate); // draw outline showing 100% ImageRectangle($im, $bar_length+1, $y-2, ($x+(100*$bar_unit)), $y+$bar_height, $line_color); // display numbers ImageTTFText($im, $small_size, 0, $x+(100*$bar_unit)-50, $y+($bar_height/2), $number_color, $font, $row->num_votes.'/'.$total_votes); // move down to next bar $y=$y+($bar_height+$bar_spacing); } /******************************************* Display image *******************************************/ Header('Content-type: image/png'); ImagePng($im); /******************************************* Clean up *******************************************/ ImageDestroy($im); ?> Part 4 goes through the candidates from the database one by one, works out the percent- age of votes, and draws the bars and labels for each candidate. Again we add labels using ImageTTFText().We draw the bars as filled rectangles using ImageFilledRectangle(): ImageFilledRectangle($im, $x, $y-2, $bar_length, $y+$bar_height, $bar_color); We add outlines for the 100% mark using ImageRectangle(): ImageRectangle($im, $bar_length+1, $y-2, ($x+(100*$bar_unit)), $y+$bar_height, $line_color); After we have drawn all the bars, we again output the image using ImagePNG() and clean up after ourselves using ImageDestroy(). This is a long-ish script, but can be easily adapted to suit your needs, or to auto-gen- erate polls via an interface. One important feature that this script is missing is any sort of anti-cheating mechanism. Users would quickly discover that they can vote repeatedly and make the result meaningless. Listing 19.5.4 Continued 24 525x ch19 1/24/03 2:57 PM Page 411 . $right_margin,respectively); the “fat- ness” and spacing between the bars ($bar_height and $bar_spacing); and the font, font sizes, and label position ($font, $title_size, $main_size, $small_size, and $text_indent). Given. $width-1 and $height-1—a canvas of width by height goes from (0, 0) to these values. If we drew it to $width and $height, the rectangle would be out- side the canvas area. We use the same logic and. />'; exit; } $num_candidates = mysql_ num_rows($result); // calculate total number of votes so far $total_votes=0; while ($row = mysql_ fetch_object ($result)) { $total_votes += $row->num_votes; } mysql_ data_seek($result,