remove semi-history graph from first view. add labels to history graphHEADmaster

1 files changed, 60 insertions, 75 deletions

diff --git a/schall/templates/index.html b/schall/templates/index.html
index 7ed729f..cd46a7a 100644
--- a/schall/templates/index.html
+++ b/schall/templates/index.html
@@ -37,15 +37,8 @@ window.onload = function () {
         document.getElementById("chartHistory").width = window.innerWidth - 10;
 
         var data = {"value":null, ts:null};
-        var graph_data = [[],[]];
-	var data_max = 0;
-	var req_start = 0;
-
+        var chart_data = [[]];
         var GRAPH_MAX_POINTS = 1000;
-        for (var i=0; i< GRAPH_MAX_POINTS; ++i) {
-                graph_data[0].push(null);
-                graph_data[1].push(null);
-        }
         
         var gauge1 = new RGraph.Gauge('gauge1', 20, 70);
         gauge1.Set('chart.text.size', 8);
@@ -63,7 +56,7 @@ window.onload = function () {
         led.Set('chart.dark', 'rgba(0,0,0,0)');
         led.Draw();
 
-        var graph = new RGraph.Line('chart', graph_data[0], graph_data[1]);
+        var graph = new RGraph.Line('chart', [])
         graph.Set('chart.title.yaxis', 'dBA');
         graph.Set('chart.title.yaxis.pos', 0.4);
         graph.Set('chart.ylabels.count', 5);
@@ -82,44 +75,15 @@ window.onload = function () {
         chartHistory.Set('chart.title.yaxis.pos', 0.4);
         chartHistory.Set('chart.ylabels.count', 5);
         chartHistory.Set('chart.gutter.top', 5);
-        chartHistory.Set('chart.gutter.bottom', 5);
+        chartHistory.Set('chart.gutter.bottom', 50);
         chartHistory.Set('chart.gutter.left', 60);
         chartHistory.Set('chart.gutter.right', 5);
         chartHistory.Set('chart.linewidth', [1]);
         chartHistory.Set('chart.colors', ["black"]);
         chartHistory.Set('chart.ymin', 20);
         chartHistory.Set('chart.ymax', 70);
-        chartHistory.Set('chart.xticks', 25);
-
- 
-        function load() {
-                var http = new XMLHttpRequest();
-                http.open("GET", "now", true);
-                http.onreadystatechange = function() {
-                        if (http.readyState == 4) {
-				var req_end = ( new Date ).getTime()
-                                data = JSON.parse(http.responseText);
-				
-				var d = req_end - req_start;
-                                window.setTimeout(load, 500 - d);
-                        } 
-                }
-		req_start = ( new Date ).getTime();
-                http.send(null);
-        }
-
-	var httpinit = new XMLHttpRequest();
-	httpinit.open("GET", "range/", true);
-	httpinit.onreadystatechange = function(){
-		if (httpinit.readyState == 4) {
-			graph_data[1] = JSON.parse(httpinit.responseText);
-			// Start polling
-			init();
-		}
-	}
-	httpinit.send()
 
-	function json(path, func) {
+ 	function json(path, func) {
 		var req = new XMLHttpRequest();
 		req.open("GET", path, true);
 		req.onreadystatechange = function() {
@@ -129,56 +93,77 @@ window.onload = function () {
 		req.send();
 	}
 
-	function refreshChartHistory() {
+        function startRefreshData() {
+		var req_start = new Date().getTime();
+		json("now", function(_data) {
+			var req_end = new Date().getTime()
+			var d = req_end - req_start;
+
+			data = _data;
+
+			window.setTimeout(startRefreshData, 500 - d);
+		});
+        }
+	
+	function startRefreshChartHistory() {
+		var d = ( 1000 * 60 * 60 * 24 * 4 );
 		var now = new Date().getTime();
-		var from = now - ( 1000 * 60 * 60 * 24 * 2 );
+		var from = now - d;
 		var count = 1200;
+		var interval = d / count;
 		json("range/" + from + "/" + now + "/" + count, function (data) {
+			var labels = [];
+			var j = from + interval;
+			for (var i in data) {
+				var label = null;
+				var thisDate = new Date(from + i*interval);
+				if ( (from + i*interval) > j + 1000*60*60*6) {
+					j = from + i*interval;
+					label = ("" + (thisDate.getHours()<10?"0":"") + thisDate.getHours() + 
+						 ":" + ( thisDate.getMinutes() < 10 ? "0" : "") + thisDate.getMinutes());
+				}
+				labels.push(label);
+			}
+			chartHistory.Set("chart.labels", labels.reverse());
+			chartHistory.Set('chart.xticks', d / (1000*60*60*6));
+			chartHistory.Set('chart.background.grid.autofit.numvlines', d/ (1000*60*60*6));
+
 			RGraph.Clear(chartHistory.canvas);
 			chartHistory.original_data = [ data ];
 			chartHistory.Draw()
 
-			window.setTimeout( refreshChartHistory, 60 * 1000);
+			window.setTimeout( startRefreshChartHistory, 60 * 1000);
 		});
 	}
 
-	function init() {
-		load();
-		refreshChartHistory();
+	function redrawChart() {
+		// Gauge
+		gauge1.value = data['value'];
+		gauge1.Draw();
 
-		window.setInterval(function () {
-				// Gauge
-				gauge1.value = data['value'];
-				gauge1.Draw();
+		// LED
+		led.text = '' + Math.round(data['value']);
+		led.Draw()
 
-				// LED
-				led.text = '' + Math.round(data['value']);
-				led.Draw()
+		// Line Chart
+		chart_data.unshift(data['value']);
 
-				// Line Chart
-				if (data['value'] > data_max) {
-					data_max = data['value'];
-				}
-				graph_data[0].unshift(data['value']);
-
-				while (graph_data[0].length > GRAPH_MAX_POINTS) {
-					graph_data[0].pop();
-				}
+		while (chart_data.length > GRAPH_MAX_POINTS) {
+			chart_data.pop();
+		}
 
-				RGraph.Clear(graph.canvas);
-				graph.original_data = graph_data;
-				graph.Draw();
-
-		}, 500);
-		window.setInterval(function() {
-				// Line Chart - Max
-				graph_data[1].unshift(data_max);
-				data_max = 0;
-				while (graph_data[1].length > GRAPH_MAX_POINTS) {
-					graph_data[1].pop();
-				}
-		}, 10000);
+		RGraph.Clear(graph.canvas);
+		graph.original_data = [ chart_data ];
+		graph.Draw();
 	}
+
+
+	json("range/" + (new Date().getTime() - (500 * 1500)), function (data) {
+		chart_data = data;
+		startRefreshData();
+		startRefreshChartHistory();
+		window.setInterval(redrawChart, 500);
+	});
 }
     </script>
   </body>