Bar chart

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>