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:  <?
2:  //create the canvas
3:  $myImage = ImageCreate(150,150);
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, 50, 50, 100, 50, 0, 90, $red, IMG_ARC_PIE);
13: ImageFilledArc($myImage, 50, 50, 100, 50, 91, 180, $green, IMG_ARC_PIE);
14: ImageFilledArc($myImage, 50, 50, 100, 50, 181, 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, 50, 50, 100, 50, 181, 360, $blue, IMG_ARC_PIE);

This line of code says to begin the arc at point (50,50) and give it a width of 100 and height of 50. The start point (think in degrees) is 181, and the end is 360.

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 that are used in the display; this one says to create a rounded edge.

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.

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 (50,60) to (50,51), using the lighter colors as fill colors:

for ($i = 60;$i > 50;$i--) {
     ImageFilledArc($myImage, 50, $i, 100, 50, 0, 90, $lt_red, IMG_ARC_PIE);
     ImageFilledArc($myImage, 50, $i, 100, 50, 91, 180, $lt_green, IMG_ARC_PIE);
     ImageFilledArc($myImage, 50, $i, 100, 50, 181, 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:  <?
2:  //create the canvas
3:  $myImage = ImageCreate(150,150);
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 = 60;$i > 50;$i--) {
16:     ImageFilledArc($myImage, 50, $i, 100, 50, 0, 90, $lt_red, IMG_ARC_PIE);
17:     ImageFilledArc($myImage, 50, $i, 100, 50, 91, 180, $lt_green, IMG_ARC_PIE);
18:     ImageFilledArc($myImage, 50, $i, 100, 50, 181, 360, $lt_blue, IMG_ARC_PIE);
19: }
20:
21: //draw a pie
22: ImageFilledArc($myImage, 50, 50, 100, 50, 0, 90, $red, IMG_ARC_PIE);
23: ImageFilledArc($myImage, 50, 50, 100, 50, 91, 180, $green, IMG_ARC_PIE);
24: ImageFilledArc($myImage, 50, 50, 100, 50, 181, 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.

These are just very 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.