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"; tab.style.margin = "0.5em auto"; 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)); } 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); }

/*@cc_on @if(@_jscript) //no graph for you @else*/ $(WKGraphCanvas); /*@end @*/