Javascript-форум - Анимировать диаграмму

Подскажите, пожалуйста, как анимировать данную диаграмму. Нужно, что бы столбики поднимались снизу вверх. Понимаю, что нужно поднимать значение высоты прямоугольника от нуля до "c" с помощью setInterval, но почему-то прокручивает очень быстро и просто выводит готовый результат.
http://learn.javascript.ru/play/fqnVR

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
	<script type="application/x-javascript" language="javascript">

var userDataD = {
    'user': {
		diagram1: {0: 20.1, 1: 9.1, 2: 13.8, 3: 11.9, 4: 13.2, 5: 7.21},
		diagram2: {0: 34.5, 1: 19.2, 2: 26.8, 3: 17.1, 4: 16.2, 5: 16.8}
    }
}

var colorsD = ['#9e508b', '#9aa14a'];

function drawDiagram() {
	var canvas = document.getElementById('cdiagram');
	if (canvas.getContext) {
	var ctx = canvas.getContext('2d');
	var x0 = y0 = 50;
	var width = canvas.width-100;
	var height = canvas.height-80;

	var stepY = Math.round(height / 40);
	var stepX = Math.round(width / 6);

	ctx.font = '9pt Arial, sans-serif';
	ctx.fillText("justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim", width/2+38, 55);
	ctx.fillText('justo, rhoncut', width/2+280, 70);
	ctx.rotate( (Math.PI / 180) * 270);
	ctx.fillText('Percentage (%)', -250, 25);
	ctx.rotate((Math.PI / 180) * 90);
		
	
	ctx.beginPath();
	ctx.strokeStyle = '#000';
		ctx.moveTo(x0, y0);
	ctx.lineTo(x0, height + y0);  // Ось У
	ctx.lineTo(width + x0, height + y0); //Ось Х
		ctx.moveTo(x0+10, y0-10);
	ctx.lineTo(x0+10, height + y0-10);
	ctx.lineTo(width + x0+10, height + y0-10);
	
	ctx.lineTo(width +x0+10, y0-10);

	var m = 0;
for (var i = x0; m <= 6; i += stepX) {  //значения координат Х
    m++;
    ctx.moveTo(i+10, height + y0-10);
	ctx.lineTo(i, height + y0);
    ctx.lineTo(i, height + y0 + 4);
	ctx.font = '12px sans-serif';
    ctx.fillText('Period ' + m, i+stepX/2-3, height + y0 + 15);
}
var n = 50;
for (var j = y0; n > 1; j += stepY*10) {   //значения координат У
    n -=10;
	ctx.moveTo(x0+10, j-10);
	ctx.lineTo(width + x0+10, j-10);	
	
    ctx.moveTo(x0+10, j-10);
    ctx.lineTo(x0, j);
	ctx.lineTo(x0 - 4, j);
    ctx.fillText(n, x0-20, j+3);
	
}
ctx.stroke();
ctx.closePath();
var lineNumber = -1;
ctx.lineWidth = 2;


for (var user in userDataD) {
for (var type in userDataD[user]) {
	lineNumber++;
	ctx.strokeStyle = colorsD[lineNumber];
	if (lineNumber > colorsD.length) lineNumber = 0;
	x0+=35;

for (var m in userDataD[user][type]) {
	var count = userDataD[user][type][m];
	var x = x0 + (m * stepX);
    var y = y0 + (height-count * stepY);
	var c = count*8;
	ctx.strokeRect (x-15, height+y0, 30, -c);
	
		var gradient = ctx.createLinearGradient(x, height+y0, x, y);

		gradient.addColorStop(0, colorsD[lineNumber]); 
		gradient.addColorStop(1, '#fff');
	ctx.fillStyle = gradient;

	ctx.fillRect (x-15, height+y0, 30, -c);

	ctx.fillStyle = 'black';
	ctx.fillText (count, x-10, y-20);
	
	if (x0 == 85)ctx.fillText ('*', x, y-5);
	}
	
}	
}

}
}
</script>
</head><body onload="drawDiagram()">
<canvas id="cdiagram" width="724" height="400">No Canvas</canvas>
</body>
</html>