Dynamic Graph in PHP

Posted on December 4, 2013 by giampy107

Draw simple shapes such as a circle, using the GD graphics library of PHP is very easy, especially in this new article we will see how to use these features to create a simple dynamic graph taking data from a MySQL table.
First we have to create the database that will accommodate our data, a very simple table with the points on the graph, we can insert a field x and y field of type integer. Now we just have to prepare your form to enter data to our user, we also need to set limits, say 400 points on the x and y axis.

<?php

  // Get data
  $sX = $_REQUEST['x'];
  $sY = $_REQUEST['y'];

  $nError = 0;
  if (strlen($sX) > 0 && strlen($sY) > 0)
  {
    if ($sX >= 0 && $sY >= 0)
    {
	  if ($sX <= 400 && $sY <= 400)
	  {
	    // I open the connection points to the table
	    // in the graph database and insert the values
            $my_server = mysql_connect("localhost", "root", "")
              or trigger_error(mysql_error(),E_USER_ERROR);
	    mysql_select_db("grafico", $my_server);
	    $query = "INSERT INTO punti (x, y) VALUES($sX, $sY)";
	    mysql_query($query, $my_server) or die(mysql_error());
	    mysql_close($my_server);
	  }
	  else
	   $nError = 2;
    }
    else
	  $nError = 1;
  }

?>

<html>
<head><title>Dynamic Graph</title></head>

<body bgcolor="#C0C0C0">

   <h1 align="center"
       style="color:#444444;font-family:trebuchet,Tahoma,
       Verdana;font-size:14px;font-weight:bold">
	A Dynamic Graph Using GD Library
   </h1>

<?php

	if ($nError > 0)
	   echo '<p align="center"
              style="color:#E70000;font-family:trebuchet,
              Tahoma,Verdana;font-size:14px;font-weight:normal">';

	switch ($nError)
	{
	case 1:
	   echo 'The values of the points must be greater than zero!';
	   break;
	case 2:
	   echo 'The point values must be less than 400!';
	   break;
	}

	if ($nError > 0)
		echo '</p>';

?>

	<div align="center"><img src="plane.php"></div>

	<br>

	<form action="#" method="POST" name="punti">
	<table width="800" border="0" align="center"
           cellpadding="0" cellspacing="0"
             style="border: 1px solid #666666">
	<tr>
	   <td width="400" height="100" align="center"
                valign="middle">
	   <label>Insert X Axis:
	   <input type="text" name="x" value="0"
              title="Insert X Axis of Point">
	   </td>
	   <td width="400" height="100" align="center"
              valign="middle">
	   <label>Insert Y Axis:
	   <input type="text" name="y" value="0"
             title="Insert Y Axis of Point">
	   </td>
	</tr>
	<tr>
	   <td height="100" colspan="2" align="center"
               valign="middle">
	   <input type="submit" name="invia"
              title="Click to send values"
                   value="SaveData">
	   </td>
	</tr>
	</table>
	</form>

</body>

</html>

This above is the code of the page that invokes the image of GD, is known as the beginning of the variables take the data and when I have more of a point to start drawing lines, as can be derived from the code page of the drawing.

<?php

	// I open the data connection to retrieve data
	$my_server = mysql_connect("localhost", "root", "") or
            trigger_error(mysql_error(),E_USER_ERROR);
	mysql_select_db("graph", $my_server);
	$query = "SELECT * FROM points";
	$my_points = mysql_query($query, $my_server) or
            die(mysql_error());
	$row_points = mysql_fetch_assoc($my_points);
	$num_points = mysql_num_rows($my_points);

	// Prepare drawing
	$img = imagecreate(400, 400);
	$clr_background = imagecolorallocate($img, 192, 192, 192);
	imagefill($img, 0, 0, $clr_background);
	$clr_line = imagecolorallocate($img, 0, 0, 0);

	// Drawing the points and connect them
	for ($i = 1; $i < $num_points; $i++)
	{
		$x0 = $row_points['x'];
		$y0 = $row_points['y'];

		$row_points = mysql_fetch_assoc($my_points);

		$x = $row_points['x'];
		$y = $row_points['y'];

		imageline($img, $x0, $y0, $x, $y, $clr_line);
	}

	mysql_free_result($my_points);
	mysql_close($my_server);
	imagepng($img);
	imagedestroy($img);

?>

This is the code of the page on which I called “plane.php” which is the one that draws the image with the GD library. If you have followed my past articles you will see how simple it is to create dynamic graphs in PHP. From now you can pick any exercise and also with the creation of designs that come from data residing on a MySQL database. As always I will I provide you with a brick and then curiosity and desire to experiment you do the rest.

This entry was posted in PHP. Bookmark the permalink.