User:Whiteknight/graph.js

//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);