User:Whiteknight/graph.js

From Wikiversity

Jump to: navigation, search

Note - After saving, you may have to bypass your browser's cache to see the changes. Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh); Konqueror: click Reload or press F5; Opera: clear the cache in Tools → Preferences; Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5. 

//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*/
addOnloadHook(WKGraphCanvas);
/*@end
  @*/
Retrieved from "http://en.wikiversity.org/wiki/User:Whiteknight/graph.js"