var context = document.getElementById("graph").getContext("2d");

var box_width = 25;

for (var i = 40.5; i < 610; i += box_width) {
	context.moveTo(i, 20);
	context.lineTo(i, 370);
}

for (i = 20.5; i < 380; i += box_width) {
	context.moveTo(40, i);
	context.lineTo(590, i);
}
context.strokeStyle = '#eee';
context.stroke();



// Horizontal Indexing
context.font = 'bold 12px sans-serif';
context.fillText('Sun', 80, 385);   // context.fillRect(66.5,  369-150, 48, 150);
context.fillText('Mon', 150, 385);  // context.fillRect(141.5, 369-150, 48, 150);
context.fillText('Tue', 220, 385);  
context.fillText('Wed', 290, 385);  
context.fillText('Thr', 360, 385);  // context.fillRect(366.5, 369-150, 48, 150);
context.fillText('Fri', 430, 385);  // context.fillRect(441.5, 369-150, 48, 150);
context.fillText('Sat', 500, 385);  // context.fillRect(516.5, 369-150, 48, 150);

// Vertical Indexing
for (i = 1; i <= 7; i++) {
    context.fillText(i, 15, 375 - (i * 50));
}

function distance_conversion(miles) {
    return 50 * miles;
}

context.fillStyle = '#0C0'; context.fillRect(216.5, 369-distance_conversion(3.5), 48, distance_conversion(3.5));
context.fillStyle = '#F63'; context.fillRect(291.5, 369-distance_conversion(2.7), 48, distance_conversion(2.7));

// Bottom Lines
context.beginPath();
context.moveTo(20, 370);
context.lineTo(600, 370);
context.moveTo(40, 395);
context.lineTo(40, 20);
context.strokeStyle = '#000';
context.stroke();