Graph

by Chris Nicholson

HTML

<canvas id="myCanvas" width="300" height="100" style="background: #eee;"></canvas>

<table>
<tr>
    <td>01/01/2012</td>
    <td>10</td>
</tr>
<tr>
    <td>02/01/2012</td>
    <td>20</td>
</tr>
<tr>
    <td>03/01/2012</td>
    <td>50</td>
</tr>
<tr>
    <td>03/01/2012</td>
    <td>30</td>
</tr>
</table>

JavaScript

var maxHeight = $('#myCanvas').height();

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

    ctx.moveTo(0,maxHeight - $('table tr').eq(0).find('td').eq(1).text());

for (i = 0; i < $('table tr').length; i++){
    var y = i * 100;
    ctx.lineTo(y,maxHeight - $('table tr').eq(i).find('td').eq(1).text());
}

ctx.stroke();