Grafici Dinamici con PHP e MySql (1)

In questo articolo vi spiego come utilizzare PHPGraphLib un utilissima libreria in PHP per creare grafici dinamici da qualsiasi fonte di dati (in questo caso un databse MySql) che implemento in molte delle applicazioni web che mi trovo a sviluppare

Potete scaricare la libreria direttamente da questa pagina.
In questo zip trovate due file uno phpgraphlib.php è per creare i normali istogrammi invece con l’altro phpgraphlib_pie.php come suggerisce il nome potrete creare grafici a torta, in entrambi i casi avrete la possibilità di personalizzare dimensioni, colori e aspetto.
In questa guida vedremo come creare un istogramma.

Istogramma

Vi spiego riga per riga, poi infondo ho raccolto il sorgente intero. Iniziamo includendo la libreria

include("phpgraphlib.php");

ora creiamo un nuovo oggetto grafico di nome $graph di dimensionsi 600×500

$graph=new PHPGraphLib(600,500);

ora dobbiamo preparare i dati da mettere sul grafico in un array dove l’indice rappresenterà i valori delle ascisse (l’asse orizzontale) e i valori dell’array andranno sull’asse delle ordinate (l’asse verticale) quindi per esempio con l’array successiva avremo sulle ascisse 0, 1 ,2 ,3 , … e sulle ordinate il valore corrispondente 12124, 5535, …

$data=array(12124,5535,43373,22223,90432,23332,15544,24523,32778,38878,28787,33243,34832,32302);

invece in questo caso sull’asse orizzontale avremo i mesi e sull’asse verticale i valori, attenzione che con i valori negativi le barre dell’istogramma andranno verso il basso

$data=array("Jan"=>1324, "Feb"=>1200, "Mar"=>100, "Apr"=>1925, "May"=>1444, "Jun"=>-10, "Jul"=>364, "Aug"=>221, "Sep"=>-30, "Oct"=>848, "Nov"=>719, "Dec"=>114);

ma se vogliamo che il nostro grafico sia dinamico dobbiamo ricavare i dati da un database, per prima cosa ci connettiano al database (fra poco farò una guida al riguardo):

include('connection.php');

ricavando i dati dal database ovviamente abbiamo infinite possibilità come esempio vi riporterò un grafico in cui conteremo le persone presenti nel nostro database a seconda dell’anno di nascita. Supponendo che abbiamo una tabella di nome “elenco” andiamo a prendere tutti i valori del campo “AnnoNascita” in ordine decrescente e mano mano che li scorriamo finche non sono finiti per ogni dato incrementiamo il valore dell’array con indice l’anno di quel campo.

$query = mysql_query("SELECT AnnoNascita FROM elenco ORDER BY AnnoNascita DESC");
while($result_row = mysql_fetch_array($query))
$data[$result_row['AnnoNascita']]++;

ora che abbiamo preparato i dati, dobbiamo passarli al grafico:

$graph->addData($data);

poi possiamo impostare un titolo da assegnare al grafico

$graph->setTitle("Valori casuali per ogni mese");

impostiamo il colore del testo a rosso

$graph->setTextColor("red");

e infine creaiamo il grafico

$graph->createGraph();

ora vediamo il codice completo del file grafico.php, con questo codice la libreria deve essere nella stessa cartella di questo file:

include("phpgraphlib.php");
$graph=new PHPGraphLib(600,500);
$data=array("Jan"=>1324, "Feb"=>1200, "Mar"=>100, "Apr"=>1925, "May"=>1444, "Jun"=>-10, "Jul"=>364, "Aug"=>221, "Sep"=>-30, "Oct"=>848, "Nov"=>719, "Dec"=>114);
$graph->addData($data);
$graph->setTitle("Valori casuali per ogni mese");
$graph->setTextColor("red");
$graph->createGraph();

I grafici creati hanno il formato png, possiamo includerli nelle nostre pagine in questo modo

<img src="grafico.php" alt="grafico" />

di seguito alcune delle altre possibilità di personalizazzione a disposizione, per una più accurata spiegazione vi lascio alla documentazione ufficiale della libreria. Ma per ogni richiesta non esitate a chidermi. Prossimamente farà un altra guida per i grafici a torta.

$graph->setGrid(false); //con false nasconse la griglia di default è true
$graph->setBackgroundColor("black"); //imposta il colore di sfondo
$graph->setLine(true); //con true mostra una linea che unisce i valori delle ordinate di default è impostato a false
$graph->setLineColor("yellow"); //imposta il colore della linea appena descritta
$graph->setDataPoints(true);//con true mostra dei pallini in corrispondenza dei valori
$graph->setDataPointColor("yellow");//imposta il colore dei pallini appena descritti
$graph->setBars(false);//con false nasconde le barre
$graph->setGoalLine(0,0025);//mostra una linea orizzontale in corrispondenza del valore indicato
$graph->setGoalLineColor("red");//imposta il colore di questa linea

per ulteriori esempi di codice vi rimando alla pagina ufficiale ma non esitate a chiedermi spiegazioni. Se questa guida vi è servita, piaciuta o lo avete trovata noiosa o incomprensibile fatemelo sapere.

Update

Alcuni hanno riscontrato problemi nell’utilizzo di questa libreria, provate a scaricare l’esempio di prova per vedere se vi funziona.

23 thoughts on “Grafici Dinamici con PHP e MySql (1)

  1. Ho trovato il tuo blog cercando una dritta sui grafici in PHP e lo trovo proprio utile… considerami tra i tuoi followers

  2. ciao, ho un problema nella visualizzazione del grafico,cioè:

    L’immagine “http://127.0.0.1:8888/Mucci/amministratore.php” non può essere visualizzata poiché contiene degli errori.

    cosa può essere?

  3. Ciao ho provato il codice del tuo esempio e funziona benissimo, pero se lo adatto al mio codice non riesco a visualizzare il grafico. Mi da come errore ” Undefined index: 15;50;80 on line 20″ dove 15,50;80 sarebbe il contenuto del file .csv che ho dentro la tabella del database( l’equivalente del tuo annoNascita) sapresti darmi una mano?

    • Grazie,ho già risolto..ho trovato la funzione nel file phpgrafhlib.php ora vorrei riuscire ad aumentare la grandezza delle etichette sulle assi x e y…

  4. Ciao lo stesso problema anche io degli altri, allora ho scaricato tutta la libreria completa dal sito http://www.ebrueggeman.com/phpgraphlib poi l’ho messa in una cartella a parte sul mio sito, richiamando poi tramite iframe l’index.php in una pagina del mio sito funziona con i dati statici, senza mettere la connessione a database. Se metto i dati dalla connessione a Mysql o includo il file di connessione da questo errore, è come se non accetta la creazione di un array in questo modo, premetto io utilizzo un ciclo for con select in mysql per tirare fuori il dato giusto e metterlo nell’array con l’indice giusto.

  5. Questo è il mio codice:
    ID;
    $Io = “N$Io”;
    $IMAX = mysql_query(“SELECT * FROM $Io A where ID = (select MAX(ID) from `$Io`)”);
    $IMAX = mysql_fetch_object($IMAX)->ID;
    for($i=1;;$i++)
    {
    $nodo = mysql_query(“SELECT Nodo FROM $Io where ID = ‘$i’”);
    $nodo = mysql_fetch_object($nodo)->Nodo;
    $ora = mysql_query(“SELECT Ora FROM $Io where ID = ‘$i’”);
    $ora = mysql_fetch_object($ora)->Ora;
    if($nodo==1)
    {
    $dato = mysql_query(“SELECT Temperatura FROM $Io where ID = ‘$i’”);
    $dato = mysql_fetch_object($dato)->Temperatura;
    $data[$ora] = $dato;
    }
    if($i==$IMAX) break;
    }
    mysql_close($connessione);
    $graph->addData($data);
    $graph->setTitle($titolo);
    $graph->setBars(false);
    $graph->setLine(true);
    $graph->setDataPoints(true);
    $graph->setDataPointColor(‘blue’);
    $graph->setDataValues(true);
    $graph->setDataValueColor(‘green’);
    $graph->createGraph();
    ?>

  6. Ciao io ho bisogno di salvare la posizione y nell’immagine di ogni dato su una variabile globale in modo da utilizzarla per creare le regioni sulle immagini, perchè voglio cliccare su un dato e apre una immagine nuova piu grande contenente il dato prima e quello dopo. Come posso fare?

  7. Ottima guida.
    Tutto ok per la creazione dei grafici.
    Ma come si fa ad inviare i grafici generati nel server in una mail tramite php?

    Possibile strada: salvare ogni grafico in una immagine
    poi allegare l’immagine nella mail.
    Ma come si fa ???
    Grazie in anticipo
    Alessio

  8. Ciao, ho dei grafici che proiettano dati presi da MySql. il mio problema è che vengono tagliati i picchi .. c’è un modo che non conosco per “affettare” le curve ?

  9. Buona giornata
    ho provato il programma per la gestione dei grafici e lo trovo molto ma molto efficiente e facile da lavorare.
    Mi domando però se sia possibile inserire, nella cima di ogni istogramma, il valore dell’istogramma stesso.
    Per esempio: Se creiamo un grafico sulla quantità di bimbi e bimbe inuna scuola è possibile inserire nella colonna dei maschi il numero e in quello delle femmine uguale?
    Grazie

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>