I grafici, attraverso l’uso di forme e colori, sono un utile strumento per mostrare in maniera riassuntiva i dati.
In PHP esistono diverse librerie che permettono di creare grafici in maniera veloce, senza dover scontrarsi con le difficoltà della manipolazione delle immagini.
Tra le varie alternative che ho analizzato, in questo articolo voglio recensirne due in particolare, la prima, pChart è realizzata in PHP ed è un insieme di librerie stand-alone, cioè possono essere scaricate ed utilizzate direttamente; la seconda, Google Chart Tools, sono un insieme di API utilizzabili con Javascript.
pChart
pChart è un framework orientato agli oggetti scritto in PHP. Per essere utilizzato è necessario avere installata libreria GD sul proprio web server. Un vantaggio importante di questo framework è di essere free ed open source. La velocità di rendering è stata ottimizzata elaborando un algoritmo di aliasing ad alte prestazioni.
Utilizzo
Per brevità, mostrerò solo due esempi di grafici che è possibile realizzare con questa liberia, per un insieme completo vi consiglio di visitare la gallery ufficiale
Esempio 1:
Per ottenere un grafico a torta esploso è sufficiente il seguente codice:
<?php // Inclusione delle librerie include("pChart/pData.class"); include("pChart/pChart.class"); // Definizione del Dataset $DataSet = new pData; // array dei valori $DataSet->AddPoint(array(10,2,3,5,3),"Serie1"); // array con le etichette dei valori $DataSet->AddPoint(array("Jan","Feb","Mar","Apr","May"),"Serie2"); $DataSet->AddAllSeries(); $DataSet->SetAbsciseLabelSerie("Serie2"); // Inizializzazione del grafico $Test = new pChart(340,250); $Test->setFontProperties("Fonts/tahoma.ttf",10); $Test->drawFilledRoundedRectangle(7,7,333,243,5,240,240,240); $Test->drawRoundedRectangle(5,5,335,245,5,230,230,230); // Disegna il grafico a torta $Test->AntialiasQuality = 0; $Test->setShadowProperties(2,2,200,200,200); $Test->drawFlatPieGraphWithShadow($DataSet->GetData(),$DataSet->GetDataDescription(),130,130,80,PIE_PERCENTAGE,8); $Test->clearShadow(); // Inserisce il titolo $Test->drawTitle(100,20,"Test Pie Graph",0,0,0); // Inserisce la legenda $Test->drawPieLegend(270,15,$DataSet->GetData(),$DataSet->GetDataDescription(),250,250,250); // salva il file con l'immagine $Test->Render("piechart.png"); // se invece si vuole mostrare direttamente l'immagine senza salvarla su disco, commentare la riga precedente e scommentare quella seguente //$Test->Stroke(); ?>
Esempio 2:
Invece, per creare un grafico a linee, ad esempio per la temperatura media giornaliera:
<?php // Inclusione delle librerie include("pChart/pData.class"); include("pChart/pChart.class"); // Definizione del Dataset $DataSet = new pData; $DataSet->AddPoint(array(-5,0,7,10,10,11,12,14,16,17,18,18,19,19,18,15,12,10,9),"Serie1"); $DataSet->AddPoint(array(10,11,11,12,12,13,14,15,17,19,22,24,23,23,22,20,18,16,14),"Serie2"); $DataSet->AddPoint(array(4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22),"Serie3"); $DataSet->AddAllSeries(); $DataSet->RemoveSerie("Serie3"); $DataSet->SetAbsciseLabelSerie("Serie3"); $DataSet->SetSerieName("January","Serie1"); $DataSet->SetSerieName("February","Serie2"); $DataSet->SetYAxisName("Temperature"); $DataSet->SetYAxisUnit("°C"); $DataSet->SetXAxisUnit("h"); // Inizializzazione del grafico $Test = new pChart(700,230); $Test->setFontProperties("Fonts/tahoma.ttf",8); $Test->setGraphArea(60,30,680,180); $Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240); $Test->drawRoundedRectangle(5,5,695,225,5,230,230,230); $Test->drawGraphArea(255,255,255,TRUE); $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,90,2); $Test->drawGrid(4,TRUE,230,230,230,50); // Disegna la linea dello 0 $Test->setFontProperties("Fonts/tahoma.ttf",6); $Test->drawTreshold(0,143,55,72,TRUE,TRUE); // Disegna la linea del grafico $Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription()); $Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255); // Inserisce la legenda $Test->setFontProperties("Fonts/tahoma.ttf",8); $Test->drawLegend(70,40,$DataSet->GetDataDescription(),255,255,255); // Inserisce il titolo $Test->setFontProperties("Fonts/tahoma.ttf",10); $Test->drawTitle(60,22,"Temperature",50,50,50,585); // salva il file con l'immagine $Test->Render("linegraph.png"); // se invece si vuole mostrare direttamente l'immagine senza salvarla su disco, commentare la riga precedente e scommentare quella seguente //$Test->Stroke(); ?>
Pro e Contro
Vantaggi:
- libreria stand-alone
- grafica altamente personalizzabile
- possibilità di creare numerosi tipi di grafico
Svantaggi:
- i grafici non sono interattivi
- è necessario dimensionare ogni oggetto contenuto nell’immagine
Google Chart Tools
Questo strumento messo a disposizione da Google permette di creare rapidamente grafici semplici e interattivi.
Le API sono utilizzabili attraverso Javascript, perciò possono essere utilizzate in tutti i contesti web, indipendentemente dal linguaggio server-side.
Una delle maggiori potenzialità offerte supera il mero scopo di creare grafici standard, perchè si possono generare ad esempio, mappe mondiali divise per stati e regioni con colori per intensità, organigrammi e altro ancora.
Utilizzo
Per avere un raffronto diretto con la precedente soluzione, presenterò le stesse tipologie di grafico.
Esempio 1:
Per ottenere un grafico a torta esploso è necessario il seguente codice:
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["piechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows([ ['Jan', 10], ['Feb', 2], ['Mar', 3], ['Apr', 5], ['May', 3] ]); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, { width: 400, height: 240, is3D: true, title: 'Test Pie Graph', titleFontSize: 14, legend: 'right', legendBackgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} }); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Esempio 2:
Invece, per creare un grafico a linee, ad esempio per la temperatura media giornaliera:
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["linechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Temperaure'); data.addColumn('number', 'Jan'); data.addColumn('number', 'Feb'); data.addRows([ ['4h', -5, 10], ['5h', 0, 11], ['6h', 7, 11], ['7h', 10, 12], ['8h', 10, 12], ['10h', 11, 13], ['11h', 12, 14], ['12h', 14, 15] ]); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, { width: 500, height: 240, legend: 'right', title: 'Temperaure' }); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Pro e Contro
Vantaggi:
- è interattivo: cliccando sui punti o aree del grafico si aprono dei tooltip con le indicazioni sui valori
- non necessita di PHP: queste API si utilizzano con Javascript
- non è necessario configurare le dimensioni di ogni singolo oggetto contenuto all’interno, ma soltanto le dimensioni complessive dell’immagine
Svantaggi:
- le API sono utilizzabili soltanto se connessi a Internet, quindi non è possibile integrarle in sistemi su reti private offline
- i testi contenuti nei tooltip non sono configurabili
Demo
La demo è consultabile a questa pagina
Download
Il pacchetto completo è scaricabile QUI
Risorse
http://pchart.sourceforge.net/
http://code.google.com/intl/it-IT/apis/charttools/
Grazie!!!! Mi e’ stato veramente utile. Avrei voluto almeno farti qualche click ma non ho visto ADS… Alla prossima!
mi fa piacere che ti sia stato d’aiuto!
cmq ho scelto di non mettere pubblicità sul blog x dargli un pò più di professionalità 😉
+1 Ottimo tutorial!!
Ma sei un figo! Ho cercato per 3 ore un grafico degno di chiamarsi tale da mettere nel mio sito, questo è modificabilissimo e intelligibilissimo!
Grazie mille, per davvero.
Buongiorno Andrea.
Tra i due la sua preferenza va a…?
Ottimo lavoro, grazie!