Feb 232012
 

Riprendendo il post precedente potremmo aggiungere un’interessante integrazione: l’animazione al nostro grafico.

Questo significherà impostare nelle options la durata e l’easing dell’anomazione:


var options = {
width: 400,
height: 240,
animation:{duration: 1000,easing: ‘out’,},
vAxis: {minValue:0, maxValue:1200}
};

A questo punto impostiamo il nostro grafico a 0:


data.addRows([
['2008', 0, 0],
['2009', 0, 0],
['2010', 0, 0],
['2011', 0, 0]
]);

Predisponiamo un bottone sul quale mapperemo l’evento click:


var button = document.getElementById(‘button’);

e disbilitiamolo nell’esecuzione della funzione drawChart:


function drawChart() {
button.disabled = true;
google.visualization.events.addListener(chart, ‘ready’,
function() {button.disabled = false;});
chart.draw(data, options);
}

A questo punto sul click del bottone andiamo a modificare i value delle nostre righe che “cresceranno” con l’animazione prevista:


button.onclick = function() {
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);
drawChart();
}

Ecco il nostro grafico animato

Sorry, the comment form is closed at this time.