PHP has an amazing ability - you can create dynamic graphics using its server-side script. The basis of this feature is the GD library. It is an ANSI C library designed by Thomas Boutell. This library supports the vast majority of common graphics file formats other than .GIF files (but the instrument of the library as designer promise to LZW patent at 2004) Immediately after July 7, it will be added immediately. GIF support). PHP4.3 and its higher versions integrate GD libraries. If you are using the old version of PHP, you need to manually install graphic support. There are many information related to it here. Pharaine diagram In order to demonstrate how to create dynamic graphics with PHP, we create some custom graphics. The first example is a line diagram drawn on the grid, as shown in Figure A. Figure A. We call this page for Grid.php (related attachments: Listing A). To call the dynamically generated graphics generated by the web page, you only need to access this PHP page, which passes the graphic to the browser. The IMG element can complete this work well. Here is an example code that implements this feature:
// Add graphical value
$ 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 graphical value is written directly in an array in the code, but you can easily rewrite the code, allowing the code to get these values from an XML file, a table or database. These values range from 0 to 250 (based on pixels). These values will determine the initial pixel location of each grid. If you want to use values 0 and 100 (indicated by percentage), you only need to multiply these values in 2.5 to determine the pixel location on the grid. Then, we 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 graphical head to "deceive" browser, making it think that our PHP page is a real image so that it can be displayed correctly on the screen. The server will send the information generated by the program to the browser in the form of binary data stream. PNG (Portable Network Graphic, Portable Network Graphic) standard is a non-destructive graphic format, which is proposed in 1995 due to the LZW algorithm patented by GIF. Now, we extempt the graphic object and define the colors we used in the graphics:
// Create an image, define color
$ image = imagecreate ($ IMGWIDTH, $ IMGHETIGHT);
$ colorwhite = imagecolorallocate ($ image, 255, 255, 255);
$ colorgrey = imagecolorallocate ($ Image, 192, 192, 192);
$ colorblue = imagecolorallocate ($ image, 0, 0, 255);
We set a white background, gray picture frame and blue fold line. You can easily modify or add color by creating new variables and assigning different RGB values. We can use the imageline function to create a gray picture frame, draw a line each time you call this function:
// Create a box around the image
ImagesEline ($ image, 0, 0, 0, 250, $ colorgrey);
ImageLine ($ image, 0, 0, 250, 0, $ colorgrey);
ImageLine ($ Image, 249, 0, 249, 249, $ Colorgrey; Imageline ($ Image, 0, 249, 249, 249, $ Colorgrey;
This uses two-dimensional X / Y pixel coordinates. Each pair in the ImagelineLine function specifies the starting and end point of the image. In order to implement the grid line, we draw a gray line every 25 episodes on the X coordinate axis and Y coordinate shaft:
// Create a grid
For ($ I = 1; $ I <11; $ I ) {
Imageline ($ Image, $ I * 25, 0, $ I * 25, 250, $ Colorgrey);
ImageLine ($ Image, 0, $ I * 25, 250, $ I * 25, $ Colorgrey);
}
Location (0,0) represents the upper left corner of the grid, the position (250, 250) represents the lower right corner. Each coordinate shaft is divided into 10 grid, and each width is 25 pixels, ie 250 pixels (size of the graph). In order to create a drawing diagram, we only need to loop the coordinate value in the array, and draw the starting point and endpoint of each line segment according to the coordinate:
// 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 populate the blue line between the start and end points. Only 10 values in this simple example, but expand this technology is very easy, such as complex graphics such as creating similar stock indications. Finally, we need to output this image to your browser and clear the memory space saved in the server:
/ / Output graphics and clear the image in memory
ImagePNG ($ image);
ImagesDestroy ($ image);
?>
The histogram is used to create a straightcoming picture after modifying the basic program used to create a line diagram (shown in Figure B). Figure B (Related Attachments: List B) This program is slightly different from the code used to draw the drawline map above. ImageFilledRectangle functions creates two rules - DBR represents the value saved in the $ graphvalues array, while light colony is used to populate the gap between dark squares:
// Create a straight square map
For ($ I = 0; $ i <10; $ i ) {
ImageFilledRectangle ($ IMAGE, $ I * 25, (250- $ GRAPHVALUES [$ I]), ($ I 1) * 25, 250, $ ColordarkBlue;
ImageFilledRectangle ($ IMAGE, ($ I * 25) 1, (250- $ GRAPHVALUES [$ I]) 1 (($ I 1) * 25) -5, 248, $ ColorlightBlue);
}
Trying to CPU's load When you create these graphics on the server, you need to carefully consider this problem: CPU load. If you have too many such dynamic pictures in the web end, you may find that performance has dropped. More Complex Usage This example is only a starting point. If you want to get more information about the PHP graphics library, check the graphic function webpage on the PHP manual.
############ Listing B ########################
// add value to the graph
$ graphvalues = Array (0, 80, 23, 11, 190, 245, 50, 80, 111, 240, 55);
// define .png Image
Header ("Content-Type: Image / PNG");
$ IMGWIDTH = 250;
$ IMGHEIGHT = 250;
// Create Image and Define Colors
$ image = imagecreate ($ IMGWIDTH, $ IMGHETIGHT);
$ colorwhite = imagecolorallocate ($ image, 255, 255, 255);
$ colorgrey = imagecolorallocate ($ Image, 192, 192, 192);
$ colorDarkBlue = ImageColoralLocate ($ Image, 104, 157, 228);
$ colorlightblue = imagecolorallocate ($ image, 184, 212, 250);
// Create Border Around Image
ImageLine ($ Image, 0, 0, 0, 250, $ Colorgrey; ImagelineLine ($ Image, 0, 0, 250, 0, $ Colorgrey);
ImagesEline ($ Image, 249, 0, 249, 249, $ Colorgrey);
ImageLine ($ Image, 0, 249, 249, 249, $ Colorgrey;
// Create Grid
For ($ I = 1; $ I <11; $ I ) {
Imageline ($ Image, $ I * 25, 0, $ I * 25, 255, $ Colorgrey);
Imageline ($ Image, 0, $ I * 25, 255, $ I * 25, $ Colorgrey);
}
// Create Bar Charts
For ($ I = 0; $ i <10; $ i ) {
ImageFilledRectangle ($ IMAGE, $ I * 25, (250- $ GRAPHVALUES [$ I]), ($ I 1) * 25, 250, $ ColordarkBlue;
ImageFilledRectangle ($ IMAGE, ($ I * 25) 1, (250- $ GRAPHVALUES [$ I]) 1 (($ I 1) * 25) -5, 248, $ ColorlightBlue);
}
// Output Graph and Clear Image from Memory
ImagePNG ($ image);
ImagesDestroy ($ image);
?>
