Skip to content

Instantly share code, notes, and snippets.

@polyrabbit

polyrabbit/rickshaw-demo.html

Created May 16, 2013 07:22
Show Gist options
  • Save polyrabbit/5589989 to your computer and use it in GitHub Desktop.
Save polyrabbit/5589989 to your computer and use it in GitHub Desktop.
Download ZIP
rickshaw integrated with graphite
Raw
rickshaw-demo.html
<head>
<script src="vendor/d3.min.js"></script>
<script src="vendor/d3.layout.min.js"></script>
<script src="rickshaw.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<link rel="stylesheet" href="rickshaw.min.css">
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<style>
#chart_container {
position: relative;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
display: inline-block;
margin-left: 40px;
}
#y_axis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}
#legend {
display: inline-block;
vertical-align: top;
margin: 0 0 0 10px;
}
#offset_form {
float: left;
margin: 2em 0 0 15px;
font-size: 13px;
}
</style>
<style>
/* http://code.shutterstock.com/rickshaw/examples/formatter.html */
.rickshaw_graph .detail .x_label { display: none }
.rickshaw_graph .detail .item { line-height: 1.4; padding: 0.5em }
.detail_swatch { float: right; display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 0 }
.rickshaw_graph .detail .date { color: #a0a0a0 }
</style>
</head>
<body>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
<div id="legend"></div>
<div id="slider"></div>
<form id="offset_form" class="toggler">
<input type="radio" name="offset" id="lines" value="lines" checked>
<label class="lines" for="lines">lines</label><br />
<input type="radio" name="offset" id="stack" value="zero">
<label class="stack" for="stack">stack</label><br />
<input type="radio" name="offset" id="scatterplot" value="scatterplot">
<label class="stack" for="scatterplot">scatterplot</label>
</form>
</div>
<script>
var graphite_json = [{"target": "api.memory.memory-buffered.value", "datapoints": [[28844032.0, 1368641640], [28909568.0, 1368641700], [28975104.0, 1368641760], [29040640.0, 1368641820], [29122560.0, 1368641880], [29204480.0, 1368641940], [29294592.0, 1368642000], [29351936.0, 1368642060]]}, {"target": "api.memory.memory-cached.value", "datapoints": [[147480576.0, 1368641640], [147480576.0, 1368641700], [147480576.0, 1368641760], [147480576.0, 1368641820], [147484672.0, 1368641880], [147484672.0, 1368641940], [147492864.0, 1368642000], [147492864.0, 1368642060]]}, {"target": "api.memory.memory-free.value", "datapoints": [[37523456.0, 1368641640], [37556224.0, 1368641700], [37490688.0, 1368641760], [37351424.0, 1368641820], [37269504.0, 1368641880], [37294080.0, 1368641940], [36913152.0, 1368642000], [36851712.0, 1368642060]]}, {"target": "api.memory.memory-used.value", "datapoints": [[189804544.0, 1368641640], [189706240.0, 1368641700], [189706240.0, 1368641760], [189779968.0, 1368641820], [189775872.0, 1368641880], [189669376.0, 1368641940], [189952000.0, 1368642000], [189956096.0, 1368642060]]}]
var palette = new Rickshaw.Color.Palette( { scheme: 'munin' } );
</script>
<script>
function graphite2rickshaw_data(graphite_json) {
var series = [];
graphite_json.forEach(function(gj) {
var datas = [];
gj.datapoints.forEach(function(dp){
datas.push({x: dp[1], y: dp[0]})
});
series.push({color: palette.color(),
data: datas,
name: gj.target});
})
return series;
}
</script>
<script>
document.getElementById('offset_form').addEventListener('change', function(e) {
var offsetMode = e.target.value;
if(offsetMode == 'lines') {
graph.setRenderer('line');
graph.offset = 'zero';
} else if(offsetMode == 'zero') {
graph.setRenderer('stack');
graph.offset = offsetMode;
} else {
graph.setRenderer('scatterplot');
}
graph.render();
}, false);
</script>
<script>
var use_static = false;
if(use_static) {
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
renderer: 'line',
series: graphite2rickshaw_data(graphite_json),
});
}
</script>
<script>
var tv = 60000;
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
renderer: 'line',
series: new Rickshaw.Series.FixedDuration([{name: 'api.memory.memory-free.value'}], {scheme: 'munin'}, {timeInterval: tv, maxDataPoints: 100,})
});
// $.getScript('http://localhost:8080/render?format=json&from=-1min&target=api.memory.memory-*.value', function(){console.log()})
setInterval(function(){
$.ajax({
url: "http://localhost:8080/render?format=json&from=-1min&target=api.memory.memory-*.value",
dataType: 'json',
success: function(graphite_json, status) {
graphite_json.forEach(function(plot){
var obj = {};
obj[plot['target']] =plot.datapoints[0][0] ;
graph.series.addData(obj);
});
graph.update();
},
error: function(jqXHR, textStatus, errorThrown ) {
console.log(textStatus);
}
});
}, tv);
</script>
<script>
var x_time = new Rickshaw.Graph.Axis.Time( {graph: graph} );
var y_axis = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
} );
var legend = new Rickshaw.Graph.Legend( {
element: document.querySelector('#legend'),
graph: graph
} );
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph,
formatter: function(series, x, y) {
var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
return content;
}
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: $('#slider')
});
graph.render();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment