There are times when a programmer needs a Dymanic image, or one that can change depending on the data given. For instance, Sales is one of them, Stocks are another, but any way you put it, Dynamic images are the way to go for a web designer.
Following this tutorial, you will create a very simple image with dynamic data. Now, Onto the tutorial!
the first part of this tutorial is about creating the image. Now, if you've Never used the GD library, I suggest you go and read the php.net page located
here, but it is not necessary to understand this tutorial.
To start off, we will be creating a simple image like the one found
here. Now, if you check the url, you will see that it end in ".php". This specific image gets the data from a database I have open and adds in the relevant data.
we will start off with making the table, and inputting some Data.
CODE
CREATE TABLE `dic_image` (
`object` VARCHAR( 32 ) NOT NULL ,
`week1` SMALLINT( 3 ) NOT NULL ,
`week2` SMALLINT( 3 ) NOT NULL ,
`week3` SMALLINT( 3 ) NOT NULL ,
`week4` SMALLINT( 3 ) NOT NULL ,
`week5` SMALLINT( 3 ) NOT NULL ,
`week6` SMALLINT( 3 ) NOT NULL ,
`week7` SMALLINT( 3 ) NOT NULL
) ENGINE = MYISAM;
this table will store an object name and the amount we have over a period of 4 weeks. now that the table is set up correctly, Lets add some data to it.
CODE
INSERT INTO `dic_image` (
`object` ,
`week1` ,
`week2` ,
`week3` ,
`week4` ,
`week5` ,
`week6` ,
`week7`
)
VALUES (
'Banana', '70', '60', '50', '40', '30', '20', '10'
);
Now we have Banana in there with values.
now, we start making the image! create a new PHP file and put this into it:
php
<?php
header("Content-type: image/jpeg");
$localhost = "X";
$mysqlusername = "X";
$mysqlpassword = "X";
$db = "JX";
$con = mysql_connect($localhost, $mysqlusername, $mysqlpassword);
mysql_select_db("$db", $con);
?>
this is the simple Database connection procedures, and needs to be done. Just replace the X's with your pertinent data.
now, the next section is to gather the data from the database and store it into an array, as well as getting the total from the rows and adding them up.
php
<?php
$sql = mysql_query("SELECT COUNT(*) AS total,object,week1,week2,week3,week4,week5,week6,week7 FROM dic_image GROUP BY object")or die(mysql_error());
$row = mysql_fetch_array($sql);
$sum = $row[week1]+$row[week2]+$row[week3]+$row[week4]+$row[week5]+$row[week6]+$row[week7];
?>
now that the simple stuff is done, Lets create the image!
php
<?php
$im = imagecreate(320,255);
$white = imagecolorallocate($im,255,255,255);
$black = imagecolorallocate($im,0,0,0);
$red = imagecolorallocate($im,255,0,0);
imageline($im, 10, 5, 10, 230, $black);
imageline($im, 10, 230, 300, 230, $black);
?>
now, onto the even harder things.
php
<?php
$x = 15;
$y = 230;
$x_width = 20;
$y_ht = 0;
for ($i=1;$i<8;$i++){
$y_ht = ($row[week.$i]/$sum)* 255;
imagerectangle($im,$x,$y,$x+$x_width,($y-$y_ht),$red);
imagestring( $im,2,$x-1,$y+10,$row[week.$i],$black);
$x += ($x_width+20);
}
?>
this code uses a for loop to place the data and form the rectangles of the correct size and space.
lastly, we need to show the image!
php
Congratulations, you've just completed your first bar graph in PHP!
Final Code:
php
<?php
header("Content-type: image/jpeg");
$localhost = "X";
$mysqlusername = "X";
$mysqlpassword = "X";
$db = "X";
$con = mysql_connect($localhost, $mysqlusername, $mysqlpassword);
mysql_select_db("$db", $con);
$sql = mysql_query("SELECT COUNT(*) AS total,object,week1,week2,week3,week4,week5,week6,week7 FROM dic_image GROUP BY object")or die(mysql_error());
$row = mysql_fetch_array($sql);
$sum = $row[week1]+$row[week2]+$row[week3]+$row[week4]+$row[week5]+$row[week6]+$row[week7];
$im = imagecreate(320,255);
$white = imagecolorallocate($im,255,255,255);
$black = imagecolorallocate($im,0,0,0);
$red = imagecolorallocate($im,255,0,0);
imageline($im, 10, 5, 10, 230, $black);
imageline($im, 10, 230, 300, 230, $black);
$x = 15;
$y = 230;
$x_width = 20;
$y_ht = 0;
for ($i=1;$i<8;$i++){
$y_ht = ($row[week.$i]/$sum)* 255;
imagerectangle($im,$x,$y,$x+$x_width,($y-$y_ht),$red);
imagestring( $im,2,$x-1,$y+10,$row[week.$i],$black);
$x += ($x_width+20);
}
imagejpeg($im);
?>
Creating a Dynamic image in PHP
8 Jun, 2008 - 10:59 AM
| 