X-Git-Url: https://git.ucc.asn.au/?a=blobdiff_plain;f=testing%2FMCTXWeb%2Fpublic_html%2Fstatic%2Fmctx.graph.js;h=fd475ad876d540ddec3eac497e0618361dabd548;hb=7e9d726ccd53626251e56b92c8eec47772bfe0f9;hp=687db8413744dc05699a3b4d8d2f5c4de28c223b;hpb=efd9baef20d693f70259634c565cffb3da7cc940;p=matches%2FMCTX3420.git

diff --git a/testing/MCTXWeb/public_html/static/mctx.graph.js b/testing/MCTXWeb/public_html/static/mctx.graph.js
index 687db84..fd475ad 100644
--- a/testing/MCTXWeb/public_html/static/mctx.graph.js
+++ b/testing/MCTXWeb/public_html/static/mctx.graph.js
@@ -11,10 +11,13 @@ mctx.graph.api.sensors = mctx.api + "sensors";
 mctx.graph.api.actuators = mctx.api + "actuators";
 mctx.sensors = {};
 mctx.actuators = {};
+
+mctx.graph.devices = {};
 mctx.graph.dependent = null;
 mctx.graph.independent = null;
 mctx.graph.timer = null;
 mctx.graph.running = false;
+mctx.graph.chart = null;
 
 /**
  * Helper - Calculate pairs of (dependent, independent) values
@@ -22,6 +25,15 @@ mctx.graph.running = false;
  * Appends each value pair to the result
  * @returns result
  */
+/**
+ * Helper - Calculate pairs of (dependent, independent) values
+ * Given input as (time, value) pairs for dependent and independent
+ * Appends each value pair to the result
+ * @param {array[][]} dependent Dependent data to be correlated with independent
+ * @param {array[][]} independent Independent data
+ * @param {array[][]} result Storage location
+ * @returns {dataMerge.result}
+ */
 function dataMerge(dependent, independent, result) {
 	var j = 0;
 	for (var i = 0; i < dependent.length-1; ++i) {
@@ -55,12 +67,13 @@ $.fn.deployDevices = function(input_type, check_first, group) {
   var apply = function(dict, prefix) {
     $.each(dict, function(key, val) {
       var attributes = {
-          'type' : input_type, 'value' : key, 'alt' : val,
+          'type' : input_type, 'value' : key, 'alt' : val.name,
           'class' : prefix, 'name' : group, 
-          'id' : prefix + '_' + val //Unique id (name mangling)
+          'id' : prefix + '_' + val.name //Unique id (name mangling)
       };
+      
       var entry = $("<input/>", attributes);
-      var label = $("<label/>", {'for' : prefix + '_' + val, 'text' : val}); 
+      var label = $("<label/>", {'for' : prefix + '_' + val.name, 'text' : val.name}); 
       entry.prop("checked", check_first);
       check_first = false;
       container.append(entry).append(label);
@@ -89,13 +102,29 @@ $.fn.setDevices = function() {
     $("#xaxis").deployDevices("radio", false, 'xaxis');
     $("#yaxis").deployDevices("checkbox", true, 'yaxis');
     $("#current_time").val(data.running_time);
-    //Add event listeners for when the inputs are changed
+    //Add event listeners for when the
     $(".change input").change(function () {
       $("#graph").setGraph();
     });
   });
 };
 
+function setGraphStatus(on, failText, keep) {
+  if (on) {
+    mctx.graph.running = true;
+    $("#status-text").html("&nbsp;");
+    $("#graph-run").prop("value", "Pause");
+  } else {
+    mctx.graph.running = false;
+    if (failText) {
+      $("#status-text").text(failText).addClass("fail");
+    } else if (!keep) {
+      $("#status-text").text("Graph stopped").removeClass("fail");
+    }
+    $("#graph-run").prop("value", "Run");
+  }
+}
+
 function graphUpdater() {
   var urls = {
     'sensors' : mctx.graph.api.sensors,
@@ -103,7 +132,6 @@ function graphUpdater() {
   }
   
   var updater = function () {
-    var time_limit = 20;
     var responses = [];
     var ctime =  $("#current_time");
     
@@ -114,22 +142,27 @@ function graphUpdater() {
     var devices = mctx.graph.devices;
     
     if (xaxis.size() < 1 || yaxis.size() < 1) {
-      mctx.graph.running = false;
+      setGraphStatus(false, "No x or y axis selected.");
       return;
     }
     
     $.each(devices, function(key, val) {
       if (val.urltype in urls) {
         var parameters = {id : val.id};
-        if (start_time != null) {
+        if (start_time !== null) {
           parameters.start_time = start_time;
         }
-        if (end_time != null) {
+        if (end_time !== null) {
           parameters.end_time = end_time;
         }
         responses.push($.ajax({url : urls[val.urltype], data : parameters})
         .done(function(json) {
           //alert("Hi from " + json.name);
+          if (!$("#status-text").checkStatus(json)) {
+            setGraphStatus(false, null, true); //Don't reset text, checkstatus just set it.
+            return;
+          }
+          
           var dev = val.data;
           for (var i = 0; i < json.data.length; ++i) {
             if (dev.length <= 0 || json.data[i][0] > dev[dev.length-1][0]) {
@@ -144,34 +177,48 @@ function graphUpdater() {
 
     //... When the response is received, then() will happen (I think?)
     $.when.apply(this, responses).then(function () {
-      var plot_data = [];
-      yaxis.each(function() {
-        //alert("Add " + $(this).val() + " to plot");
-        if (xaxis.attr("alt") === "time") {
-          //alert("Against time");
-          plot_data.push(devices[$(this).attr("alt")].data);
+      if (mctx.graph.running) {
+        var plot_data = [];
+        
+        yaxis.each(function() {
+          var series = {};
+          series.label = $(this).attr("alt");
+          
+          //alert("Add " + $(this).val() + " to plot");
+          if (xaxis.attr("alt") === "time") {
+            //alert("Against time");
+            series.data = devices[$(this).attr("alt")].data;
+          } else {
+            var result = []
+            dataMerge(devices[xaxis.attr("alt")].data, 
+                      devices[$(this).attr("alt")].data, result);
+            series.data = result;
+          }
+          plot_data.push(series);
+        });
+        
+        if (mctx.graph.chart !== null) {
+          mctx.graph.chart.setData(plot_data);
+          mctx.graph.chart.setupGrid(); 
+          mctx.graph.chart.draw();
         } else {
-          var result = []
-          dataMerge(devices[xaxis.attr("alt")].data, devices[$(this).attr("alt")].data, result);
-          /*
-          var astr = "[";
-          for (var i = 0; i < result.length; ++i)
-            astr += "[" + result[i][0] + "," + result[i][1] + "]" + ",";
-          astr += "]";
-          alert(astr);
-          */
-          plot_data.push(result);
+          var options = {
+            legend : {
+              container : "#graph-legend"
+            }
+          };
+          mctx.graph.chart = $.plot("#graph", plot_data, options);
         }
-      });
-      
-      $.plot("#graph", plot_data);
-      if (mctx.graph.running) {
         mctx.graph.timer = setTimeout(updater, 1000);
       }
-    }, function () {mctx.graph.running=false; alert("Graph crashed");});
+    }, function () {
+      setGraphStatus("Connection issue - graph stopped.");
+      //This will always happen when a user closes the page
+      //alert("Graph crashed"); 
+    });
   };
   
-  mctx.graph.running = true;
+  setGraphStatus(true);
   updater();
   return this;
 }
@@ -186,6 +233,7 @@ $.fn.setGraph = function () {
   var yaxis = $("#yaxis input[name=yaxis]:checked");
   if (xaxis.size() < 1 || yaxis.size() < 1) {
     //nothing to plot...
+    setGraphStatus(false, "No x or y axis selected.");
     return;
   }
   
@@ -219,6 +267,7 @@ $.fn.setGraph = function () {
   
   if (!mctx.graph.running) {
     $("#graph-run").val("Pause");
+    $("#status-text").text("")
     graphUpdater();
   }
   
@@ -226,14 +275,10 @@ $.fn.setGraph = function () {
 };
 
 $.fn.runButton = function() {
-  //alert($(this).val());
-  if ($(this).val() === "Run") {
-    $("#graph").setGraph();
-    $(this).val("Pause");
-  }
-  else {
-    mctx.graph.running = false;
+  if (mctx.graph.running) {
+    setGraphStatus(false);
     clearTimeout(mctx.graph.timer);
-    $(this).val("Run");
+  } else {
+    $("#graph").setGraph();
   }
 };