Skip to content
This repository has been archived by the owner on Jun 19, 2019. It is now read-only.

Commit

Permalink
Merge branch 'flot'
Browse files Browse the repository at this point in the history
  • Loading branch information
Robey Pointer committed Sep 13, 2010
2 parents c074152 + 5c8d1b6 commit bf25441
Show file tree
Hide file tree
Showing 7 changed files with 2,323 additions and 83 deletions.
3 changes: 2 additions & 1 deletion project/plugins/Plugins.scala
@@ -1,6 +1,7 @@
import sbt._

class Plugins(info: ProjectInfo) extends PluginDefinition(info) {
val twitterNest = "com.twitter" at "http://www.lag.net/nest"
val scalaTools = "scala-tools.org" at "http://scala-tools.org/repo-releases/"
val lagNet = "twitter.com" at "http://www.lag.net/repo/"
val defaultProject = "com.twitter" % "standard-project" % "0.7.1"
}
2 changes: 1 addition & 1 deletion project/plugins/project/build.properties
@@ -1,3 +1,3 @@
#Project properties
#Tue Aug 31 22:05:45 PDT 2010
#Sat Sep 11 13:18:18 PDT 2010
plugin.uptodate=true
83 changes: 3 additions & 80 deletions src/main/resources/graph.html
Expand Up @@ -2,92 +2,15 @@
<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">
percentiles = [ "25%", "50%", "75%", "90%", "95%", "99%", "99.9%", "99.99%" ];
display_lines = [ false, true, true, false, false, true, false, 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");
});
}

function roundTo(number, digits) {
return Math.round(number * Math.pow(10, digits)) / Math.pow(10, digits);
}

function drawContent() {
if (document.location.search.substr(1, 7) == "timing:") {
for (i = 0; i < percentiles.length; i++) {
$("#display_lines").append("<input type=checkbox name=box" + i + " onClick=\"clickBox(" + i + ")\" />" + percentiles[i] + "<br />");
$("input[name=box" + i + "]").attr("checked", display_lines[i]);
}
}
drawChart();
}

function clickBox(n) {
display_lines[n] = !display_lines[n];
$('input[name=box' + n + ']').attr('checked', display_lines[n]);
drawChart();
}

function drawChart() {
var key = document.location.search.substr(1);
var param = "";
for (i = 0; i < percentiles.length; i++) {
if (display_lines[i]) {
if (param.length > 0) {
param += ",";
}
param += i;
}
}
$.getJSON("/graph_data/" + key + "?p=" + param, function(datadump) {
var rawData = datadump[key];
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
for (i = 0; i < rawData[0].length - 1; i++) {
data.addColumn('number', 'Data' + i);
}
data.addRows(rawData.map(function(row) { return [ new Date(row[0] * 1000) ].concat(row.slice(1)); }));

new Dygraph.GVizChart(document.getElementById('chart')).draw(data, {
includeZero: true,
fillGraph: true,
labelsKMG2: true,
xAxisLabelFormatter: function(date, granularity) { return date.strftime("%H:%M"); },
labelsDivStyles: { display: "none" },
highlightCallback: function(e, x, pts) {
var xloc = Math.floor(pts[pts.length - 1].canvasx) + 15;
var yloc = Math.floor(pts[pts.length - 1].canvasy) + 15;
var label = pts.map(function(p) { return roundTo(p.yval, 3); }).join(", ");
$('#chart_label').html(label);
$('#chart_label').css({ display: "block", left: xloc + "px", top: yloc + "px" });
},
unhighlightCallback: function(e) {
$('#chart_label').css({ display: "none" });
},
});
});
}
</script>
<script type="text/javascript" src="/static/jquery.flot.js"></script>
<script type="text/javascript" src="/static/drawgraph.js"></script>
</head>
<body>

<div id="graph-container">
<div id="chart" style="width: 640px; height: 320px;"></div>
<span id="chart_label" style="position: absolute; font-size: 10pt;"></span>
<div id="display_lines"></div>
<div id="display_lines" style="margin: 1em;"></div>
</div>
<div id="contents"></div>

Expand Down
179 changes: 179 additions & 0 deletions src/main/resources/static/drawgraph.js
@@ -0,0 +1,179 @@

percentiles = [ "25%", "50%", "75%", "90%", "95%", "99%", "99.9%", "99.99%" ];
display_lines = [ false, true, true, false, false, true, false, false ];

$fake = false;
$timing = false;
$params = {};

$(document).ready(function() {
parseParams();

if ("g" in $params) {
drawContent();
} else {
$.getJSON("/graph_data", function(datadump) {
var keys = datadump["keys"].sort();
for (i in keys) {
$("#contents").append('<a href="/graph/?g=' + keys[i] + '">' + keys[i] + '</a><br/>');
}
$("#graph-container").css("display", "none");
});
}
});

function decode(s) {
return decodeURIComponent(s.replace(/\+/g, " "));
}

function parseParams() {
var params = window.location.search.substring(1);
var re = /([^&=]+)=?([^&]*)/g;
var pair;

while (pair = re.exec(params)) {
$params[decode(pair[1])] = decode(pair[2]);
}
}


function roundTo(number, digits) {
return Math.round(number * Math.pow(10, digits)) / Math.pow(10, digits);
}

function clickBox(n) {
display_lines[n] = !display_lines[n];
$('input[name=box' + n + ']').attr('checked', display_lines[n]);
getData();
}

function clickLog() {
if ($params["log"] > 0) {
$params["log"] = 0;
} else {
$params["log"] = 1;
}
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() {
$("#display_lines").append("<input type=checkbox name=log onClick=\"clickLog()\" /> log scale");
$("input[name=log]").attr("checked", $params["log"] > 0);
$("#display_lines").append("<p />");

if ($params["g"].substr(0, 7) == "timing:") {
$timing = true;
for (i = 0; i < percentiles.length; i++) {
$("#display_lines").append("<input type=checkbox name=box" + i + " onClick=\"clickBox(" + i + ")\" /> " + percentiles[i] + "<br />");
$("input[name=box" + i + "]").attr("checked", display_lines[i]);
}
if ($params["g"].substr(7, 4) == "FAKE") {
$fake = true;
}
}
getData();
}

function getData() {
if ($fake) {
var rawData = [
[ 1283818430000, 12, 14, 20, ],
[ 1283818490000, 11, 13, 21, ],
[ 1283818550000, 10, 13, 25, ],
[ 1283818610000, 13, 15, 23, ],
[ 1283818660000, 10, 18, 26, ],
];
drawChart(rawData);
} else {
var param = "";
for (i = 0; i < percentiles.length; i++) {
if (display_lines[i]) {
if (param.length > 0) {
param += ",";
}
param += i;
}
}
$.getJSON("/graph_data/" + $params["g"] + "?p=" + param, function(datadump) {
var rawData = datadump[$params["g"]];
drawChart(rawData);
});
}
}

function drawChart(rawData) {
var newData = rawData.map(function(row) { return inflateY(row) });
newData = rotate(newData);
newData = $.map(newData, function(row) {
return {
yaxis: 2,
data: row
};
})
var options = {
grid: {
hoverable: true,
mouseActiveRadius: 25,
},
xaxis: {
mode: "time"
},
y2axis: {
},
};
if ($params["log"] > 0) {
$.extend(options["y2axis"], {
transform: function (v) { return (v == 0) ? null : Math.log(v); },
inverseTransform: function (v) { return (v == null) ? 0 : 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();
}
});
}

0 comments on commit bf25441

Please sign in to comment.