INTRODUCTION

PHP Web Home
Server Setup
nav.php
code.php
Download Tutorial

LESSONS

01 Hello World!
02 Text I/O
03 Arithmetic
04 Date and Time
05 Image Creation
06 Pie Chart
07 Array and Records
08 Delete a Record
09 Shopping
10 Shop Checkout
11 MM Bingo

MORE PHP

PHP Console Apps
PHP and MySQL

06 - Interactive Pie Chart Using PHP

Please provide five positive numbers. For example: 2, 4, 6, 8, 10.

N1:
N2:
N3:
N4:
N5:

Homework: Create an interactive bar chart.

This is the HTML code needed to display the image and get the pie slice sizes from the user.


<!-- Here is the page source code for 06pie.php -->

<?php
  include "code.php";    // Contains the function used to display
                         // the source code of web pages.
						 
  session_start();
						 
  if (isset($_POST['n1']))
  {
    // EXTRACT POST DATA POSTED TO THIS PAGE
    $n1 = $_SESSION['n1'] = $_POST['n1'];
    $n2 = $_SESSION['n2'] = $_POST['n2'];
    $n3 = $_SESSION['n3'] = $_POST['n3']; 
    $n4 = $_SESSION['n4'] = $_POST['n4']; 
    $n5 = $_SESSION['n5'] = $_POST['n5'];
  }
  else
  if (isset($_SESSION['n1']))
  {
    // EXTRACT STORED SESSION DATA
    $n1 = $_SESSION['n1'];
    $n2 = $_SESSION['n2'];
    $n3 = $_SESSION['n3']; 
    $n4 = $_SESSION['n4']; 
    $n5 = $_SESSION['n5'];
  }
  else
  {
    // INITIALISE POST AND SESSION DATA
    $n1 = $_SESSION['n1'] = 1.5;
    $n2 = $_SESSION['n2'] = 3;
    $n3 = $_SESSION['n3'] = 4; 
    $n4 = $_SESSION['n4'] = 5; 
    $n5 = $_SESSION['n5'] = 10;
  }

?>

<html>
<head>
<title>Interactive Pie Chart Using PHP</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table border="1" cellpadding="4" cellspacing="0">
<tr valign="top">
<td><?php include "nav.php"; ?>
</td>
<td>
      <h1>06 - Interactive Pie Chart Using PHP</h1>
      
      <h3>Please provide five positive numbers. For example: 2, 4, 6, 8, 10.</h3>

      <form name="form1" method="post" action="06pie.php">
        <table border="1" cellspacing="0" cellpadding="4">
	    <tr> 
	      <td><div align="right">N1:</div></td>
	      <td> <input name="n1" type="text" id="n1" value="<?php echo $n1; ?>"> </td>
	    </tr>
	    <tr> 
	      <td><div align="right">N2:</div></td>
	      <td> <input name="n2" type="text" id="n2" value="<?php echo $n2; ?>"> </td>
	    </tr>
	    <tr> 
	      <td><div align="right">N3:</div></td>
	      <td> <input name="n3" type="text" id="n3" value="<?php echo $n3; ?>"> </td>
	    </tr>
	    <tr> 
	      <td><div align="right">N4:</div></td>
	      <td> <input name="n4" type="text" id="n4" value="<?php echo $n4; ?>"> </td>
	    </tr>
	    <tr> 
	      <td><div align="right">N5:</div></td>
	      <td> <input name="n5" type="text" id="n5" value="<?php echo $n5; ?>"> </td>
	    </tr>
	    <tr> 
	      <td colspan="2"><div align="right"> 
		  <input type="submit" name="Submit" value="Submit">
		</div></td>
	    </tr>
	  </table>
	</form>

    <?php 
	  // This tricks the browser into downloading the updated image.
	  // Without this fix, a cached image would probably be used
	  // and the program would appear not to be working.
	  echo "<p><img src=\"06pieCreate.php?time=" . time() . "\"></p>"; 
	?>
      
      <p><strong><font color="#FF0000">Homework:</font></strong> Create
      an interactive bar chart.</p>

      <p><strong>This is the HTML code needed to display the image and get the pie slice sizes from the user.</strong></p>
      <?php dump_page("06pie.php"); ?>
      <p><strong>This is the PHP code needed to generate the pie chart.</strong></p>
      <?php dump_page("06pieCreate.php"); ?>
</td>
</tr>
</table>

</body>
</html>

This is the PHP code needed to generate the pie chart.


<!-- Here is the page source code for 06pieCreate.php -->

<?php
  session_start();    // Parameters will be passed using session variables.
                      // Parameters, in this case, are the numbers that control the size of the slices of pie.

  // EXTRACT DATA POSTED TO THIS PAGE IN THE SESSION VARIABLE ARRAY
  $n1 = $_SESSION['n1'];
  $n2 = $_SESSION['n2'];
  $n3 = $_SESSION['n3']; 
  $n4 = $_SESSION['n4']; 
  $n5 = $_SESSION['n5']; 

  // ================================================================================================
  // This function draws two lines at the correct angle and an arc. This makes a cake/pie slice.
  // This outline is flood filled.
  // ================================================================================================
  function arc($image, $centreX, $centreY, $radius, $startAngle, $endAngle, $colour)
  {
    imagefilledrectangle($image, $centreX - 3, $centreY - 3, $centreX + 3, $centreY + 3, $colour);

    $angle =  2 * pi() * $startAngle / 360;    // degrees converted to radians
    imageline($image, $centreX, $centreY, $centreX + $radius * cos($angle), $centreY + $radius * sin($angle), $colour);
    imagefilledrectangle($image, $centreX + $radius * cos($angle) - 3, $centreY + $radius * sin($angle) - 3, 
                                 $centreX + $radius * cos($angle) + 3, $centreY + $radius * sin($angle) + 3, $colour);
	
    $angle =  2 * pi() * $endAngle / 360;    // degrees converted to radians
    imageline($image, $centreX, $centreY, $centreX + $radius * cos($angle), $centreY + $radius * sin($angle), $colour);
    imagefilledrectangle($image, $centreX + $radius * cos($angle) - 3, $centreY + $radius * sin($angle) - 3, 
                                 $centreX + $radius * cos($angle) + 3, $centreY + $radius * sin($angle) + 3, $colour);
	
    imagearc($image, $centreX, $centreY, 2 * $radius, 2 * $radius, $startAngle, $endAngle, $colour);
	  
    $fillAngle =  2 * pi() * (($startAngle + $endAngle) / 2) / 360;    // degrees converted to radians
    imagefill($image, $centreX + (2 * $radius / 3) * cos($fillAngle), $centreY + (2 * $radius / 3) * sin($fillAngle), $colour);
  }
  // ================================================================================================

  header( "Content-type: image/png");                       // Tells the browser to expect a png image
  
  // CREATE THE IMAGE (500 across by 600 down)
  $image = imagecreate(500, 600);                           // Create a new 500 x 600 image
  
  // SET UP SOME COLOURS
  $yellow  = imagecolorallocate($image, 255, 255,   0);      // create color R=255, G=255, B=0
  $cyan    = imagecolorallocate($image,   0, 255, 255);      // create color R=0, G=255, B=255
  $red     = imagecolorallocate($image, 255,   0,   0);      // create color red
  $blue    = imagecolorallocate($image,   0,   0, 255);      // create color blue
  $lime    = imagecolorallocate($image,   0, 255,   0);      // create color lime
  $magenta = imagecolorallocate($image, 255,   0, 255);      // create color magenta
  
  // DRAW SOME SHAPES
  imagefilledrectangle($image,  0,  0, 500, 600, $cyan);    // create cyan background
  imagefilledrectangle($image, 10, 80, 490, 590, $yellow);  // create inner yellow rectangle 
  imagerectangle      ($image,  5,  5, 495, 595, $red);     // create red frame
  
  // DISPLAY SOME TEXT
  imagestring($image, 5, 15, 1 * 20, "The input numbers were : $n1  $n2  $n3  $n4  $n5", $red);
  imagestring($image, 5, 15, 2 * 20, "Sometimes flood fill messes up in this program.", $red);
  imagestring($image, 5, 15, 3 * 20, "Fix it by using imagefilledarc() with GD >= 2.0.1", $red);
  
  // Add up input data to find total amount.
  $total = $n1 + $n2 + $n3 + $n4 + $n5;
  
  if (($n1 < 0) or ($n2 < 0) or ($n3 < 0) or ($n4 < 0) or ($n5 < 0))
  {
    // Error message for invalid negative input data
    imagestring($image, 5, 15, 10 + 4 * 20, "Negative inputs are not allowed.", $red);
  }
  else if ($total == 0)
  {
    // Error message for invalid input data
    imagestring($image, 5, 15, 10 + 4 * 20, "Input data missing or totalled zero.", $red);
  }
  else
  {
    $startAngle = 0;                                           // 3 o'clock on the pie chart
    $endAngle   = $StartAngle + 360 * $n1 / $total;            // The fraction $n1 is of a complete circle
    arc($image, 250, 350, 200, $startAngle, $endAngle, $red);  // centreX, centreY, radius, startAngle, endAngle, colour
	
    $startAngle = $endAngle;
    $endAngle   = $endAngle + 360 * $n2 / $total;  
    arc($image, 250, 350, 200, $startAngle, $endAngle, $blue); // centreX, centreY, radius, startAngle, endAngle, colour
	    
    $startAngle = $endAngle;
    $endAngle   = $endAngle + 360 * $n3 / $total;  
    arc($image, 250, 350, 200, $startAngle, $endAngle, $lime); // centreX, centreY, radius, startAngle, endAngle, colour
    
    $startAngle = $endAngle;
    $endAngle   = $endAngle + 360 * $n4 / $total;  
    arc($image, 250, 350, 200, $startAngle, $endAngle, $cyan); // centreX, centreY, radius, startAngle, endAngle, colour
	  
    $startAngle = $endAngle;
    $endAngle   = $endAngle + 360 * $n5 / $total;  
    arc($image, 250, 350, 200, $startAngle, $endAngle, $magenta); // centreX, centreY, radius, startAngle, endAngle, colour
  }

  imagepng($image);                                               // Save image to file.

  imagedestroy($image);                                           // Cleanup memory  
?>