Bar Chart

by Dan Wahlin

HTML

<canvas id="myCanvas" width="400" height="200" />

JavaScript

$(document).ready(function() {
    var scores = [100, 90, 85, 45, 72, 88];
    var width = 50;
    var currX = 50;
    var base = 200;
    
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'green';
    for (var i=0;i<scores.length;i++) {
       var h = scores[i];
       ctx.fillRect(currX, canvas.height - h, width, scores[i]);
       currX += width + 10;
    } 
});