//This function produces simple graphs from a series of data points.
//Used currently for the hit counter. See [[User:Whiteknight/Graph]].
//current limit of one graph per page. Will correct that eventually.
function WKGraphCanvas() {
var tab = document.getElementById("WKGraphTable");
if(tab == null) return;
tab.style.display = "block";
var div = document.getElementById("WKCanvasGraph");
var mtr = document.getElementById("WKGraphMax");
if(div == null) return;
var pts = div.innerHTML;
if(pts == "") pts = "0";
div.innerHTML = "";
pts = pts.split(",");
var max = 1;
for(var i = 0; i < pts.length; i++) {
pts[i] = parseInt(pts[i]);
if(pts[i] > max) max = pts[i];
}
mtr.innerHTML = max;
for(i = 0; i < pts.length; i++) {
pts[i] = Math.floor((pts[i] / max) * 100);
}
if(pts.length == 1) {
var step = 1;
} else {
var step = Math.floor(500 / (pts.length - 1));
}
/*@cc_on
@if(@_jscript)
for(var i = 0; i < pts.length; i++) {
_make_IE_point(div, i * step + 5, pts[i] - 100 + i * 12);
}
@else*/
var can = document.createElement("canvas");
can.setAttribute("width", "510");
can.setAttribute("height", "115");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(5, 110 - pts[0]);
for(var i = 1; i < pts.length; i++) {
ctx.lineTo(i * step + 5, 110 - pts[i]);
}
ctx.strokeStyle = "#FF0000";
ctx.stroke();
ctx.strokeStyle = "#0000FF";
for(i = 0; i < pts.length; i++) {
ctx.strokeRect(i * step, 110 - pts[i] - 5, 10, 10);
}
div.appendChild(can);
/*@end
@*/
}
function _make_IE_point(parent, x, y) {
var div = document.createElement("div");
parent.appendChild(div);
div.style.width = "10px";
div.style.height = "10px";
div.style.border = "1px solid #0000FF";
div.style.position = "relative";
div.style.left = x + "px";
div.style.bottom = y + "px";
div.style.float = "left";
return div;
}
$(WKGraphCanvas);