[Charts| Generating Graphic| Creating Graphic] CHAPTER 6 GRAPHIC USAGE [Charts| Generating Graphic| Creating Graphic] Madam Hazwani binti Rahmat http://fsktm2.uthm.edu.my/hazwani/v2/

CREATING GRAPHICS GD is an open PHP source code library for dynamic creation of images. GD is used for creating PNG, JPEG and GIF images . It is commonly used to generate charts, graphics, thumbnails. GD library allows alteration, manipulation, and creation of images through programming such as: Create new images Create text Manipulate image Manipulate text

CREATING GRAPHICS Creating a new image requires STEPS in defining the following in order: Steps Syntax and example image type Syntax: header("Content-type: image/type(png/gif/jpg)"); Example: header ("Content-type: image/png"); image dimension Syntax: imagecreate(width, height); Example: imagecreate(300, 300); Creation command Syntax: imagepng(dimension); Example: imagepng($image); Deletion command Syntax: imagedestroy(dimension); Example: imagedestroy($image);

CREATING GRAPHICS Example: creating rectangle <?php //Step1: Set the correct content type header('content-type: image/png'); // Step2: Create our basic image stream $image = imagecreate(125, 125); //Set the background color $blueBG = imagecolorallocate($image, 0, 0, 255); // Step3: save the image as a png and output imagepng($image); // Step4: Clear up memory used imagedestroy($image); ?>

CREATING GRAPHICS Creating a new text requires the following command syntax: ImageString(dimension, size, Xcoordinate, Ycoordinate, string, color); where; dimension – width and height of the image canvas size - an integer between 1 to 5 x coordinate – x position on screen y coordinate – y position on screen string - text to display color – fill color using imagecolorallocate()

CREATING GRAPHICS <?php FORM| $_POST| $_GET //Step1: Set the correct content type header('content-type: image/png'); // Step2: Create our basic image stream $image = imagecreate(125, 125); //Set the background color $bg = imagecolorallocate($image, 0, 0, 255); //Set the text color $txt_color = imagecolorallocate($image, 0, 0, 0); //Set the text ImageString ($image, 5, 5, 18, “Hello", $txt_color); // Step3: save the image as a png and output imagepng($image); // Step4: Clear up memory used imagedestroy($image); ?> FORM| $_POST| $_GET

CREATING GRAPHICS Manipulating text WITH FONT requires the following command syntax: imagettftext(dimension, size, rotation, Xcoordinate, Ycoordinate, color, font, string); where; dimension - width and height of the image canvas size – font size rotation – degrees to rotate text x coordinate – x position on screen y coordinate – y position on screen color – fill color using imagecolorallocate() font - font name/ ttf file location string - text to display

CREATING GRAPHICS <?php FORM| $_POST| $_GET //Step1: Set the correct content type header('content-type: image/png'); // Step2: Create our basic image stream $image = imagecreate(125, 125); //Set the background color $bg = imagecolorallocate($image, 0, 0, 255); //Set the text color $txt_color = imagecolorallocate($image, 0, 0, 0); //Set the text imagettftext($image, 20, 0, 10, 30, $txt_color, “aparaj.ttf”, “Hello”); // Step3: save the image as a png and output imagepng($image); // Step4: Clear up memory used imagedestroy($image); ?> FORM| $_POST| $_GET

ImageLine(dimension, xStart, yStart, xEnd, yEnd, color); CREATING GRAPHICS Creating a new line requires the following command syntax: ImageLine(dimension, xStart, yStart, xEnd, yEnd, color); where; dimension - width and height of the image canvas xStart- x axis line starting point on screen yStart– y axis line starting point on screen xEnd- x axis line starting point on screen yEnd– y axis line starting point on screen color - fill color using imagecolorallocate()

CREATING GRAPHICS FORM| $_POST| $_GET <?php //Step1: Set the correct content type header('content-type: image/png'); // Step2: Create our basic image stream $image = imagecreate(125, 125); //Set the background color $bg = imagecolorallocate($image, 0, 0, 255); //Set the line color $line_color = imagecolorallocate($image, 0, 0, 0); // set line position ImageLine($image, 65, 0, 130, 50, $line_color); // Step3: save the image as a png and output imagepng($image); // Step4: Clear up memory used imagedestroy($image); ?> FORM| $_POST| $_GET

imageellipse (dimension, xCenter, yCenter, width, height, color); CREATING GRAPHICS Creating an ecllipse requires the following command syntax: imageellipse (dimension, xCenter, yCenter, width, height, color); where; dimension - width and height of the image canvas xCenter- x axis line center coordinate on screen yCenter– y axis line center coordinate on screen width- x axis line starting point on screen height– y axis line starting point on screen color - fill color using imagecolorallocate()

CREATING GRAPHICS FORM| $_POST| $_GET <?php //Step1: Set the correct content type header('content-type: image/png'); // Step2: Create our basic image stream $image = imagecreate(125, 125); //Set the background color $bg = imagecolorallocate($image, 0, 0, 255); //Set the line color $line_color = imagecolorallocate($image, 0, 0, 0); // set line position imageellipse ($image, 65, 25, 100, 40, $line_color); // Step3: save the image as a png and output imagepng($image); // Step4: Clear up memory used imagedestroy($image); ?> FORM| $_POST| $_GET

CREATING BAR CHARTS A bar chart is simply a series of rectangles that represent the unit or percentage amount of a maximum value, starting from a logical 0 point and proceeding to the specified amount of the maximum value with a constant bar width. In image coordinate terms, this means that the rectangle starts at an (x1, y1) coordinate extending to a (x2, y2) coordinate, where x1 equals the starting horizontal position, y1 equals the starting vertical position, x2 equals the ending horizontal position, and y2 equals the ending vertical position. All of this information is created from a series of unit or percentage amounts converted to unit amounts.

CREATING BAR CHARTS Creating a bar chart requires the following: Image type Data to plot Image dimension (canvas size) Background color(canvas color) X and Y axis (line and color) Graph bar fill color First graph bar location Width and height of each graph bar Data plot Creation command

header("Content-type: image/jpeg"); CREATING BAR CHARTS Creating a bar chart requires the following: Image type header("Content-type: image/jpeg"); Data to plot $data = array('3000','2470','225','663','6666','3456','789'); Image dimension (canvas size) $height = 255; $width = 320; $im = imagecreate($width,$height);

CREATING BAR CHARTS Creating a bar chart requires the following: Background color(canvas color) $white = imagecolorallocate($im,240,240,255); X and Y axis (line and color) $black = imagecolorallocate($im,0,0,0); imageline($im, 10, 5, 10, 230, $black); imageline($im, 10, 230, 300, 230, $black); Graph bar fill color $blue = imagecolorallocate($im,0,64,128);

CREATING BAR CHARTS Creating a bar chart requires the following: First graph bar location $x = 15; $y = 230; Width and height of each graph bar $x_width = 20; $y_ht = 0;

CREATING BAR CHARTS Creating a bar chart requires the following: Data plot $sum = array_sum($data); for($i=0;$i<7;$i++) { $y_ht = ($data[$i]/$sum)* $height; imagefilledrectangle($im,$x,$y,$x+$x_width,($y-$y_ht),$blue); imagestring( $im,2,$x-1,$y+10,$data[$i],$black); $x += ($x_width+20); }

CREATING BAR CHARTS Creating a bar chart requires the following: Creation command imagejpeg($im);

CREATING BAR CHARTS

GENERATING GRAPHICS Available graphics stored in database can be generated using PHP. (Ex: Shopping catalog) Generating graphics from a database requires: Data table (to specify image location and name) Input page (catalog (product category) / search keyword) Action page (to pull out data requested)

GENERATING GRAPHICS Generating graphics from a database requires: Data Table

GENERATING GRAPHICS Generating graphics from a database requires: Input Page

GENERATING GRAPHICS Generating graphics from a database requires: Action Page