Javascript: creare grafici a barre e a torta con JIT

20 settembre 2011

In questo articolo parleremo di JIT (JavaScript InfoVis Toolkit), un framework Javascript che permette di creare grafici a partire dai nostri dati,in modo dinamico, con pochissime righe di codice Javascript.

Con JIT abbiamo la possibilità di generare diagrammi a barre, a torta e ad area. Le applicazioni sono moltissime, tra le demo sul sito ufficiale troviamo rappresentazioni di file system, alberi e grafi.

Figura 1 – JIT e i diagrammi
(clicca per ingrandire)

JIT e i Diagrammi

Una volta che si siamo resi conto delle potenzialità di JIT, passiamo ad osservare:

  • il formato dei dati necessario
  • il markup HTML
  • il codice Javascript

I tre grafici mostrati nella figura, utilizzano lo stesso di dato, cambia solo la classe utilizzata per rappresentarli. In questo esempio, visualizziamo i PIL dell’Italia, Francia e Germania dal 2003 al 2009 (la fonte dei dati, è google).

Il formato dei dati

Il nostro oggetto oggetto JSON, dovrà avere l’attributo values, ovvero un array di oggetti che a loro volta avranno due attributi: label e values. Nel codice allegato all’articolo, troviamo un JSON più complesso e dettagliato: qui esaminiamo l’essenziale necessario al JavaScript InfoVis Toolkit.

var json = {
    'values': [
    {
        'label': "LABEL DI QUESTA SERIE DI VALORI",
        'values': ["VALORE 1","VALORE 2","VALORE 3"]
    }]
};

Abbiamo detto che vogliamo rappresentare i PIL di Italia, Francia e Germania, quindi poniamo come primo oggetto il seguente:

{'label': 'PIL 2003', 'values': [1507, 1800, 2442] }

Adesso popoliamo i dati fino a raggiungere quelli del 2009. Il risultato dovrà somigliare a questo:

var json = {
    'values': [ { 'label': 'PIL 2003',  'values': [1507, 1800, 2442] },
	            { 'label': 'PIL 2004',  'values': [1728, 2061, 2745] },
				{ 'label': 'PIL 2005',  'values': [1778, 2147, 2788] },
				{ 'label': 'PIL 2006',  'values': [1863, 2266, 2919] },
				{ 'label': 'PIL 2007',  'values': [2116, 2594, 3329] },
				{ 'label': 'PIL 2008',  'values': [2297, 2854, 3635] },
				{ 'label': 'PIL 2009',  'values': [2113, 2649, 3330] }]
           };  

Altre rappresentazioni richiedono altri formati di dato, possiamo scoprirle tutte facendo riferimento al sito ufficiale.

Il markup HTML

La pagina HTML dovrà caricare i CSS, il toolkit e, come si vede, anche del codice per la compatibilità con Internet Explorer.

<!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>PieChart - Pie Chart Example</title>
        <link type="text/css" href="sample.css" rel="stylesheet" />
        <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
        <!-- JIT Library File -->
        <script language="javascript" type="text/javascript" src="jit.js"></script>
        <script language="javascript" type="text/javascript" src="sample.js"></script>
    </head>
    <body onload="init();">
        <div id="piechart"></div>
    </body>
</html>

Come prima cosa impostiamo il nostro CSS:

#piechart {
    position:relative;
    width:600px;
    height:600px;
    margin:auto;
    overflow:hidden;
}

Il nostro grafico apparirà all’interno di un quadrato di 600x600px.

Il codice Javascript

Una volta scritto il markup HTML e caricati i dati, occupiamoci del codice Javascript. Per rappresentare un grafico a torta, dobbiamo istanziare la classe $jit.PieChart e passarle come parametro un oggetto JSON di opzioni del diagramma. In questo articolo vediamo solo il valore injectInto, un dettaglio maggiore si vede sulla demo.

	var torta = new $jit.PieChart({
	    injectInto: "piechart"
	}); 

injectInto indica l’id dell’elemento HTML in cui verrà disegnato il grafico. Ma per disegnare il grafico, è necessario caricare i dati del JSON creato in precedenza.

    torta.loadJSON(json);

Ecco il risultato:

Figura 2 – jit in esecuzione

Jit in esecuzione

Arrivati alla fine, esaminiamo il codice completo:

function init(){
    var json = {
        'label': ['Italia', 'Francia', 'Germania'],
        
		'values': [ { 'label': 'PIL 2003', 'values': [1507, 1800, 2442] },
		            { 'label': 'PIL 2004', 'values': [1728, 2061, 2745] },
					{ 'label': 'PIL 2005', 'values': [1778, 2147, 2788] },
					{ 'label': 'PIL 2006', 'values': [1863, 2266, 2919] },
					{ 'label': 'PIL 2007', 'values': [2116, 2594, 3329] },
					{ 'label': 'PIL 2008', 'values': [2297, 2854, 3635] },
					{ 'label': 'PIL 2009', 'values': [2113, 2649, 3330] }]
        
    };
	
//    var torta = new $jit.AreaChart({
    var torta = new $jit.PieChart({
//    var torta = new $jit.BarChart({
  
        injectInto: 'piechart',
        labelOffset: 20,
        Label: {
            color:'#000'
        }
    });
    torta.loadJSON(json);
}

È importante notare che nel JSON definiamo anche le label dei dati. Se non lo facessimo, questi non verrebbero distinti gli uni dagli altri ed il risultato sarebbe il seguente:

Figura 3 – jit in esecuzione

Jit in esecuzione

Altra cosa da notare, è il colore delle label, di default sono bianche, meglio farle nere altrimenti si confondono con lo sfondo e non sono leggibili.

Ultimo elemento non banale di questo ultimo codice:

//  var torta = new $jit.AreaChart({
    var torta = new $jit.PieChart({
//  var torta = new $jit.BarChart({

Lasciamo volutamente commentate queste righe di codice per apprezzare la facilità d’uso dei diagrammi: possiamo rappresentare lo stesso JSON dei dati, passando dal PieChart ad un’AreaChart, quindi al BarChart, e così via.

Se vuoi aggiornamenti su Javascript: creare grafici a barre e a torta con JIT inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Javascript: creare grafici a barre e a torta con JIT

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy