Ever wanted to make something like this with PHP ?
Well, today I will show and explain the script that generated this beautiful graphic.
PHP supports drawing functions with the GD library which provides many necessary image manipulation functions.
Using these functions we can actually transform the array to this graphic. The array must have no more than 30 elements, and every element is transformed to %, and printed.
-
-
/**
-
* @param mixed $ar - Data array. Max elements = 30;
-
* @return mixed Returns the image on success or FALSE on error.
-
*/
-
function arraytograph($ar)
-
{
-
-
{
-
return FALSE;
-
}
-
-
//convert values to %. This is done by getting the maximum value of this array that will be 100%.
-
-
-
foreach ($ar as $el)
-
{
-
$newarray[] =
intval($el /
$hundredp *
100);
-
}
-
-
//create 300×150 image
-
$im = imagecreatetruecolor(300, 150);
-
-
//create colors.
-
$col_background = imagecolorallocate($im, 0, 0, 0);
-
$col_grid = imagecolorallocate($im, 0×53, 0×44, 0×01);
-
$col_bars = imagecolorallocate($im, 0xb7, 0×6b, 0×1a);
-
$col_text = imagecolorallocate($im, 200, 200, 200);
-
-
//fill with background color
-
imagefill($im, 0, 0, $col_background);
-
-
//draw grid
-
//horizontal lines
-
for ($i=1; $i<=10; $i++)
-
{
-
imageline($im, 0, $i*10+40, 300, $i*10+40, $col_grid);
-
}
-
-
//vertical
-
-
for ($i=
1;
$i<=
count($newarray);
$i++
)
-
{
-
imageline($im, $i*$space, 40, $i*$space, 150, $col_grid);
-
}
-
-
//and now lets draw the graphics.
-
for ($i=0; $i<count($newarray);>
-
{
-
$x1 =
intval($space/
2) -1 +
$space*
$i;
-
imagefilledrectangle($im, $x1, 150, $x1+3, 150-$newarray[$i], $col_bars);
-
imagestringup($im, 2, $x1-5, 150-$newarray[$i]-10, $newarray[$i].‘%’,$col_text);
-
}
-
-
//tell the browser that this will be a png image.
-
header("Content-type: image/png");
-
-
//finally generate the image;
-
imagepng($im);
-
imagedestroy($im);
-
}
OK, now I will explain the whole code. Here we go:
First of all we check if the array is not empty, is not null or has more than 30 elements.
Then with a for we transform the elements of the array into percentage. To do this, the max() function returns the highest element in the array, that will be 100%, and the rest is some maths =)
-
-
-
foreach ($ar as $el)
-
{
-
$newarray[] =
intval($el /
$hundredp *
100);
-
}
Doing this the new array is generated, $newarray. This array will be used to print the info.
-
//create 300×150 image
-
$im = imagecreatetruecolor(300, 150);
Create an image of 300px width and 150px height.
-
$col_background = imagecolorallocate($im, 0, 0, 0);
-
$col_grid = imagecolorallocate($im, 0×53, 0×44, 0×01);
-
$col_bars = imagecolorallocate($im, 0xb7, 0×6b, 0×1a);
-
$col_text = imagecolorallocate($im, 200, 200, 200);
Here we assign 4 different colors that will be used to generate the graph. The color assignment is made using imagecolorallocate() function. This function receives the created image as the first parameter, and receives R G and B values for the color. So a RGB #534401 is converted into 0×53, 0×44, 0×01. Remember that writing 0x indicates that the number is in hex format.
-
imagefill($im, 0, 0, $col_background);
Here the whole image is filled with $col_background color, that was previously assigned with imagecolorallocate() function.
Now the most interesting part starts, the drawing procedures.
-
//draw grid
-
//horizontal lines
-
for ($i=1; $i<=10; $i++)
-
{
-
imageline($im, 0, $i*10+40, 300, $i*10+40, $col_grid);
-
}
-
//vertical
-
-
for ($i=
1;
$i<=
count($newarray);
$i++
)
-
{
-
imageline($im, $i*$space, 40, $i*$space, 150, $col_grid);
-
}
Here we draw a grid. It’s made of vertical and horizontal lines, so first we draw 10 horizontal lines, 1 line each 10 pixels, that will represent %; And then we draw vertical lines. The amount of those lines is determined by the amount of elements in the array, they may be 10, 20 or 5, so it’s calculated on the fly.
The interesting part is how the coordinates are calculated, and to draw the line GD provides us with a useful function imageline(). This function receives the image return by imagecreate() as the first parameter. Start x, and y position and Finish X and Y; and the last parameter is the color.
Be aware that the coordinates system in GD is the same as in all other graphic libraries, that is the top right corner is 0,0 and it gets incrementing to the right and bottom. So the most bottom left corner will be 300,150 in this case.
-
for ($i=0; $i<count($newarray);>
-
{
-
$x1 =
intval($space/
2) -1 +
$space*
$i;
-
imagefilledrectangle($im, $x1, 150, $x1+3, 150-$newarray[$i], $col_bars);
-
imagestringup($im, 2, $x1-5, 150-$newarray[$i]-10, $newarray[$i].‘%’,$col_text);
-
}
With these lines we calculate and draw the bars, that will make the whole graph, and the legend of how many percents is each bar.
Here there are 2 new functions: imagefilledrectangle() and imagestringup()
The first one draws a filled rectangle, and the parameters are the same as imageline()’s.
imagestringup() is the function that “draws” the text on the image, but it doesn’t draw it in usual way, it draws it vertically. It receives the image returned by imagecreate(), the second parameter is the font size, here we use 2, the third and fourth parameters are the X,Y coordinates. Here I subtract 5, from $x1 just to center the legend; the next parameter is the string itself to be drawn, and at last, the color.
With all these done, we can send the generated image to the browser:
-
header("Content-type: image/png");
-
-
//finally generate the image;
-
imagepng($im);
-
imagedestroy($im);
The first line send a header to the browser telling him, that it will send a png image. Then with imagepng() All we have drawn is converted into the png format and sent to the browser. The last thing is imagedestroy() the image.
Well, thats all as for the drawing function.
This is an example of how to use this function:
-
include ‘arraytograph.php’;
-
-
for ($i=0;$i<16;$i++)
-
-
-
arraytograph($ar);
-
?>
