Grafici Dinamici in PHP

Con le librerie grafiche GD di PHP è estremamente semplice creare dei disegni e possiamo anche sfruttare MySQL per gestire i dati che andranno a formare il nostro grafico che attraverso le informazioni date dall'utente possiamo creare dei bellissimi grafici dinamici.

Qualche mese fa avevamo introdotto il disegno di semplici forme, in particolare avevamo visto un cerchio, utilizzando le librerie grafiche GD di PHP, in questo nuovo articolo vedremo come sfruttare queste conoscenze per realizzare un semplice grafico dinamico prelevando i dati da una tabella MySQL.
Innanzitutto dobbiamo creare il database che andrà ad ospitare i nostri dati, una tabella molto semplice con i punti del grafico, possiamo inserire un campo x ed un campo y di tipo intero. Ora non ci resta che preparare il form per far inserire i dati al nostro utilizzatore, dobbiamo anche porre dei limiti, diciamo 400 punti in ascissa ed altrettanto in ordinata.

<?php

  // Raccolgo i dati
  $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)
	{
	   // Apro la connessione alla tabella punti
                nel database grafico ed inserisco i valori
           $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>Un Grafico Dinamico</title></head>

<body bgcolor="#C0C0C0">

   <h1 align="center"
       style="color:#444444;font-family:trebuchet,Tahoma,
       Verdana;font-size:14px;font-weight:bold">
	Un Grafico Dinamico con le Librerie GD
   </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 'I valori dei punti devono essere superiori
                a zero!';
	   break;
	case 2:
	   echo 'I valori dei punti devono essere inferiori
                a 400!';
	   break;
	}

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

?>

	<div align="center"><img src="piano.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>Inserire l'ascissa:
	   <input type="text" name="x" value="0"
              title="Inserire l'ascissa del punto">
	   </td>
	   <td width="400" height="100" align="center"
              valign="middle">
	   <label>Inserire l'ordinata:
	   <input type="text" name="y" value="0"
             title="Inserire l'ordinata del punto">
	   </td>
	</tr>
	<tr>
	   <td height="100" colspan="2" align="center"
               valign="middle">
	   <input type="submit" name="invia"
              title="Click qui per inviare i valori"
                   value="Memorizza">
	   </td>
	</tr>
	</table>
	</form>

</body>

</html>

Questo sopra è il codice della pagina che richiama l’immagine GD, si nota come all’inizio prendo i dati delle variabili e quando ho più di un punto comincio a disegnare le rette, come è possibile evincere dal codice della pagina del disegno.

<?php

	// Apro la connessione dati per prelevare i dati
	$my_server = mysql_connect("localhost", "root", "") or
            trigger_error(mysql_error(),E_USER_ERROR);
	mysql_select_db("grafico", $my_server);
	$query = "SELECT * FROM punti";
	$my_punti = mysql_query($query, $my_server) or
            die(mysql_error());
	$row_punti = mysql_fetch_assoc($my_punti);
	$num_punti = mysql_num_rows($my_punti);

	// Preparo per il disegno
	$img = imagecreate(400, 400);
	$clr_sfondo = imagecolorallocate($img, 192, 192, 192);
	imagefill($img, 0, 0, $clr_sfondo);
	$clr_linea = imagecolorallocate($img, 0, 0, 0);

	// Disegno i punti e li collego
	for ($i = 1; $i < $num_punti; $i++)
	{
		$x0 = $row_punti['x'];
		$y0 = $row_punti['y'];

		$row_punti = mysql_fetch_assoc($my_punti);

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

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

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

?>

Questo sopra è il codice della pagina che ho chiamato “piano.php” che è quella che disegna l’immagine con le librerie GD. Se avete seguito i miei articoli passati potrete notare come sia semplice creare dei grafici dinamici in PHP. Da ora potrete esercitarvi ed anche sbizzarrirvi con la creazione di disegni che provengono da dati che risiedono su un database MySQL. Come sempre io vi fornisco i mattoni e poi voi con curiosità e voglia di sperimentare fate il resto.

Giampaolo Rossi
Giampaolo Rossi

Sviluppatore di software gestionale da oltre 28 anni.

Articoli: 324
Creative Commons License
Except where otherwise noted, the content on this site is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.