Code
<canvas id="canvas" height="200" width="400"></canvas>
<script type="text/javascript">
var values = [];
for (var p=0; p<19;p++) {
values.push(Math.round(Math.random()*250));
}
var c = new cajal('canvas');
//chart title
c.add('headline',new cajal.Text(10, 30, 'Chart title').options({
font: '20px sans-serif',
fill: 'rgba(120,110,255,0.6)'
}));
//grid lines
var line = new cajal.Path(0,0)
.to(c.canvas.width,0)
.options({stroke:'rgba(0,0,0,0.2)'});
for (var x=400; x>0; x-=50) {
c.add(x, new cajal.Path(-10, x)
.to(c.canvas.width+10,x)
.to(c.canvas.width+10,-10)
.to(-10,-10)
.options({stroke:'rgba(0,0,0,0.1)'}).moveBy(0,0.5));
c.add('t'+x, new cajal.Text(2, x-1, c.canvas.height-x).options({
fill:'#999',
font:'9px serif'
}));
}
var gradient = new cajal.LinearGradient(0, 0, 0, c.canvas.height)
.colorStop(0.5,'#175175')
.colorStop(1,'#000');
var bar = new cajal.Rect(0, 0, 20, c.canvas.height*3, 5)
.options({fill:gradient});
var text = new cajal.Text(0, c.canvas.height-2, '0');
for (var i in values) {
var a = parseInt(i) + 1;
c .add('bar'+a, bar.clone().move(a*30,c.canvas.height))
.add('text'+a,text.clone().move(a*30,c.canvas.height-2));
}
var init = function (f,t) {
for (var i in values) {
var a = parseInt(i) + 1;
var pos = -cajal.Ease.expOut(parseInt(values[i]), f, t, 2);
c.get('bar'+a).moveBy(0,pos);
c.get('text'+a)
.moveBy(0,pos)
.text(Math.round(parseInt(values[i])*f/t))
.options({
fill: 'rgba(0,0,0,' + f/t + ')',
font:'9px serif'
});
}
}
c.startAnimation(init,150);
</script>