Getting Fancy with Pie Charts

The previous examples were a little boring, but they introduced you to the process of creating imagesdefine the canvas, define the colors, and then draw and fill. You can use this same sequence of events to expand your scripts to create charts and graphs, using either static or dynamic data for the data points. Listing 14.3 draws a basic pie chart. Lines 1 through 10 will look exactly the same as the previous listings, because they just set up the canvas size and colors to be used.

Listing 14.3. A Basic Pie Chart

 1:  <?php 2:  //create the canvas 3:  $myImage = ImageCreate(300,300); 4: 5:  //set up some colors 6:  $white = ImageColorAllocate($myImage, 255, 255, 255); 7:  $red  = ImageColorAllocate($myImage, 255, 0, 0); 8:  $green = ImageColorAllocate($myImage, 0, 255, 0); 9:  $blue = ImageColorAllocate($myImage, 0, 0, 255); 10: 11: //draw a pie 12: ImageFilledArc($myImage, 100,100,200,150,0,90, $red, IMG_ARC_PIE); 13: ImageFilledArc($myImage, 100,100,200,150,90,180, $green, IMG_ARC_PIE); 14: ImageFilledArc($myImage, 100,100,200,150,180,360, $blue, IMG_ARC_PIE); 15: 16: //output the image to the browser 17: header ("Content-type: image/png"); 18: ImagePng($myImage); 19: 20: //clean up after yourself 21: ImageDestroy($myImage); 22: ?>

Okay, so the definition of the color black has been removed from this example, but it's mostly the same. Because we have removed the definition of black, the first defined color is white. Therefore, the color of the canvas will be white.

In lines 1214, we use the ImageFilledArc() function, which has several attributes:

• The image identifier

• The partial ellipse centered at x

• The partial ellipse centered at y

• The partial ellipse width

• The partial ellipse height

• The partial ellipse start point

• The partial ellipse end point

• Color

• Style

Look at line 14 from Listing 14.3:

14: ImageFilledArc($myImage, 100,100,200,150,180,360, $blue, IMG_ARC_PIE);

The arc should be filled with the defined color $blue and should use the IMG_ARC_PIE style. The IMG_ARC_PIE style is one of several built-in styles used in the display; this one says to create a rounded edge.

By the Way

You can learn about all the various styles in the PHP manual, at http://www.php.net/image.

Save this listing as imagecreatepie.php and place it in the document root of your web server. When accessed, it should look something like Figure 14.3, but in color.

Figure 14.3. A simple pie, with slices.

You can extend the code in Listing 14.3 and give your pie a 3D appearance. To do so, define three more colors for the edge. These colors can be either lighter or darker than the base colors, as long as they provide some contrast. The following examples define lighter colors:

$lt_red = ImageColorAllocate($myImage, 255, 150, 150); $lt_green = ImageColorAllocate($myImage, 150, 255, 150); $lt_blue = ImageColorAllocate($myImage, 150, 150, 255);

To create the shading effect, you use a for loop to add a series of small arcs at the points (100,120) to (100,101), using the lighter colors as fill colors:

for ($i = 120;$i > 100;$i--) {    ImageFilledArc ($myImage, 100,$i,200,150,0,90, $lt_red, IMG_ARC_PIE);    ImageFilledArc ($myImage, 100,$i,200,150,90,180, $lt_green, IMG_ARC_PIE);    ImageFilledArc ($myImage, 100,$i,200,150,180,360, $lt_blue, IMG_ARC_PIE); }

Listing 14.4 shows the code used for a 3D pie.

Listing 14.4. A 3D Pie Chart

 1:  <?php 2:  //create the canvas 3:  $myImage = ImageCreate(300,300); 4: 5:  //set up some colors 6:  $white = ImageColorAllocate($myImage, 255, 255, 255); 7:  $red  = ImageColorAllocate($myImage, 255, 0, 0); 8:  $green = ImageColorAllocate($myImage, 0, 255, 0); 9:  $blue = ImageColorAllocate($myImage, 0, 0, 255); 10: $lt_red = ImageColorAllocate($myImage, 255, 150, 150); 11: $lt_green = ImageColorAllocate($myImage, 150, 255, 150); 12: $lt_blue = ImageColorAllocate($myImage, 150, 150, 255); 13: 14: //draw the shaded area 15: for ($i = 120;$i > 100;$i--) { 16:     ImageFilledArc ($myImage,100,$i,200,150,0,90, $lt_red, IMG_ARC_PIE); 17:     ImageFilledArc ($myImage,100,$i,200,150,90,180, $lt_green, IMG_ARC_PIE); 18:     ImageFilledArc ($myImage,100,$i,200,150,180,360, $lt_blue, IMG_ARC_PIE); 19: } 20: 21: //draw a pie 22: ImageFilledArc($myImage, 100, 100, 200, 150, 0, 90, $red, IMG_ARC_PIE); 23: ImageFilledArc($myImage, 100, 100, 200, 150, 90, 180, $green, IMG_ARC_PIE); 24: ImageFilledArc($myImage, 100, 100, 200, 150, 180, 360, $blue, IMG_ARC_PIE); 25: 26: //output the image to the browser 27: header ("Content-type: image/png"); 28: ImagePng($myImage); 29: 30: //clean up after yourself 31: ImageDestroy($myImage); 32: ?>

Save this listing as imagecreate3dpie.php and place it in the document root of your web server. When accessed, it should look something like Figure 14.4, but in color.

Figure 14.4. A 3D pie, with slices.

These are just basic examples that show the power of some of the image-drawing and filling functions. In the next section, you learn how to manipulate existing images.