Create a dynamic graphic with PHP

Create | dynamic | Graphics PHP has a surprising ability to create dynamic graphics using its server-side scripts. This function is based on the GD library, which is designed by Thomas Boutell ANSI C library, which is supported in addition to the library. Most common graphics file formats outside of GIF files (although the designer of the library has promised to add the LZW patent as soon as it expires on July 7, 2004. GIF support).

PHP4.3 and its newer version integrates the GD library. If you are using an older version of PHP, you will need to install graphics support manually. There is a lot of information about it here.


Line chart
To demonstrate how to create a dynamic graphic with PHP, we build some custom graphics. The first example is a line chart drawn on the grid, as shown in Figure A.

Figure A




We call this page grid.php (related accessories: Listing a). To invoke a dynamically generated graphic for a Web page, you only need to access the PHP page, which passes the graphic to the browser. The IMG element can do the job well. The following is an example code to implement this feature:



Now we're going to start writing code to create the graphic. The following is a source code fragment in grid.php:
?
Add the value of a graphic
$graphValues =array (0,80,23,11,190,245,50,80,111,240,55);


First, we define the value of the graph. In this example, the graphic value is written directly into an array in the code, but you can easily rewrite the code to get the values from the XML file, table, or database. These values range from 0 to 250 (graphic dimensions in pixels). These values determine the initial pixel position of the segment on each grid. If you want to use values 0 and 100 (expressed as percentages), you just multiply these values by 2.5来 to determine the pixel position on the grid.

We then send a PNG header and define the height and width of the image:
Define. PNG image
Header ("Content-type:image/png");
$imgWidth = 250;
$imgHeight = 250;


We send a graphics header to "trick" the browser so that it thinks our PHP page is a real image so it can be displayed correctly on the screen. The server sends the information generated by the program to the browser in the form of binary data streams.


PNG (Portable Network Graphic, Portable Network Graphics) standard is a lossless graphic format, which was proposed in 1995 due to the legal issue of GIF's LZW algorithm patent.


Now, we're going to instantiate the drawing object and define the colors we use in the graph:

Create an image, define a color
$image =imagecreate ($imgWidth, $imgHeight);
$colorWhite =imagecolorallocate ($image, 255, 255, 255);
$colorGrey =imagecolorallocate ($image, 192, 192, 192);
$colorBlue =imagecolorallocate ($image, 0, 0, 255);


We set the white background, the gray frame and the blue polyline. You can easily modify or add colors by creating new variables and assigning different RGB values.

We can use the Imageline function to create a gray frame and draw a line each time this function is called:

Create a box around the image
Imageline ($image, 0, 0, 0, $colorGrey);
Imageline ($image, 0, 0, 0, $colorGrey);
Imageline ($image, 249, 0, 249, 249, $colorGrey);
Imageline ($image, 0, 249, 249, 249, $colorGrey);


The two-dimensional x/y pixel coordinates are used here. Each pair of values in the Imageline function specifies the starting and ending points of the image.

To achieve the grid line, we draw a gray line every 25 pixels on the X and Y axes:

Create a Grid
For ($i =1 $i <11; $i + +) {
Imageline ($image, $i *25, 0, $i *25, $colorGrey);
Imageline ($image, 0, $i *25, $i *25, $colorGrey);
}


Position (0,0) represents the upper-left corner of the grid, and position (250,250) represents the lower-right corner. Each axis is divided into 10 cells, each of which is 25 pixels wide, or 250 pixels (the dimensions of the graphic).

To create a line chart, we simply loop through the coordinates of the array, drawing the start and end points of each line by coordinates:

Create a line chart
For ($i =0 $i <10; $i + +) {
Imageline ($image, $i *25, (250-$graphValues [$i]), ($i + 1) *25, (250-$graphValues [$i +1]), $colorBlue);
}


PHP will automatically fill the blue line between the start and end points. There are only 10 values in this simple example, but it is very easy to extend this technique, such as creating complex graphs like stock index diagrams and so on.

Finally, we need to output this image to the browser and empty the memory space on the server to hold the image:
Output graphics and clear images in memory
Imagepng ($image);
Imagedestroy ($image);
?>



Histogram
Modify the base program above for creating a line chart to create a histogram (as shown in Figure B).

Figure B



(Related attachment: Listing B) This program is slightly different from the code we used to draw a line chart. The Imagefilledrectangle function creates two straight squares--dark straight squares that represent the values saved in the $graphvalues array, while the light-colored straight squares fill the spaces between the dark squares:

Create a histogram
For ($i =0 $i <10; $i + +) {
Imagefilledrectangle ($image, $i *25, (250-$graphValues [$i]), ($i + 1) *25, $colorDarkBlue);
Imagefilledrectangle ($image, ($i *25) +1, (250-$graphValues [$i]) +1, (($i + 1) *25) -5, 248, $colorLightBlue);
}


Keep an eye on the CPU load
When you create these graphs on the server side, you need to consider this problem carefully: CPU load. If you have too many of these dynamic images on the web to generate tasks, you may find that performance degradation is caused.

More complex usage
The examples listed in this article are just a starting point. If you want more information about the PHP graphics library, check out the graphical functions page in the PHP manual.

English version address: http://builder.com.com/5100-6371-5092227.html