stat chart

by wrxsti85

HTML

<canvas id="myCanvas" width="570px"></canvas><br />

<table id="statTable" width="95%" border="1"><tbody><tr bgcolor="#CCCCCC"><td align="left" width="30%"><b>Time</b></td><td align="center" width="15%"><b>Offered</b></td><td align="center" width="15%"><b>Processed</b></td><td align="center" width="15%"><b>% Handled</b></td><td align="right" width="15%"><b>Avg. Handling Time</b></td></tr><tr class="stat" bgcolor="#FFFFFF"><td><b>Sunday -- 12/23</b></td><td align="center">1</td><td align="center">1</td><td align="center">100%</td><td align="right">00:00:00</td></tr><tr class="stat" bgcolor="#EEEEEE"><td>01:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr class="stat" bgcolor="#FFFFFF"><td>02:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#EEEEEE"><td>03:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#FFFFFF"><td>04:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#EEEEEE"><td>05:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#FFFFFF"><td>06:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#EEEEEE"><td>07:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#FFFFFF"><td>08:00:00</td><td align="center">0</td><td align="center">0</td><td align="center">N/A</td><td align="right">00:00:00</td></tr><tr  class="stat" bgcolor="#EEEEEE"><td>09:00:00</td><td align="center">0</td><td...

CSS

#myCanvas {
    border: solid 1px #000;
}

JavaScript

// Draw Grid
var c_canvas = document.getElementById("myCanvas");
var context = c_canvas.getContext("2d");

for (var x = 0.5; x < 1000; x += 10) {
    context.moveTo(x, 0);
    context.lineTo(x, 375);
}

for (var y = 0.5; y < 375; y += 10) {
    context.moveTo(0, y);
    context.lineTo(1000, y);
}

context.strokeStyle = "#eee";
context.stroke();

var startCount = 0;
var endCount = 10;
var lastNumber = 150;

var offeredColor = '#FA0000';
var processedColor = '#1B87E0';

$('.stat').each(function(){
    var offeredVal = $(this).children('td').eq(1).html();
    
    n15 = 0;
    n14 = 10;
    n13 = 20;
    n12 = 30;
    n11 = 40;
    n10 = 50;
    n9 = 60;
    n8 = 70;
    n7 = 80;
    n6 = 90;
    n5 = 100;
    n4 = 110;
    n3 = 120;
    n2 = 130;
    n1 = 140;
    n0 = 150;

    if (offeredVal == 0) {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.beginPath();
        context.moveTo(startCount, lastNumber);
        context.lineTo(endCount, n0);
        context.strokeStyle = offeredColor;
        context.lineWidth = 2;
        context.stroke();
        startCount = startCount + 10;
        endCount = endCount + 10;
        lastNumber = 150;
    }

    if (offeredVal == 1) {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.beginPath();
        context.moveTo(startCount, lastNumber);
        context.lineTo(endCount, n1);
        context.strokeStyle = offeredColor;
        context.lineWidth = 2;
        context.stroke();
        startCount = startCount + 10;
        endCount = endCount + 10;
        lastNumber = 140;
    }

    if (offeredVal == 2) {
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.beginPath();
        context.moveTo(startCount, lastNumber);
        context.lineTo(endCount, n2);
        context.strokeStyle = offeredColor;
       ...