cleanup and make it work!

twitter-archive · Sep 11, 2010 · 6e07ee6 · 6e07ee6
1 parent 812e958
commit 6e07ee6
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 22 deletions.
diff --git a/src/main/resources/drawgraph.js b/src/main/resources/drawgraph.js
@@ -2,20 +2,21 @@
 percentiles = [ "25%", "50%", "75%", "90%", "95%", "99%", "99.9%", "99.99%" ];
 display_lines = [ false, true, true, false, false, true, false, false ];
 
-FAKE = false;
+$fake = false;
 
-if (document.location.search.length > 0) {
-  google.load('visualization', '1');
-  google.setOnLoadCallback(drawContent);
-} else {
-  $.getJSON("/graph_data", function(datadump) {
-    var keys = datadump["keys"].sort();
-    for (i in keys) {
-      $("#contents").append('<a href="graph.html?' + keys[i] + '">' + keys[i] + '</a><br/>');
-    }
-    $("#graph-container").css("display", "none");
-  });
-}
+$(document).ready(function() {
+  if (document.location.search.length > 0) {
+    drawContent();
+  } else {
+    $.getJSON("/graph_data", function(datadump) {
+      var keys = datadump["keys"].sort();
+      for (i in keys) {
+        $("#contents").append('<a href="graph.html?' + keys[i] + '">' + keys[i] + '</a><br/>');
+      }
+      $("#graph-container").css("display", "none");
+    });
+  }
+});
 
 function roundTo(number, digits) {
   return Math.round(number * Math.pow(10, digits)) / Math.pow(10, digits);
@@ -27,6 +28,42 @@ function clickBox(n) {
   getData();
 }
 
+// turn an [x, y1, y2...] into [[x, y1], [x, y2], ...]
+function inflateY(vector) {
+  var x = vector.shift();
+  return vector.map(function(y) { return [x, y]; });
+}
+
+function rotate(matrix) {
+  var rv = new Array();
+  $.each(matrix, function(rindex, row) {
+    $.each(row, function(cindex, cell) {
+      if (rindex == 0) {
+        rv[cindex] = new Array();
+      }
+      rv[cindex].push(cell);
+    });
+  });
+  return rv;
+}
+
+function showTooltip(x, y, contents) {
+  $('<div id="tooltip">' + contents + '</div>').css({
+    position: 'absolute',
+    display: 'none',
+    top: y + 5,
+    left: x + 5,
+    border: '1px solid #fdd',
+    padding: '2px',
+    'background-color': '#fee',
+    opacity: 0.80
+  }).appendTo("body").fadeIn(200);
+}
+
+function hideTooltip() {
+  $('#tooltip').remove();
+}
+
 function drawContent() {
   if (document.location.search.substr(1, 7) == "timing:") {
     for (i = 0; i < percentiles.length; i++) {
@@ -35,19 +72,19 @@ function drawContent() {
     }
   }
   if (document.location.search.substr(8, 4) == "FAKE") {
-    FAKE = true;
+    $fake = true;
   }
   getData();
 }
 
 function getData() {
-  if (FAKE) {
+  if ($fake) {
     var rawData = [
-      [ 900, 12, 14, 20, ],
-      [ 960, 11, 13, 21, ],
-      [ 1020, 10, 13, 25, ],
-      [ 1080, 13, 15, 23, ],
-      [ 1140, 14, 18, 26, ],
+      [ 1283818430000, 12, 14, 20, ],
+      [ 1283818490000, 11, 13, 21, ],
+      [ 1283818550000, 10, 13, 25, ],
+      [ 1283818610000, 13, 15, 23, ],
+      [ 1283818660000, 10, 18, 26, ],
     ];
     drawChart(rawData);
   } else {
@@ -69,6 +106,43 @@ function getData() {
 }
 
 function drawChart(rawData) {
+  var newData = rawData.map(function(row) { return inflateY(row) });
+  newData = rotate(newData);
+  newData = $.map(newData, function(row) {
+    return {
+      //label: "yeah",
+      yaxis: 2,
+      data: row
+    };
+  })
+  var options = {
+    grid: {
+      hoverable: true
+    },
+    xaxis: {
+      mode: "time"
+    },
+    y2axis: {
+      transform: function (v) { return Math.log(v) + 1; },
+      inverseTransform: function (v) { return Math.exp(v); }
+    },
+  };
+  $.plot($("#chart"), newData, options);
+
+  var previousPoint = null;
+  $("#chart").bind("plothover", function (event, pos, item) {
+    if (item && (previousPoint != item.datapoint)) {
+      previousPoint = item.datapoint;
+      hideTooltip();
+      var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
+      showTooltip(item.pageX, item.pageY, y);
+    } else {
+      hideTooltip();
+    }
+  });
+}
+
+function drawChartGoogly(rawData) {
   var data = new google.visualization.DataTable();
   data.addColumn('datetime', 'Time');
   for (i = 0; i < rawData[0].length - 1; i++) {

diff --git a/src/main/resources/graph.html b/src/main/resources/graph.html
@@ -2,9 +2,8 @@
 <html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
-  <script type="text/javascript" src="http://danvk.org/dygraphs/dygraph-combined.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
+  <script type="text/javascript" src="jquery.flot.js"></script>
   <script type="text/javascript" src="drawgraph.js"></script>
 </head>
 <body>