PHP has a surprising ability-you can use its server-side script to create dynamic graphics. This feature is based on the GD library, which is an ANSI C library designed by Thomas Boutell, which supports the addition of the library. Most common graphic file formats other than GIF files (although the library's designers have promised to add. gif support as soon as the LZW patent expires on July 7, 2004).
PHP4.3 and its later versions are integrated with the GD library. If you are using an older version of PHP, you will need to manually install graphics support. There is a lot of information about it here.
Line Chart
To demonstrate how to create dynamic graphics with PHP, we created some custom graphics. The first example is a line chart drawn on the grid, as shown in a.
Figure A
We call this page grid.php (related accessories: Listing a). In order to invoke the dynamically generated graphics of a Web page, you only need to access this PHP page, which passes the graphic to the browser. The IMG element can do the job very well. The following is an example code that implements this function: "
Now, let's start writing the code to create the graph. The following is a snippet of source code in grid.php:
Add a value to a graphic
$graphValues =array (0,80,23,11,190,245,50,80,111,240,55);
First, we define the values of the graphs. In this example, the graphical values are written directly into an array in the code, but you can easily rewrite the code to get the values from the XML (the normalization is getting closer) to the file, table, or database. These values range from 0 to 250 (the graphic size in pixels). These values determine the initial pixel position of the segments on each grid. If you want to use numbers 0 and 100 (expressed as percentages), you simply 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 "spoof" 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 a binary data stream.
The PNG (Portable network Graphic, Portable Network Graphics) standard is a lossless graphics format that was introduced in 1995 due to the legal issue of the LZW algorithm patent for GIF.
Now, let's instantiate the graphical object and define the colors we used in the graphic:
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 each time we call this function we draw a line:
Create a box around an 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 grid lines, we draw a gray line every 25 pixels on the X and Y axes:
Create Mesh
for ($i =1; $i <11; $i + +) {
Imageline ($image, $i *25, 0, $i *25, $colorGrey);
Imageline ($image, 0, $i *25, $i *25, $colorGrey);
}
The position (0,0) represents the upper-left corner of the grid, and the position (250,250) represents the lower-right corner. Each axis is divided into 10 cells, each with a width of 25 pixels, or 250 pixels (the size of a graphic).
To create a line chart, we simply loop through the coordinate values in the array and draw the start and end points of each segment 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);
12 Next Page
