I grafici permettono di mostrare a tutti i dati o risultati numerici in maniera più chiara tramite l'utilizzo di immagini e colori. PHP mette a disposizione diversi strumenti per creare automaticamente grafici a partire da dati testuali o conservati in banche dati: la potenza di questo linguaggio unito alle librerie grafiche GD permette di realizzare con poche righe di codice risultati davvero spettacolari.
Per i meno esperti ricordiamo che le GD (per esteso: GD Graphics Library) sono librerie appositamente scritte per la manipolazione delle immagini. Sono utilizzabili anche con PHP e supportano diversi formati: GIF, PNG, JPEG e BMP. Per chi usa PHP su Windows l'installazione di queste librerie è molto semplificata, basta infatti apporre una piccola modifica al file php.ini. Per maggiori dettagli sull'installazione delle librerie GD potete fare riferimento ad un articolo pubblicato su questo stesso sito.
La potenza di PHP e GD richiede una buona conoscenza del codice per creare anche i più semplici risultati e i programmatori meno esperti si troveranno quanto meno spiazzati. Qui vengono in aiuto le librerie "pre-confezionate" come PHPGraphLib. In questo articolo vedremo proprio come utilizzare la libreria PHPGraphLib per realizzare grafici con PHP, così da permettere a chi è alle prime armi di poter essere allo stesso livello dei professionisti.
La libreria PHPGraphLib
PHPGraphLib è una libreria, orientata agli oggetti, destinata alla creazione di grafici per l'inserimento di questi ultimi in pagine web. L'uso della libreria facilita il compito agli sviluppatori meno esperti anche perché include un sistema di gestione degli errori molto efficace. I risultati ottenibili con questa libreria sono veramente stupefacenti, la potenza del codice inserito nell'unica pagina di PHPGraphLib possono essere utilizzati al massimo, date le piccole dimensioni di quest'ultima.
Sul sito dell'autore possiamo trovare la pagina di download da dove scaricare la libreria, disporre della guida ufficiale e rimanere aggiornati sugli eventuali aggiornamenti.
Setup e prime operazioni
Come avrete già immaginato PHPGraphLib richiede la presenza delle librerie GD installate sul nostro web Server e una versione di PHP almeno 4 o superiore. L'inserimento della libreria PHPGraphLib all'interno dei nostri script avviene tramite un semplice include, come mostrato nella porzione di codice qui di seguito:
<?php
include("phpgraphlib.php");
Da inserire ovviamente come prima riga dello script.
Vediamo però più in dettaglio il resto del codice per poter creare il nostro primo semplice esempio. Inseriamo ora il richiamo delle funzioni che ci permettono di creare la griglia del grafico, inserire i dati relativi alle colonne, al titolo e al colore. Eccolo qui:
<?php //Grafico a barre verticali include("phpgraphlib.php"); //Impostiamo la dimensione della griglia del grafico (Larghezza, Altezza) $graph=new PHPGraphLib(500,400); //Inseriamo i dati relativi alle colonne del grafico, i valori che voliamo visualizzare $data=array("Luca"=>60, "Marco"=>20, "Dario"=>20); //Aggiungo i valori di cui sopra $graph->addData($data); //Imposto il titolo $graph->setTitle("Punti acquisiti"); //Imposto il colore del testo $graph->setTextColor("red"); //Creo il grafico $graph->createGraph(); ?>
Come potete vedere abbiamo inserito altre funzioni oltre alla più semplice (la prima) che ci permetteva solo di impostare i valori delle dimensioni della griglia. Nella pagina successiva il commento al codice.
La funzione addData($data) permette di inviare alla libreria i valori che vogliamo mostrare nel grafico, ovviamente i valori vengono passati tramite la variabile, un array, $data, impostata precedentemente. Abbiamo poi setTitle(STRINGA) e setTextColor(STRINGA), che servono rispettivamente per impostare il titolo del grafico e il colore del testo. Infine richiamiamo la nostra createGraph(), la quale ci restituisce in output l'immagine del grafico appena creato.
Per avere una comprensione migliore delle funzioni di base di questa libreria vi mostro in dettaglio il loro significato:
- $graph=new PHPGraphLib(500,400;): Accetta valori numeri non negativi, di default è impostato su larghezza=300, altezza=400;
- $data=array("Luca"=>60, "Marco"=>20, "Dario"=>20): I valori presenti in questo array sono relativi al valore dell'asse delle Y (nel nostro esempio è 60) e poi il relativo indice rappresenta il valore dell'asse delle X (nel nostro esempio è Luca). Se l'indice non viene inserito verrà mostrata la numerazione dell'array;
- $graph->setTitle("Punti acquisiti"): Accetta una semplice stringa alfanumerica, rappresenta il titolo del grafico;
- $graph->setTextColor("red"): Accetta i valori definiti dallo standard W3C per i colori.
Il risultato del nostro primo esempio sarà simile a questo:
Come potete vedere dall'immagine la "grafica del grafico", ci perdonerete il gioco di parole, è davvero scarna. Infatti al momento abbiamo visto solo come si può modificare il colore del testo. Nel prossimo capitolo della guida vi mostrerò alcune funzioni principali di questa libreria, tra cui quelle per la modifica delle varie colorazioni.
Prima però vorrei mostrarvi come creare un altro tipo di grafico, molto utilizzato nei diversi ambiti, il grafico a linee. In sostanza non cambia molto dall'esempio precedente, dobbiamo solo inserire alcune funzioni che segnalano alla libreria di elaborare i dati come grafico a linee e non a barre.
Ecco la prima parte del nostro secondo esempio:
<?php //Grafico a linee include("phpgraphlib.php"); //Impostiamo la dimensione della griglia del grafico (Larghezza, Altezza) $graph=new PHPGraphLib(500,400); //Inseriamo i dati relativi alle colonne del grafico, i valori che voliamo visualizzare $data=array("Luca"=>60, "Marco"=>20, "Dario"=>20); //Aggiungo i valori di cui sopra $graph->addData($data); //Imposto il titolo $graph->setTitle("Punti acquisiti");
Come potete vedere è del tutto simile alla prima parte dell'esempio precedente, aggiungiamo ora il resto ed ecco il codice finale:
<?php //Grafico a linee include("phpgraphlib.php"); //Impostiamo la dimensione della griglia del grafico (Larghezza, Altezza) $graph=new PHPGraphLib(500,400); //Inseriamo i dati relativi alle colonne del grafico, i valori che voliamo visualizzare $data=array("Luca"=>60, "Marco"=>20, "Dario"=>20); //Aggiungo i valori di cui sopra $graph->addData($data); //Imposto il titolo $graph->setTitle("Punti acquisiti"); //Indichiamo alla libreria di non mostrare le barre $graph->setBars(false); //Di conseguenza segnaliamo che si tratta di un grafico a linee $graph->setLine(true); //Visualizza un bollino nel punto del valore indicato $graph->setDataPoints(true); //Indichiamo il colore del bollino $graph->setDataPointColor("yellow"); //Visualizza il valore del punto $graph->setDataValues(true); //Indichiamo il colore $graph->setDataValueColor("blue"); //Creo il grafico $graph->createGraph(); ?>
Dovreste ottenere qualcosa di identico all'immagine di seguito, ovviamente se non avete apportato modifiche.
Le funzioni che abbiamo aggiunto non penso abbiano bisogno di spiegazioni, anche per i meno esperti. Il commento di descrizione che ho inserito sopra ad ognuna è più che sufficiente.
Voglio però chiarire perché abbiamo dovuto segnalare alla libreria che non volevamo un grafico a barre ma a linee tramite la funzione $graph->setBars(false) e $graph->setLine(true). Il punto è che la libreria ha come valore fisso impostato questa funzione a TRUE, infatti nel primo esempio non abbiamo inserito né setBars() né setLine() ma ci è stato restituito, lo stesso, come output un grafico a barre. Ricordiamo che tutte e due le funzioni accettano solamente valori booleani, cioè solamente TRUE o FALSE.
Migliorare l'aspetto grafico
Ora passiamo a mostrare alcune funzioni interessanti di questa libreria. Per prima cosa vi mostro, come ho già accennato sopra, alcune funzioni per migliorare l'aspetto grafico del nostro output. Ecco come modificare le parti del grafico più importanti:
Colore della griglia: $graph->setGridColor("blue"); questa funzione accetta come parametro i valore dello standard W3C per i colori.
Impostiamo un colore di sfondo: $graph->setBackgroundColor("black"); come sopra la funzione accetta gli stessi parametri.
Per i grafici a barre esiste una funzione molto interessante per impostare il colore in tonalità sfumata. La funzione $graph->setGradient("green", "yellow"); permette di impostare due colori per indicare la tonalità di sfumatura della colorazione della barra del grafico e si ottiene veramente un ottimo risultato!
Passiamo ora a mostrare alcune funzioni utili per una migliore comprensione del nostro grafico.
Per inserire una linea di goal si usa $graph->setGoalLine(25); La linea di goal rappresenta quel limite che deve essere superato per raggiungere determinati obbiettivi nei nostri dati. La funzione accetta un valore numerico, si può inoltre impostare il colore di questa linea tramite $graph->setGoalLineColor("red");.
PHPGraphLib permette di visualizzare un range di valori del grafico. Fino adesso abbiamo visto che l'ultimo valore dell'asse Y era rappresentato dal valore più alto delle tre barre. Tramite la funzione $graph->setRange(70,0); possiamo invece impostare il grafico in modo che mostri, sull'asse Y, i valori che vanno da un massimo ad un minimo. La funzione però non accetta valori negativi, tutti i valori del grafico devono essere presenti nel range impostato ed infine i valori sono approssimati.
Bene direi che a questo punto abbiamo visto le funzioni principali. Ecco infine il risultato (dopo aver inserite le funzioni) di come può essere modificato il nostro primo esempio:
Ed ecco infine il codice senza commenti utilizzato per creare il grafico di figura 3:
<?php
include("phpgraphlib.php");
$graph=new PHPGraphLib(500,400);
$data=array("Luca"=>60, "Marco"=>20, "Dario"=>20);
$graph->addData($data);
$graph->setTitle("Punti acquisiti");
$graph->setTextColor("blue");
$graph->setGradient("teal", "aqua");
$graph->setGoalLine(25);
$graph->setGoalLineColor("red");
$graph->setRange(70,0);
$graph->setGridColor("black");
$graph->createGraph();
?>
Alcune accortezze
Siamo arrivati alla fine della guida. Abbiamo mostrato quasi tutta la potenzialità di PHPGraphLib ma ci sono ancora due o tre cose da aggiungere dire per migliorare la resa dei nostri script. Per prima cosa va ricordato che nel caso vi capiti di inserire alcuni errori nella compilazione delle funzioni e dei loro parametri la libreria immediatamente mostrerà il problema. Così da evitare, innumerevoli tentativi per capire dov'è il problema.
Per esempio se dovessimo inserire la funzione (in rosso l'errore) setBackgroundColor("grigio"), la libreria ci segnalerebbe immediatamente l'errore.
Come vedete, i meno esperti, possono stare tranquilli perché questa libreria ci aiuta veramente molto in ogni nostro passo.
Per finire vediamo come richiamare il grafico in una pagina HTML tramite il TAG <img /> il nostro grafico. Il codice di esempio è molto semplice:
<html> <head> <title>Il nostro grafico</title> </head> <body> <h2>Ecco il nostro grafico</h2> <img src="grafico_esempio.php" /> </body> </html>
