Canvas Bar Chart with Transform
HTML
<canvas id="myCanvas" width="600" height="400" />
JavaScript
$(document).ready(function() {
alert('ok');
var scores = [100, 90, 85, 45, 72, 88];
//Since chart is being rotated we'll reverse the array so
//the bars display correctly
scores.reverse();
var width = 50;
var currX = 0;
var canvas = $('#myCanvas')[0];
var ctx = canvas.getContext('2d');
ctx.translate(375,200);
ctx.rotate(1 * Math.PI);
ctx.transform(0, 1, 1, 0, 0, 0);
ctx.fillStyle = 'green';
for (var i=0;i<scores.length;i++) {
ctx.fillRect(currX, 0, width, scores[i]);
currX += width + 10;
}
});