Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Javascript: creare grafici a barre e a torta con JIT

Sviluppare grafici in modo dinamico sfruttando le funzionalità del JavaScript InfoVis Toolkit
Sviluppare grafici in modo dinamico sfruttando le funzionalità del JavaScript InfoVis Toolkit
Link copiato negli appunti

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.

Ti consigliamo anche