Grafico animato con jQuery

In questa pillola vedremo come applicare un'animazione ad un ortogramma prendendo i valori dalla tabella correlata.

DEMO

Questa la funzione utilizzata:

function viewGraph(){
$('.column').css('height','0');
$('table tr').each(function(index) {
  var ha = $(this).children('td').eq(1).text();
  var h = ha.slice(0, -1)*2+"%";
  $('#col'+index).animate({height: h}, 1500).html("<div>"+ha+"</div>");
});
}

La funzione può essere eseguita al caricamento della pagina

$(document).ready(function(){
viewGraph();
});

e/o può essere associata al click su un elemento della pagina

<div onclick="viewGraph()" class="button">Rivedi</div>

I rettangoli dell'ortogramma sono stati ottenuti con dei <div> con classe .column con uguale larghezza e con altezza proporzionale al valore dei dati che devono rappresentare. Ad ogni div è stato dato un id contenente un numero progressivo: la prima colonna ha id col0, la seconda col1, etc. La prima riga della funzione azzera l'altezza di questi div, in modo che possa essere eseguita più volte senza dover ricaricare la pagina.

I dati sono contenuti in una tabella, in questo esempio nella seconda cella <td> di ogni riga <tr>. Il metodo each() di jQuery cicla tutte le righe della tabella cercando il valore text()contenuto nella seconda cella eq(1) (la prima cella ha valore 0) e lo memorizza nella variabile ha.

Questo potrebbe già essere sufficiente per costruire il grafico, ponendo la scala di riferimento al 100% (vedi demo su CodePen).
Nel nostro caso, visto che i valori sono tutti inferiori al 50% del totale, abbiamo deciso di visualizzarli dimezzando il range della scala graduata, con il valore massimo posto al 50%. Per questo motivo abbiamo ricalcolato il valore dell'altezza delle colonne: con slice(0,-1) abbiamo isolato il valore numerico della percentuale per rendere possibile la moltiplicazione; la variabile h contiene il valore percentuale raddoppiato.

La corrispondenza tra il valore percentuale della cella della riga in esame e l'id della relativa colonna del grafico è assicurata dal parametro index, un indice numerico che esprime la posizione del selettore.

Il metodo animate() di jQuery modifica in progressione l'altezza delle colonne, da 0 al valore memorizzato nella variabile, in 1.5 secondi (1500 ms). Al termine dell'animazione, con il metodo html(), viene inserito in ogni colonna un div contenente il valore percentuale corrispondente.

 
Per approfondire l'argomento:

• jQuery: il ciclo .each() in dettaglio - Gabriele Romanato