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)
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
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:
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:
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.
