Generare grafici interattivi con le Google Visualization API

Nella prima puntata vi abbiamo illustrato come creare semplici grafici tramite le Google Image Charts API. Queste si sono dimostrate una scelta eccellente per tutte quelle situazioni in cui sia necessario generare un grafico statico, non interattivo, in quanto generano semplicemente un’immagine in formato PNG da includere nella propria applicazione web.

I Google Chart Tools, o Visualization API, sono una naturale evoluzione di questa tecnologia, le funzionalità aggiuntive infatti sono considerevoli:

uso massiccio di Javascript e, se disponibile, HTML5;
interattività dei grafici;
uno strato di programmazione che consente di estendere la libreria con nuove sorgenti di dati e nuovi tipi di grafici;
API per la comunicazione fra i vari componenti (widget grafici, browser, server), per realizzare componenti AJAX altamente interattivi.

Nonostante tutta questa potenza, l’utilizzo di questi strumenti è piuttosto semplice, anche se sicuramente più macchinoso rispetto alle Chart Image API. Per aiutare gli sviluppatori a prendere confidenza con queste API, Google ha creato un strumento apposito chiamato Playground, tramite il quale è possibile sperimentare tutte le API di tipo Javascript fornite dal gigante di Mountain View.

Come creare un grafico interattivo

Il modo più semplice per gestire tutte le API Javascript di Google (non solo le Visualization API) è sicuramente l’utilizzo di della libreria Google Loader, inserendo questa istruzione nella sezione <head> della pagina HTML:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Tramite il loader, quindi, si carica la libreria che ci interessa con questa istruzione:

google.load('visualization', '1.0', {'packages':['corechart']});

Vediamo quindi un esempio completo, basato sugli stessi dati che abbiamo utilizzato nella scorsa puntata:

<html>
  <head>
    <!-- Includi Google Loader-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Carica le librerie necessarie
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Imposta la callback da chiamare una volta che tutte le librerie sono pronte
      google.setOnLoadCallback(drawChart);

      function drawChart() {
        // Crea il dataset
        var data = new google.visualization.DataTable();
        var raw_data = [
          ['Prodotto X', 10.0, 50.2, 60.6, 40.3],
          ['Prodotto Y', 80.5, 65.1, 70.8, 40.0]
        ];
        var periodi = ['gen-mar', 'apr-giu', 'lug-set', 'ott-dic'];

        data.addColumn('string', 'Periodo');
        for (var i = 0; i  < raw_data.length; ++i) {
          data.addColumn('number', raw_data[i][0]);
        }

        data.addRows(periodi.length);

        for (var j = 0; j < periodi.length; ++j) {
          data.setValue(j, 0, periodi[j]);
        }

        for (var i = 0; i  < raw_data.length; ++i) {
          for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);
          }
        }

        // crea il grafico
        new google.visualization.BarChart(document.getElementById('chart')).
            draw(data,
                 {title:"Riepilogo vendite",
                  width:600, height:400,
                  vAxis: {title: "Periodo"}}
            );
      }
    </script>
  </head>

  <body>
    <!-- elemento che conterrà il grafico -->
    <div id="chart"></div>
  </body>
</html>

Il risultato è un grafico a barre orizzontale piuttosto tradizionale, anche se comunque molto gradevole graficamente. L’aspetto più innovativo però è che non si tratta più di un oggetto statico, passando con il mouse sopra le varie barre infatti abbiamo un feedback visivo con dei tooltip che indicano il valore corrispondente; inoltre cliccando sulla colonna questa verrà evidenziata. Ecco uno screenshot:

Sostituendo google.visualization.BarChart con google.visualization.PieChart otterremo, utilizzando gli stessi dati, un grafico a torta riepilogativo:

Come creare un grafico interattivo

Links