Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
73 lines (56 sloc) 2.1 KB
<!DOCTYPE html>
<meta charset="utf-8">
<title>Klout SwimLanes</title>
<style>
@import url(bootstrap.css);
@import url(style.css);
body {
padding-top: 20px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
Graphite Metrics
</div>
</div>
<script src="d3.v2.js"></script>
<script src="cubism.v1.js"></script>
<script>
var context = cubism.context()
.serverDelay(15 * 1000) // allow 15 seconds of collection lag
.step(15000) // fifteen seconds per value
.size(1440); // fetch 1440 values (720p)
var graphite = context.graphite("http://graphite");
var api_metrics = [
graphite.metric("my.graphite.metric1").alias("my_name1"),
graphite.metric("my.graphite.metric2").alias("my_name2"),
graphite.metric("my.graphite.metric3").alias("my_name3"),
graphite.metric("my.graphite.metric4").alias("my_name4")
];
var data_metrics = [
graphite.metric("my.graphite.metric").alias("my_name"),
graphite.metric("my.graphite.metric2").alias("my_name2")
];
var horizon = context.horizon().colors(["#08519c", "#*82bd", "#6baed6", "#fee6ce", "#fdae6b", "#e6550d" ]);
var horizon2 = context.horizon().colors(["#ddic77", "#c994c7", "#e7eief","#efedf5", "#bcbddc", "#756bb1" ]);
d3.select("body").selectAll(".axis")
.data(["top", "bottom"])
.enter().append("div").attr("class", "fluid-row")
.attr("class", function(d) { return d + " axis"; })
.each(function(d) { d3.select(this).call(context.axis().ticks(12).orient(d)); });
d3.select("body").append("div")
.attr("class", "rule")
.call(context.rule());
d3.select("body").selectAll(".horizon")
.data(api_metrics)
.enter().insert("div", ".bottom")
.attr("class", "horizon").call(horizon.extent([-1000, 1000]));
d3.select("body").selectAll(".horizon2")
.data(data_metrics)
.enter().insert("div", ".bottom")
.attr("class", "horizon").call(horizon2.extent([-1000, 1000]));
context.on("focus", function(i) {
d3.selectAll(".value").style("right", i == null ? null : context.size() - 1 - i + "px");
});
</script>