Grafici interattivi con Google Charts

Le Google Charts sono una serie di API che ci permettono di creare grafici interattivi in HTML5. Come si può notare dal sito ufficiale, gli oggetti a disposizione sono molti e vanno dai classici Pie Charts, fino a grafici più particolari come i Geo Charts. Questo post non vuole assolutamente essere esaustivo: sarà una semplice carrellata di esempi, i quali ci aiuteranno a capire qual’è il funzionamento generale del framework targato BigG. La sorgente dati dei vari grafici sarà questo JSON, generato sempre grazie al solito JSON-Generator, che rappresenta l’organigramma della ACME Corporation. Come potete vedere dal link i dati hanno la seguente forma:

Tra le informazioni che abbiamo sui dipendenti dell’ACME Corporation abbiamo ruolo, sesso e reddito annuo. Trasformeremo questi dati in un formato adatto a Google Charts utilizzando Underscore.js. Per chi non la conoscesse, si tratta di un’ottima libreria di utils per Javascript, in pratica è l’equivalente delle Apache Commons del mondo Java.

Pie Chart

Il nostro primo esempio sarà un grafico a torta. Rappresenterà la divisione maschi/femmine dei dipendenti.

Il risultato, visibile anche in questa live demo, è il seguente grafico.

Pie Chart

Pie Chart

Come si nota dal codice precedente, il fulcro di Google Charts è l’oggetto DataTable. Una DataTable è un insieme di righe e colonne, le quali avranno un significato diverso a seconda del grafico di cui diventeranno la sorgente dati. Nel nostro caso la prima colonna ‘Gender’ è la label che fa da legenda/tooltip del grafico, mentre la seconda è il valore effettivo con il quale viene costruito il Pie Chart. Il calcolo del numero totale di maschi e femmine, è affidata alla funzione _.each di Underscore.js. Una volta popolata la DataTable tramite il metodo addRow e instanziato un oggetto google.visualization.PieChart, semplicemente generiamo il grafico tramite la funzione draw.

Bar Chart

L’output del prossimo esempio sarà un Bar Chart: un grafico a bande orizzontali. Per ogni dipendente verrà visualizzato il suo reddito annuo.

Il risultato ottenuto è questo:

Bar Chart

Bar Chart

A differenza del caso precedente la DataTable ha tre colonne: all’ultima colonna abbiamo dato il ruolo di tooltip. Le righe questa volta sono state generate tramite la funzione _.map, che trasforma ogni elemento del JSON in un array. La terza colonna viene ripetuta, per essere poi processata da un NumberFormat ; in questo modo otteniamo il risultato che potete vedere nell’immagine. Inoltre in questo caso abbiamo un oggetto options più complesso: oltre a titolo e dimensione, abbiamo anche definito la posizione della legenda (nascosta) e varie proprietà degli assi. Vi rimando alla documentazione ufficiale per conoscere tutte le possibilità di configurazione dei vari charts.

Table Chart

Google Charts dispone anche di un grafico tabellare. In questo caso l’utilizzo della DataTable è intuitivo: definisce righe e colonne della tabella che vogliamo visualizzare.

Accedendo alla live demo, visualizzeremo questa tabella:

Organizational Chart

Table Chart

Organizational Chart

Nel precedente grafico abbiamo utilizzato l’attributo ‘boss’. Tale attributo indica, per ogni dipendente, il suo capo tramite una chiave esterna. Questa proprietà sarà il cardine del prossimo esempio: l’Organizational Chart. Come il nome lascia facilmente intuire, il suo scopo è quello di creare organigrammi. Come vedremo, la forma della DataTable è un po’ particolare: conterrà semplicemente un id e un riferimento all’id del nodo padre.  L’unica accortezza da osservare, quando si ha che fare con questo tipo di grafico, è il fatto che entrambe le colonne devono essere delle stringhe.

L’organigramma che otteniamo è questo:

 

Organizational Chart

Organizational Chart

Abbiamo detto che le colonne di una DataTable per un Organizational Chart rappresentano sempre degli id, eppure, il dato che viene visualizzato sull’organigramma è il nome dei vari dipendenti. Questo risultato si ottiene aggiungendo ad ogni riga della DataTable, non il dato nudo e crudo, ma un oggetto con due proprietà: v e f. L’attributo v ne indica il valore (ed effettivamente contiene l’id dell’impiegato), f  impone alla libreria come visualizzare tale dato.

Combo Chart

L’ultimo grafico che analizzeremo è il Combo Chart. Il Combo Chart ci permette di avere due serie di dati sullo stesso grafico. Questa volta, prima di analizzare il codice, partiamo dal risultato che otterremo: in questo modo analizzeremo meglio quali sono i dati necessari prima di procedere con la scrittura.

Combo Chart

Combo Chart

Il grafico ci mostra i redditi medi dell’azienda, divisi per sesso dell’impiegato e poi per ruolo ricoperto. Inoltre la linea nera ci mostra i redditi medi complessivi di uomini e donne. Il codice per ottenere il Combo Chart è il seguente:

Attraverso le funzioni enumerateRolescreateAverageRoleRow viene generata la seguente DataTable:

GenderDirectorProject ManagerTesterDeveloperUI DesignerSoftware engineerAverage
male100000600003500035000350004000050833.333333333336
female0550002500045000250005000033333.333333333336

La prima colonna (‘Gender’) indica la macro-divisione dei dati, le successive contengono i valori presenti nei due istogrammi. Per indicare qual è la sorgente dati del grafico secondario (la linea nera) utilizziamo l’attributo ‘series’, all’interno dell’oggetto options, in questo modo:

In sostanza imponiamo alle API di utilizzare la settima colonna (‘Average’), e di visualizzare questa serie con una linea.

Event Hangling

All’inizio di questo articolo, ho affermato che Google Charts è una libreria per creare grafici interattivi. Per ora l’unica feature interattiva è la presenza dei tooltip, che appaiono al mouseover sul grafico stesso. In realtà il framework ci mette a disposizione una gestione completa degli eventi tramite handler. L’evento di cui ci andremo a occupare è l’evento ‘select’, che scatta alla selezione di uno dei dati del grafico. Nel prossimo esempio visualizzeremo contemporaneamente due grafici, un Table Chart e un Organizational Chart, ai quali agganceremo degli handler.

Come potete vedere dalla live demo, le funzioni onTableSelectHandler e onOrgSelectHandler fanno si che quando clicco sul Table Chart, propago la selezione sull’Organizational Chart e viceversa.

Conclusioni

Google Charts è una libreria molto potente e versatile, che con poche righe ci permette di creare grafici di grande impatto. Tra le caratteristiche interessanti che abbiamo tralasciato ci sono, la possibilità di utilizzare uno spreadsheet di Google Docs come sorgente dati, e il poter creare delle vere e proprie dashboard di grafici. Il suo maggior pregio può però rivelarsi anche un difetto. Mi spiego meglio: la caratteristica più cool di questi grafici è quella di essere interattivi, per ottenere questo risultato l’output della funzione draw è un misto tra SVG, HTML e Javascript, quindi significa che quello che vedete a video non può essere facilmente traslato in un report engine come JasperReports. Ma se la creazione di grafici all’interno dei report, non è una necessità stringente per la vostra applicazione, allora utilizzatela senza troppi pensieri. Una possibile soluzione al problema precedente è l’utilizzo della vecchia Google Charts Image API. Una serie di servizi REST che permettono di ottenere dei grafici in formato PNG del tutto simili a quelli visti sino ad ora. Questa libreria è stata però deprecata e il suo mantenimento è assicurato solo fino ad aprile 2015. Il codice della live demo può essere scaricato dal mio GitHub.

La canzone di questo post è Magnetic Warrior degli Archie Bronson Outfit. Buon Ascolto.

Vai a Spotify

Flattr this!

Pubblicato in HTML, Javascript Taggato con: , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.