Home >Backend Development >PHP Tutorial >Create dynamic graphics with PHP_PHP tutorial
Create dynamic graphics with PHP_PHP tutorial
- WBOYOriginal
- 2016-07-15 13:22:49862browse
PHP has an amazing ability - you can create dynamic graphics using its server-side scripting. The basis of this feature is the GD library, which is an ANSI C library designed by Thomas Boutell. This library supports most common graphics file formats except .GIF files (but the designer of the library promised that when the LZW patent was issued in 2004 .GIF support will be added immediately after expiration on July 7, 2019).
PHP4.3 and higher versions integrate 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 dynamic graphics with PHP, we create some custom graphics. The first example is a line chart drawn on a grid, as shown in Figure A.
Figure A
500) this.width=500' align='center' hspace='10' vspace='10'>
We call this page grid.php (Related attachment: List A ). In order to call a graphic generated dynamically by a Web page, you only need to access the PHP page, which passes the graphic to the browser. IMG elements can do this job very well. The following is an example code to implement this function:
Now, we Start writing the code to create the graph. The following is a source code snippet in grid.php:
//Add graph values
$graphValues=array(0,80,23,11,190,245,50,80,111,240,55);
First, we define the values of the graph. In this example, the graphic values are written directly to an array in the code, but you could easily rewrite the code to get the values from an XML file, a table, or a database. These values range from 0 to 250 (the graphic size in pixels). These values will determine the initial pixel position of the line segments on each grid. If you want to use the values 0 and 100 (expressed as percentages), you simply multiply these values by 2.5 to determine the pixel position 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 graphics header to "trick" the browser into thinking 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 a binary data stream.
The PNG (Portable Network Graphic) standard is a lossless graphics format that was proposed in 1995 due to the legal issue of GIF's LZW algorithm patent.
Now, we instantiate the graphics object and define the colors we use in the graphics:
//Create the image, define the 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 a white background, gray frame and 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. Each time this function is called, a line is drawn:
//Create a frame around the image
imageline($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);
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.
In order to implement grid lines, we draw a gray line every 25 pixels on the x-axis and y-axis:
//Create grid
for ($i=1; $i imageline($image, $i*25, 0, $i*25, 250, $colorGrey);
imageline($image, 0, $i*25, 250, $i*25, $colorGrey);
}
Position (0,0) represents the upper left corner of the grid, and position (250,250) represents the lower right corner. Each coordinate axis is equally divided into 10 grids, and the width of each grid is 25 pixels, that is, 250 pixels (the size of the graphic).
In order to create a line chart, we only need to loop out the coordinate values in the array and draw the starting point and end point of each line segment according to the coordinates:
//Create a line chart
for ($i=0; $iimageline($image, $i*25, (250-$graphValues[$i]), ($i+1)*25, (250-$graphValues[$i +1]), $colorBlue);
}
PHP will automatically fill in the blue line between the starting point and the ending point. There are only 10 values in this simple example, but it is very easy to extend this technique to create complex graphics like stock indicator intent, etc.
Finally, we need to output this image to the browser and clear the memory space where the image is saved in the server:
//Output the graphic and clear the image in the memory
imagepng($image);
imagedestroy ($image);
?>
Histogram
Modify the basic procedure used to create a line chart above and use it to create a histogram (as shown in Figure B).
Figure B
500) this.width=500' align='center' hspace='10' vspace='10'>
(Related attachment: Listing B) This program is the same as what we used above The code for drawing the line chart is slightly different.The Imagefilledrectangle function creates two types of rectangles - dark rectangles represent the values stored in the $graphValues array, while light rectangles are used to fill the gaps between dark rectangles:
//Create a histogram
for ($i=0; $iimagefilledrectangle($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);
}
Watch the CPU load
When you create these graphics on the server side, you need to think carefully about this issue: CPU load. If you have too many such dynamic image generation tasks on the web side, you may find that performance decreases.
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 Graphics Functions page on the PHP Manual.
English version address: