arowser · August 29, 2015 14:08
diff --git a/jquery-flot.html b/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>
	<!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>