kastner · May 3, 2011 23:00 · sivy · Sep 8, 2012 · sivy · Sep 8, 2012
diff --git a/graph.html b/graph.html

 <!doctype html> 
 <html> 
 <head> 
 </head> 
 <body> 
 <!doctype html> 
 <html> 
  <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <style> 
      body {
        margin: 0;
        padding: 0;
      }
      #graph-1 {
        border: 1px solid black;
        margin: 0;
      }
    </style> 
  </head> 
  <body> 
    <img id="the-graph" src=""> 
    <div id="info"></div> 
    <canvas style="display:none" width="586" height="303" id="graph-1"></canvas> 
    <script> 
      var xToVal = [];
 
      function draw(data, ctx) {
        data.min = parseFloat(data.data_points[0]);
        data.max = parseFloat(data.data_points[0]);
        for(i=0;i<data.data_points.length;i++) {
          data.data_points[i] = parseFloat(data.data_points[i]);
          if (data.data_points[i] === null) { continue; }
          data.max = (data.data_points[i] > data.max) ? data.data_points[i] : data.max;
          data.min = (data.data_points[i] < data.min) ? data.data_points[i] : data.min;
        }
 
        c = $("#graph-1");
 
        width = c.width();
        height = c.height();
 
        c[0].width = width;
        c[0].height = height;
 
        start = data.start;
        end = data.end;
        fudge = (data.max - data.min) * 0.1;
        max = data.max + fudge;
        min = data.min - fudge;
        if (min < 0) { min = 0; }
 
        step = data.step;
        leftMargin = 60;
        rightMargin = width * 0.05;
        topMargin = 30;
        bottomMargin = 25;
 
        minY = topMargin;
        maxY = height - bottomMargin;
        minX = leftMargin;
        maxX = width - rightMargin;
 
        numberOfDataPoints = data.data_points.length;
        numberOfPixels = maxX - minX;
        rPointsPerPixel = numberOfDataPoints / numberOfPixels;
        pointsPerPixel = Math.ceil(rPointsPerPixel);
        xStep = (numberOfPixels * pointsPerPixel) / numberOfDataPoints;
 
        ctx.lineWidth = 1;
 
        drawLines(ctx, minX, minY, maxX, maxY);
        drawVAxis(ctx, minX, minY, maxY, min, max);
 
        x = minX;
        buff = [];
        n = 0;
        prevY = maxY;
        fromNone = true;
 
        ctx.beginPath();
 
        for (i=0; i<data.data_points.length; i++) {
          buff.push((data.data_points[i] != null) ? data.data_points[i] : 0);
          if (buff.length >= pointsPerPixel) {
            var val = buff.reduce(function(pVal, cVal) { return pVal + cVal; }); // AVG only for now
            val /= buff.length;
 
            valPct = (val - min) / (max - min);
            y = maxY - (valPct * (maxY - minY));
            xToVal.push({x1: x, x2: x+xStep, val: val});
            if (y > maxY) { y = maxY; }
 
            if (fromNone) {
              ctx.moveTo(x, maxY);
              ctx.lineTo(x, y);
              fromNone = false;
            }
            else {
              ctx.lineTo(x, y);
            }
 
            x += xStep;
 
            ctx.lineTo(x, y);
 
            buff = [];
            prevY = y;
          }
        }
 
        ctx.lineTo(x, maxY);
        ctx.closePath();
        ctx.fillStyle = "rgba(85,85,85,0.9)";
        ctx.fill();
      }
 
      function drawText(data, ctx) {
        ctx.textAlign = "center";
        ctx.fillStyle = "#000";
        ctx.font = "normal 16px monospace";
        ctx.fillText(data.title, $("#graph-1").width()/2, 14);
      }
 
      function drawVAxis(ctx, minX, minY, maxY, min, max) {
        ctx.textAlign = "right";
        ctx.fillStyle = "#000";
        fSize = 10;
        ctx.font = "normal " + fSize + "px monospace";
 
        var intPoints = 0;
        yRange = (maxY - minY);
        if (yRange > 100)                { intPoints = 8; }
        if (yRange < 100 && yRange > 50) { intPoints = 2; }
        if (yRange <= 50)                { intPoints = 0; }
 
        virtAxisValues = [min, max];
        for (i = 1; i <= intPoints; i++) {
          virtAxisValues.push((max-min) / (intPoints + 1) * i + min);
        }
 
        for (i = 0; i < virtAxisValues.length; i++) {
          val = virtAxisValues[i];
          valPct = (val - min) / (max - min);
          y = maxY - (valPct * (maxY - minY));
 
          sVal = ((max - min) >= 10) ? Math.floor(val) : val.toFixed(3);
 
          ctx.fillText(sVal, minX-5, y);
        }
      }
 
      function drawLines(ctx, minX, minY, maxX, maxY, step) {
        ctx.fillStyle = "rgba(225,225,225,0.3)";
        ctx.fillRect(minX,minY,maxX-minX,maxY-minY);
        
        ctx.strokeStyle = "rgba(220,220,220,0.2)";
        for (i=minX; i<=maxX; i+=10) {
          ctx.moveTo(i, minY);
          ctx.lineTo(i, maxY);
          ctx.stroke();
        }
        for (i=minY; i<=maxY; i+=20) {
          ctx.moveTo(minX, i);
          ctx.lineTo(maxX, i);
          ctx.stroke();
        }
      }
 
      function convertToImg(ctx, image_id) {
        var img = document.getElementById(image_id);
        img.width = ctx.canvas.width;
        img.height = ctx.canvas.height;
        img.src = ctx.canvas.toDataURL("image/png");
      }
 
      $(function() {
        $.get("http://graphite.metaatem.net/render/?width=586&height=303&_salt=1304461504.846&target=carbon.agents.metaatem.updateOperations&rawData=true", function (rawData) {
          //console.log(rawData);
          //alert(data);
 
          var data = {};
          var parts = rawData.split("|");
          var meta = parts[0].split(",");
          data.title = meta[0];
          data.sum = {};
          data.sum.data_points = parts[1].split(",");
          data.sum.start = meta[1];
          data.sum.end = meta[2];
 
          c = $("#graph-1");
          ctx = c[0].getContext("2d");
 
          draw(data["sum"], ctx);
          drawText(data, ctx);
          convertToImg(ctx, "the-graph");
          $("#the-graph").mousemove(function(evt) {
            var xPos = evt.pageX-$(c).offset().left;
            var yPos = evt.pageY-$(c).offset().top;
            for (i=0; i<xToVal.length; i++) {
              var xObj = xToVal[i];
              if (xPos >= xObj.x1 && xPos < xObj.x2) {
                $("#info").html("Value at x of " + xPos + " = " + xObj.val);
                break;
              }
            }
          });
        });
      });
    </script> 
    <pre id="graph-data"> 
    </pre> 
  </body> 
 </html> 
 
 </body> 
 </html>

	<!doctype html>
	<html>
	<head>
	</head>
	<body>
	<!doctype html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#graph-1 {
	border: 1px solid black;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<img id="the-graph" src="">
	<div id="info"></div>
	<canvas style="display:none" width="586" height="303" id="graph-1"></canvas>
	<script>
	var xToVal = [];

	function draw(data, ctx) {
	data.min = parseFloat(data.data_points[0]);
	data.max = parseFloat(data.data_points[0]);
	for(i=0;i<data.data_points.length;i++) {
	data.data_points[i] = parseFloat(data.data_points[i]);
	if (data.data_points[i] === null) { continue; }
	data.max = (data.data_points[i] > data.max) ? data.data_points[i] : data.max;
	data.min = (data.data_points[i] < data.min) ? data.data_points[i] : data.min;
	}

	c = $("#graph-1");

	width = c.width();
	height = c.height();

	c[0].width = width;
	c[0].height = height;

	start = data.start;
	end = data.end;
	fudge = (data.max - data.min) * 0.1;
	max = data.max + fudge;
	min = data.min - fudge;
	if (min < 0) { min = 0; }

	step = data.step;
	leftMargin = 60;
	rightMargin = width * 0.05;
	topMargin = 30;
	bottomMargin = 25;

	minY = topMargin;
	maxY = height - bottomMargin;
	minX = leftMargin;
	maxX = width - rightMargin;

	numberOfDataPoints = data.data_points.length;
	numberOfPixels = maxX - minX;
	rPointsPerPixel = numberOfDataPoints / numberOfPixels;
	pointsPerPixel = Math.ceil(rPointsPerPixel);
	xStep = (numberOfPixels * pointsPerPixel) / numberOfDataPoints;

	ctx.lineWidth = 1;

	drawLines(ctx, minX, minY, maxX, maxY);
	drawVAxis(ctx, minX, minY, maxY, min, max);

	x = minX;
	buff = [];
	n = 0;
	prevY = maxY;
	fromNone = true;

	ctx.beginPath();

	for (i=0; i<data.data_points.length; i++) {
	buff.push((data.data_points[i] != null) ? data.data_points[i] : 0);
	if (buff.length >= pointsPerPixel) {
	var val = buff.reduce(function(pVal, cVal) { return pVal + cVal; }); // AVG only for now
	val /= buff.length;

	valPct = (val - min) / (max - min);
	y = maxY - (valPct * (maxY - minY));
	xToVal.push({x1: x, x2: x+xStep, val: val});
	if (y > maxY) { y = maxY; }

	if (fromNone) {
	ctx.moveTo(x, maxY);
	ctx.lineTo(x, y);
	fromNone = false;
	}
	else {
	ctx.lineTo(x, y);
	}

	x += xStep;

	ctx.lineTo(x, y);

	buff = [];
	prevY = y;
	}
	}

	ctx.lineTo(x, maxY);
	ctx.closePath();
	ctx.fillStyle = "rgba(85,85,85,0.9)";
	ctx.fill();
	}

	function drawText(data, ctx) {
	ctx.textAlign = "center";
	ctx.fillStyle = "#000";
	ctx.font = "normal 16px monospace";
	ctx.fillText(data.title, $("#graph-1").width()/2, 14);
	}

	function drawVAxis(ctx, minX, minY, maxY, min, max) {
	ctx.textAlign = "right";
	ctx.fillStyle = "#000";
	fSize = 10;
	ctx.font = "normal " + fSize + "px monospace";

	var intPoints = 0;
	yRange = (maxY - minY);
	if (yRange > 100) { intPoints = 8; }
	if (yRange < 100 && yRange > 50) { intPoints = 2; }
	if (yRange <= 50) { intPoints = 0; }

	virtAxisValues = [min, max];
	for (i = 1; i <= intPoints; i++) {
	virtAxisValues.push((max-min) / (intPoints + 1) * i + min);
	}

	for (i = 0; i < virtAxisValues.length; i++) {
	val = virtAxisValues[i];
	valPct = (val - min) / (max - min);
	y = maxY - (valPct * (maxY - minY));

	sVal = ((max - min) >= 10) ? Math.floor(val) : val.toFixed(3);

	ctx.fillText(sVal, minX-5, y);
	}
	}

	function drawLines(ctx, minX, minY, maxX, maxY, step) {
	ctx.fillStyle = "rgba(225,225,225,0.3)";
	ctx.fillRect(minX,minY,maxX-minX,maxY-minY);

	ctx.strokeStyle = "rgba(220,220,220,0.2)";
	for (i=minX; i<=maxX; i+=10) {
	ctx.moveTo(i, minY);
	ctx.lineTo(i, maxY);
	ctx.stroke();
	}
	for (i=minY; i<=maxY; i+=20) {
	ctx.moveTo(minX, i);
	ctx.lineTo(maxX, i);
	ctx.stroke();
	}
	}

	function convertToImg(ctx, image_id) {
	var img = document.getElementById(image_id);
	img.width = ctx.canvas.width;
	img.height = ctx.canvas.height;
	img.src = ctx.canvas.toDataURL("image/png");
	}

	$(function() {
	$.get("http://graphite.metaatem.net/render/?width=586&height=303&_salt=1304461504.846&target=carbon.agents.metaatem.updateOperations&rawData=true", function (rawData) {
	//console.log(rawData);
	//alert(data);

	var data = {};
	var parts = rawData.split("\|");
	var meta = parts[0].split(",");
	data.title = meta[0];
	data.sum = {};
	data.sum.data_points = parts[1].split(",");
	data.sum.start = meta[1];
	data.sum.end = meta[2];

	c = $("#graph-1");
	ctx = c[0].getContext("2d");

	draw(data["sum"], ctx);
	drawText(data, ctx);
	convertToImg(ctx, "the-graph");
	$("#the-graph").mousemove(function(evt) {
	var xPos = evt.pageX-$(c).offset().left;
	var yPos = evt.pageY-$(c).offset().top;
	for (i=0; i<xToVal.length; i++) {
	var xObj = xToVal[i];
	if (xPos >= xObj.x1 && xPos < xObj.x2) {
	$("#info").html("Value at x of " + xPos + " = " + xObj.val);
	break;
	}
	}
	});
	});
	});
	</script>
	<pre id="graph-data">
	</pre>
	</body>
	</html>

	</body>
	</html>