Creare grafici con PHP

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/