Skip to content

Instantly share code, notes, and snippets.

@goncha

goncha/jquery-flot.html

Last active December 16, 2015 07:59
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save goncha/5403000 to your computer and use it in GitHub Desktop.
Save goncha/5403000 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Flot query Graphite data
Raw
jquery-flot.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Graphite Flot Example</title>
<style type="text/css">
#graphite {
width: 300px;
height: 200px;
font-size: 14px;
line-height: 1.2em;
}
</style>
</head>
<body>
<h1>Graphite Flot Example</h1>
<div id="graphite"></div>
<script type="text/javascript" src="flot/jquery.js"></script>
<script type="text/javascript" src="flot/jquery.flot.js"></script>
<script type="text/javascript">
$(function () {
var graphite_url="http://GRAPHITE_HOST:GRPHITE_PORT/render?format=json&from=-5min&target=collectd-mc01.load.load.shortterm";
var series = [ {
data: [],
lines: { fill: true }
} ];
var plot = null;
function createPlot(color) {
return $.plot("#graphite", series, {
grid: {
show: true
},
xaxis: {
tickFormatter: function() { return ""; }
},
// yaxis: {
// tickFormatter: function() { return ""; }
// },
colors: [ color ]
});
}
function updatePlot(target, warning, critical) {
var query_url = "http://scmhacks.yi.org:10080/render?format=json&from=-5min&target=" + target;
$.getJSON(query_url, function(targets) {
if (targets.length > 0) {
var datapoints = targets[0].datapoints;
var xzero = datapoints[0][1];
var data = $.map(targets[0].datapoints, function(value) {
if (value[0] === null) return null;
// hack of $.map will flat array object
return [[ value[1]-xzero, value[0] ]];
});
// replace null value with previous item value
for (var i = 0; i < data.length; i++) {
if (i > 0 && data[i] === null) data[i] = data[-i];
}
var last = data[data.length-1][1];
console.debug("last: " + last);
// calculate color to render
var color = "green";
if (last != null) {
if (last >= critical) {
color = "red";
} else if (last >= warning) {
color = "yellow";
} else {
color = "green";
}
}
// update plot
series[0].data = data;
if (plot === null) {
plot = createPlot(color);
} else {
// must call before plot.setData to change color immediately
plot.getOptions().colors = [ color ];
plot.setData(series);
plot.setupGrid();
plot.draw();
}
}
});
}
updatePlot("collectd-mc01.load.load.shortterm", 2, 3);
setInterval(function () {
updatePlot("collectd-mc01.load.load.shortterm", 2, 3);
}, 10000);
});
</script>
</body>
</html>
@jnovack
Copy link

jnovack commented Jun 17, 2015

You will have to return [[ value[1]+"000", value[0] ]]; in order to return a time that is valid to flot.

Flot expects unixtime+milliseconds as a string to draw the graph, graphite only provides unixtime as a number. By adding the string 000 to the end, you naturally cast the data as a string and convert it to milliseconds.

Then, as an example, your createPlot options object could include:

  xaxis: {
    mode: "time",
    timeformat: "%H:%M",
    minTickSize: [1, "minute"],
    timezone: "browser"
  },

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment