1. [Charts| Generating Graphic| Creating Graphic]
CHAPTER 6 GRAPHIC USAGE
[Charts| Generating Graphic| Creating Graphic]
Madam Hazwani binti Rahmat

2. 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

3. 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);

4. 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);
?>

5. 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()

6. 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

7. 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

8. 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

9. 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()

10. 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

11. 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()

12. 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

13. 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.

14. 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

15. 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);

16. 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);

17. 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;

18. 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); }

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

20. CREATING BAR CHARTS

21. 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)

22. GENERATING GRAPHICS Generating graphics from a database requires:
Data Table

23. GENERATING GRAPHICS Generating graphics from a database requires:
Input Page

24. GENERATING GRAPHICS Generating graphics from a database requires:
Action Page