Google Image Charts API è una soluzione molto comoda, semplice ed efficace per creare grafici su un sito web. Il servizio è completamente gratuito e utilizzabile anche su prodotti commerciali, anche se ovviamente ha delle limitazioni d’uso che impediscono alcuni utilizzi impropri, ad esempio non è possibile utilizzare le API al di fuori di siti web o in applicazioni client.
Come funziona
Il meccanismo per creare i grafici è incredibilmente semplice, ma nonostante questa semplicità consente di creare un innumerevole varietà di grafici, tutti molto gradevoli graficamente e di immediata comprensione. Il procedimento per ottenerli è il seguente:
- dopo aver scelto il tipo di grafico, i colori, eccetera, bisogna creare una URL verso l’indirizzo http://chart.apis.google.com/chart, con accodati tutti i parametri necessari;
- creare un tag <img> inserendo la URL definita sopra nell’attributo src.
Vediamo qualche esempio, partendo dal più classico grafico a barre:
La URL che lo genera è la seguente:
http://chart.apis.google.com/chart?chs=300×200&cht=bvg&chd=t:10,50,60,40&chbh=a
Analizziamo i parametri utilizzati:
- chs=300×200: specifica una dimensione di 300 x 200 pixel;
- cht=bvg: imposta il tipo a “grafico a barre con raggruppamento”;
- chd=t:10,50,60,40: specifica che i dati sono nel formato Basic Text Format, ovvero sono compresi fra 0 e 100;
- chbh=a: imposta la largezza automatica delle colonne. Senza questo parametro la larghezza verrebbe impostata di default a 23 pixel.
Cliccando sul link sopra, potrete verificare di persona come venga caricata un’immagine di tipo PNG nella finestra del browser; a questo punto è possibile addirittura modificare a piacimento i parametri e vederne immediatamente l’effetto sul grafico! Ciò è molto utile e aiuta a capire, tuttavia c’è un modo molto più semplice per sperimentare con le Image Chart API, ovvero utilizzare il comodo Chart Wizard presente nella documentazione stessa. Tramite questo strumento è possibile esplorare tutti i tipi di grafici e trovare quello giusto per i propri scopi.
Integrazione con PHP
L’estrema versatilità di questo approccio permette di dotare qualsiasi sito, in particolare quelli gestiti da PHP, Java o altro, di funzionalità di visualizzazione dinamiche, ovvero basate su dati che cambiano spesso.
Supponiamo ad esempio di avere un database contenente i dati di vendita di alcuni prodotti, con poche righe di PHP possiamo generare al volo il relativo report con grafico:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Esempio Google Image Chart API</title>
<style type="text/css">
table, th, td {
border: 1px solid #ccc;
}
table {
border-collapse: collapse;
}
td.number {
text-align: right;
font-family: "Courier New";
font-size: 10pt;
}
</style>
</head>
<body>
<?php
// array delle etichette
$labels = array('gen-mar', 'apr-giu', 'lug-set', 'ott-dic');
// categorie:
$categories = array('Prodotto X', 'Prodotto Y');
// array dei dati: ogni sotto-array contiene una delle due serie
$data = array(
array(10.0, 50.2, 60.6, 40.3),
array(80.5, 65.1, 70.8, 40.0)
);
// creazione della URL
$url = 'http://chart.apis.google.com/chart?';
// vari parametri del grafico (cfr. documentazione)
$url .= 'chtt=' . urlencode('Riepilogo vendite');
$url .= '&chxt=' . 'y,x';
$url .= '&chbh=' . 'a';
$url .= '&chs=' . '450x200';
$url .= '&cht=' . 'bvg';
$url .= '&chco=' . 'A2C180,FF9900';
// serie dei dati:
$url .= '&chd=t:';
// prima serie
$url .= implode(',', $data[0]);
// seconda serie
$url .= '|';
$url .= implode(',', $data[1]);
// etichette
$url .= '&chxl=1:|' . implode('|', $labels);
// crea una legenda
$url .= '&chdl=' . implode('|', $categories);
?>
<img src="<?echo $url;?>" width="450" height="200" />
<table style="width: 450px">
<thead>
<tr>
<th> </th>
<?php
foreach($labels as $label) {
echo '<th align="center">' . htmlspecialchars($label, ENT_NOQUOTES, 'UTF-8') . '</th>';
}
?>
</tr>
</thead>
<tbody>
<?php
for($i = 0; $i < sizeof($categories); $i++) {
?>
<tr>
<?php
echo '<th>' . htmlspecialchars($categories[$i], ENT_NOQUOTES, 'UTF-8') . '</th>';
foreach($data[$i] as $value) {
echo '<td class="number">' . $value . '</td>';
}
?>
</tr>
<?php
}
?>
</tbody>
</table>
<?
?>
</body>
</html>
Il risultato è un report immediato, facile da capire e gradevole dal punto di vista grafico:
Sviluppi
Come al solito Google, dopo aver creato un eccezionale strumento per gli sviluppatori, non si accomoda sugli allori ma spinge verso nuove e più avanzate tecnologie. Così è stato anche per le Chart API, che ora sono disponibili come liberie Javascript per creare addirittura grafici interattivi dotati di aree sensibili, popup e animazioni. Nel prossimo appuntamento vedremo come utilizzare anche queste.