Exam Graph

HTML

<form name="frm" id="buttons">
<input type="text" size="10" value="Music"/><input type="text" name="in1" size="5" value="14/5"/><canvas id="out1" width="200" height="10"></canvas><br />
<input type="text" size="10" value="RE"/><input type="text" name="in2" size="5" value="17/5"/><canvas id="out2" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Eng Lit 1H"/><input type="text" name="in3" size="5" value="22/5"/><canvas id="out3" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Chem"/><input type="text" name="in4" size="5" value="24/5"/><canvas id="out4" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Eng Lit 2H"/><input type="text" name="in5" size="5" value="24/5"/><canvas id="out5" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Eng Lang"/><input type="text" name="in6" size="5" value="29/5"/><canvas id="out6" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Graphics"/><input type="text" name="in7" size="5" value="29/5"/><canvas id="out7" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Physics"/><input type="text" name="in8" size="5" value="30/5"/><canvas id="out8" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Biology"/><input type="text" name="in9" size="5" value="12/6"/><canvas id="out9" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Maths (App)"/><input type="text" name="in10" size="5" value="13/6"/><canvas id="out10" width="200" height="10"></canvas><br />
<input type="text" size="10" value="Maths (Meth)"/><input type="text" name="in11" size="5" value="21/6"/><canvas id="out11" width="200" height="10"></canvas><br />
<input type="button" onclick="run()" value="Refresh" />
<form/>

JavaScript

function run() {
    var d = new Date();
    var day = d.getDate();
    var month = d.getMonth() + 1;
    for (var x = 1; x < 12; x++) {
        var inVal = "NULL";
        eval("inVal = document.frm.in"+x+".value");
        var values = new Array(2);
        
        values = inVal.split("/");
        
        var context = document.getElementById("out" + x).getContext("2d");
        if (month == parseInt(values[1])) {
            var difference = values[0] - day;
        } else {
            var difference = (values[0] - day) + 30;
        }
        
        context.fillRect(0,0,difference*4.5,10);
    }
    alert("Done");
}