php_mysql_apache [Electronic resources] نسخه متنی

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 13.3 draws a basic pie chart.

Listing 13.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/jpeg");
18: ImageJpeg($myImage);
19:
20: //clean up after yourself
21: ImageDestroy($myImage);
22: ?>

With the exception of lines 1214, this script is almost identical to the previous listings. Additionally, the definition of the color black has been removed, leaving the color white as the first to be defined and, therefore, the color of the canvas.

In lines 1214, the function in use is ImageFilledArc(), 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 13.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 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. IMG_ARC_PIE is one of several built-in styles that are used in the display; this one says to create a rounded edge. 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 13.3, but in color.

You can extend the code in Listing 13.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 13.4 shows the code used for a 3D pie:

Listing 13.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/jpeg");
28: ImageJpeg($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 13.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.