Demo
Un po’ di storia
Quante volte vi è capitato di aver poco spazio sul vostro disco rigido e di voler sapere quali sono le cartelle che occupano maggior spazio? Avreste sicuramente desiderato uno strumento in grado di visualizzare queste informazioni in una forma facilmente comprensibile. Proprio a questo scopo, nel lontano 1990, un professore dell’Università del Maryland, Ben Shneiderman, creò le TreeMaps. Le TreeMaps visualizzano i dati sotto forma di rettangoli con aree proporzionali al loro valore e con colori di sfondo diversi.
Ecco a voi un plugin per jQuery nuovo di zecca che vi permetterà di mostrare TreeMap sul vostro sito a partire dai dati di una semplice tabella HTML o anche da altre fonti.
Come funziona
Il plugin consiste in un unico metodo treemap che, applicato ad un oggetto jQuery, lo sostituisce con la TreeMap generata a partire dai dati forniti.
Se l’oggetto jQuery contiene delle tabelle HTML, la funzione treemap estrarrà automaticamente i dati dalla tabella [1] e la sostituirà con una Treemap
Ecco un esempio:
Creare una Treemap di dimensioni 640x480 a partire dalle tabelle presenti nella pagina:
jQuery("table").treemap(640,480);
Se i dati in tabella non si trovano nella prima e nella seconda colonna (ed eventualmente nella terza per il colore) è possibile indicare quali siano le colonne contenenti i dati utili (opzioni labelCell, dataCell, colorCell):
Creare una Treemap di dimensioni 640x480 a partire dalle tabelle presenti nella pagina, prelevando le descrizioni dalla 3° colonna ed dati dalla 5°:
jQuery("table").treemap(640,480,{labelCell:2,dataCell,4});
Se volessi conservare la tabella di partenza sulla pagina, basterebbe indicare al plugin un elemento all’interno del quale creare la TreeMap (opzione target):
Creare una TreeMap di dimensioni 640x480 a partire dalla tabella avente l’id "dati" all’interno dell’elemento con id "mappa":
jQuery("table#dati").treemap(640,480,{target:"#mappa"});
Se l’oggetto jQuery contiene elementi diversi da tabelle, oppure si vuole pretrattare i dati prima della creazione della Treemap, è possibile fornire una funzione che dovrà occuparsi di estrarre i dati (opzione getData):
Creare una TreeMap a partire dai dati contenuti in un lista non ordinata
<ul>
<li>
<span class="desc">Descrizione</span>
<span class="dato">100</span>
</li>
<li>...</li>
...
</ul>
jQuery("ul").treemap(640,480,{getData:getDataFromUL});
function getDataFromUL(el) {
var data = [];
jQuery("li",el).each(function(){
var item = jQuery(this);
var row = [item.find("span.desc").html(),item.find("span.dato").html()];
data.push(row);
});
return data;
}La funzione getData prende in argomento l’elemento a cui è applicato il plugin e deve restituire una matrice in cui ogni elemento è a sua volta una matrice contenente la descrizione ed il valore del dato nella primo e nel secondo elemento rispettivamente (ed eventualmente un ulteriore dato nel terzo elemento rappresentato sotto forma di colore).
Ecco un esempio di matrice restituita da getData:
[
['descr1',1],
['descr2',2],
['descr3',3],
]Per la creazione di TreeMap gerarchiche, sarà sufficiente passare all’opzione getData una funzione che restituisce una matrice leggermente diversa dalla precedente. Al posto del valore, presente nel secondo elemento di ogni riga della matrice precedente, basterà assegnare una nuova matrice di dati, come mostrato di seguito.
[
['livello1',[
['livello1-dato1,1],
['livello1-dato2,2],
['livello1-dato3,3],
]
],
['livello2',[
['livello2-dato1,1],
['livello2-dato2,2],
['livello2-dato3,3],
]
],
['livello3',[
['livello3-dato1,1],
['livello3-dato2,2],
['livello3-dato3,3],
]
]
]La visualizzazione dei dati si presenta meglio se questi ultimi sono ordinati. il plugin Treemap può ordinare automaticamente i dati mediante l’opzione sort
jQuery("ul").treemap(640,480,{getData:getDataFromUL,sort:true});Un’ulteriore opzione (headHeight) consente di impostare l’altezza in pixel delle intestazioni dei gruppi gerarchici. Per disattivare le intestazioni sarà sufficiente impostare headHeight a 0
jQuery("ul").treemap(640,480,{getData:getDataFromUL,headHeight:0});Per impostare la larghezza in pixel dei bordi tra le celle è disponibile l’opzione borderWidth
Nel caso in cui i dati contengano anche il valore secondario per la rappresentazione dei colori dei rettangoli, è possibile mostrare una legenda dei colori mediante l’opzione legend. La legenda determina automaticamente se il dato secondario è un dato numerico o no, mostrando una legenda con un gradiente di colori nel primo caso o con una serie di colori discreti nel secondo.
jQuery("ul").treemap(640,480,{getData:getDataFromUL,legend:true});In maniera predefinita la descrizione dei valori della legenda è il dato secondario passato al plugin. Tuttavia è possibile impostare una funzione callback descriptionCallbackche può modificare generare delle descrizioni differenti a partire dal dato secondario.
jQuery("ul").treemap(640,480,{getData:getDataFromUL,descriptionCallback:generateDescription});
function generateDescription(val) {return "Valore: "+val;}Gli stili
Per attribuire degli stili alle TreeMaps create ecco le classi CSS da manipolare:
-
.treemapView
La classe dell’elemento che "contiene" la treemap. Per le treemaps gerarchiche, le celle dei livelli superiori contengono a loro volta un elemento con la classe.treemapView
-
.treemapSquare
La classe che contiene una "riga" di celle. La riga può essere orizzonatale o verticale
-
.treemapH,.treemapV
La classe che specifica l’orientamento di una riga
-
.treemapCell
La classe che individua le singole celle.
-
.treemapHead
La classe che individua le intestazioni dei gruppi di dati per le treemaps gerarchiche
-
.treemapLegend
La classe che individua la barra della legenda
-
.treemapLegendDescr
La classe che individua la descrizione di una voce della legenda
RSS 2.0
Mappa del sito
Area riservata