”2016-08-16”

mdot/mdot_server/mdot_server/app/css/test.css

@@ -0,0 +1,3 @@
+.panel {
+  background-color: rgba(255,255,255,0.95);
+  }

mdot/mdot_server/mdot_server/app/js/mdot.js

@@ -5,6 +5,7 @@
 
 (function($) {
 
+  var GraphView;
   var mqttConfig = {
     orgId: 'qz0da4',
     userName: 'a-qz0da4-dfwwdkmkzr',
@@ -229,12 +230,15 @@
 
   });
 
-  var GraphView = Backbone.View.extend({
+  GraphView = Backbone.View.extend({
     el: $('#graph'),
     template: _.template($('#AMChart-template').html()),
     initialize: function() {
       this.modes = ['', 'lux', 'temp', 'co2', 'humid', 'noise'];
-      this.titles = ['','Light Levels','Temperature','Co2 Levels','Humidity','Sound'];
+      this.titles = [
+        '', 'Light Levels', 'Temperature', 'Co2 Levels', 'Humidity', 'Sound'
+      ];
+      this.otherTitles = ['Co2 Levels', 'Humidity'];
       this.mode = 0;
 
       // Config AMChart
@@ -279,6 +283,139 @@
       console.log('new mode:', this.mode);
 
     },
+    makeAxis: function(params) {
+      let title = params.title || 'Missing title';
+      let color = params.color || '#ff0000';
+      let position = params.position || 'left';
+
+      var newAxis = new AmCharts.ValueAxis();
+      newAxis.tickLength = 0;
+      newAxis.axisAlpha = 0;
+      newAxis.showFirstLabel = false;
+      newAxis.showLastLabel = false;
+      newAxis.title = title;
+      newAxis.position = position;
+      newAxis.gridColor = '#FFFFFF';
+      newAxis.axisColor = '#cccccc';
+      newAxis.color = color;
+
+      return newAxis;
+    },
+    makeGraph: function(params) {
+
+      if (!params.hasOwnProperty('valueField')) {
+        console.error('MakeGraph - missing required field');
+      }
+
+      let lineColor = params.lineColor || 'rgba(46,255,0,1)';
+      let valueField = params.valueField;
+      let title = params.title || 'Missing title';
+
+      let valueAxis = params.valueAxis || null;
+      let labelPosition = params.labelPosition || 'left';
+
+      var graph = new AmCharts.AmGraph();
+
+      graph.lineColor = lineColor;
+      graph.labelColor = lineColor;
+      graph.valueField = valueField;
+      graph.balloonText = title + ':[[value]]';
+
+      graph.title = title;
+
+      if (valueAxis) {
+        graph.valueAxis = valueAxis;
+      }
+      graph.legendValueText = '[[description]]/[[value]]';
+
+      graph.labelPosition = labelPosition;
+      graph.showBalloon = true;
+
+      return graph;
+    },
+    doChart: function(mode, chartData) {
+      var chartScrollbar;
+      var chartCursor;
+      var graph;
+      var valueAxis;
+      var categoryAxis;
+      var self = this;
+      var otherAxis;
+      console.log(chartData);
+
+      console.log('Doing chart now');
+
+      //Debugger;
+      // SERIAL CHART
+      self.chart = new AmCharts.AmSerialChart();
+
+      //"2016-08-10T23:04:31.000Z"
+      self.chart.dataProvider = chartData;
+      self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
+      self.chart.categoryField = 'date';
+      self.chart.color = '#ffffff';
+      self.chart.marginLeft = 0;
+
+      // AXES
+      // category
+      categoryAxis = self.chart.categoryAxis;
+      categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true
+      categoryAxis.minPeriod = 'mm';
+      categoryAxis.gridAlpha = 0.2;
+      categoryAxis.minorGridAlpha = 0;
+      categoryAxis.axisAlpha = 0.5;
+      categoryAxis.minorGridEnabled = true;
+      categoryAxis.gridColor = '#FFFFFF';
+      categoryAxis.axisColor = '#cccccc';
+      categoryAxis.inside = true;
+
+      valueAxis = self.makeAxis({
+        title: this.titles[this.mode], color: 'rgba(46,255,0,1)'
+      });
+      self.chart.addValueAxis(valueAxis);
+
+      if (mode > 5) {
+
+        otherAxis = self.makeAxis({
+          title: this.otherTitles[mode - 6],
+          color: 'rgba(0,191,255,1)',
+          position: 'right'
+        });
+        self.chart.addValueAxis(otherAxis);
+      }
+
+      graph = self.makeGraph({
+        valueField: 'value', title: this.titles[this.mode]
+      });
+      self.chart.addGraph(graph);
+
+      if (mode > 5) {
+        var otherGraph = self.makeGraph({
+          lineColor: 'rgba(0,191,255,1)',
+          valueField: 'valueB',
+          title: this.otherTitles[mode - 6],
+          valueAxis: otherAxis,
+          labelPosition: 'right'
+        });
+        self.chart.addGraph(otherGraph);
+
+      }
+
+      // CURSOR
+      chartCursor = new AmCharts.ChartCursor();
+      chartCursor.valueLineEnabled = true;
+      chartCursor.valueLineBalloonEnabled = true;
+      self.chart.addChartCursor(chartCursor);
+
+      // SCROLLBAR
+      chartScrollbar = new AmCharts.ChartScrollbar();
+      chartScrollbar.graph = graph;
+      chartScrollbar.position = 'bottom';
+      self.chart.addChartScrollbar(chartScrollbar);
+
+      $('#chartdiv').empty();
+      self.chart.write('chartdiv');
+    },
     updateGraph: function() {
       var self = this;
       let getMode = this.modes[this.mode];
@@ -297,11 +434,13 @@
         var value, valueB;
         if (mode < 6) {
           value = i.get(getMode);
-        } else {
+        }
+        else {
           if (mode === 6) {
             value = i.get(this.modes[1]);
             valueB = i.get(this.modes[3]);
-          } else {
+          }
+          else {
 
             value = i.get(this.modes[2]);
             valueB = i.get(this.modes[4]);
@@ -332,149 +471,7 @@
 
       }, this);
 
-      console.log(chartData);
+      self.doChart(mode, chartData);
-
-      console.log('Doing chart now');
-
-      //Debugger;
-      // SERIAL CHART
-      self.chart = new AmCharts.AmSerialChart();
-
-      //"2016-08-10T23:04:31.000Z"
-      self.chart.dataProvider = chartData;
-      self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
-      self.chart.categoryField = 'date';
-
-      // AXES
-      // category
-      var categoryAxis = self.chart.categoryAxis;
-      categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true
-      categoryAxis.minPeriod = 'mm'; // Our data is daily, so we set minPeriod to DD
-      categoryAxis.gridAlpha = 0.1;
-      categoryAxis.minorGridAlpha = 0.1;
-      categoryAxis.axisAlpha = 0;
-      categoryAxis.minorGridEnabled = true;
-      categoryAxis.inside = true;
-
-      // Value
-      var valueAxis = new AmCharts.ValueAxis();
-      valueAxis.tickLength = 0;
-      valueAxis.axisAlpha = 0;
-      valueAxis.showFirstLabel = false;
-      valueAxis.showLastLabel = false;
-      valueAxis.title = this.titles[this.mode];
-      valueAxis.position = 'left';
-      self.chart.addValueAxis(valueAxis);
-
-      if (mode === 6) {
-        var co2Axis = new AmCharts.ValueAxis();
-        co2Axis.tickLength = 0;
-        co2Axis.axisAlpha = 0;
-        co2Axis.showFirstLabel = false;
-        co2Axis.showLastLabel = false;
-        co2Axis.title = 'Co2 Levels';
-        co2Axis.position = 'right';
-        self.chart.addValueAxis(co2Axis);
-
-      }
-
-      if (mode === 7) {
-        var otherAxis = new AmCharts.ValueAxis();
-        otherAxis.tickLength = 0;
-        otherAxis.axisAlpha = 0;
-        otherAxis.showFirstLabel = false;
-        otherAxis.showLastLabel = false;
-        otherAxis.title = 'Humidity';
-        otherAxis.position = 'right';
-        self.chart.addValueAxis(otherAxis);
-
-      }
-
-
-      // GRAPH
-      var graph = new AmCharts.AmGraph();
-      graph.dashLength = 3;
-      graph.lineColor = '#00CC00';
-      graph.valueField = 'value';
-      graph.dashLength = 3;
-      graph.bullet = 'round';
-      graph.balloonText = '[[category]]<br><b><span style=\'font-size:14px;\'>value:[[value]]</span></b>';
-      self.chart.addGraph(graph);
-
-
-      if (mode === 6) {
-        var co2graph = new AmCharts.AmGraph();
-        co2graph.valueField = 'valueB';
-        co2graph.title = 'Co2';
-        co2graph.type = 'line';
-        co2graph.valueAxis = co2Axis; // Indicate which axis should be used
-        co2graph.lineColor = '#786c56';
-        co2graph.lineThickness = 1;
-        co2graph.legendValueText = '[[description]]/[[value]]';
-
-        co2graph.bullet = 'round';
-        co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
-        co2graph.bulletBorderColor = '#786c56';
-        co2graph.bulletBorderAlpha = 1;
-        co2graph.bulletBorderThickness = 2;
-        co2graph.bulletColor = '#000000';
-        //Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
-        co2graph.labelPosition = 'right';
-        //Co2graph.balloonText = "latitude:[[value]]";
-        co2graph.showBalloon = true;
-        co2graph.dashLengthField = 'dashLength';
-        self.chart.addGraph(co2graph);
-
-      }
-
-      if (mode === 7) {
-              var otherGraph = new AmCharts.AmGraph();
-              otherGraph.valueField = 'valueB';
-              otherGraph.title = 'Humidity';
-              otherGraph.type = 'line';
-              otherGraph.valueAxis = otherAxis; // Indicate which axis should be used
-              otherGraph.lineColor = '#786c56';
-              otherGraph.lineThickness = 1;
-              otherGraph.legendValueText = '[[description]]/[[value]]';
-
-              otherGraph.bullet = 'round';
-              otherGraph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size
-              otherGraph.bulletBorderColor = '#786c56';
-              otherGraph.bulletBorderAlpha = 1;
-              otherGraph.bulletBorderThickness = 2;
-              otherGraph.bulletColor = '#000000';
-              //Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets.
-              otherGraph.labelPosition = 'right';
-              //Co2graph.balloonText = "latitude:[[value]]";
-              otherGraph.showBalloon = true;
-              otherGraph.dashLengthField = 'dashLength';
-              self.chart.addGraph(otherGraph);
-
-            }
-      // CURSOR
-      var chartCursor = new AmCharts.ChartCursor();
-      chartCursor.valueLineEnabled = true;
-      chartCursor.valueLineBalloonEnabled = true;
-      self.chart.addChartCursor(chartCursor);
-
-      // SCROLLBAR
-      var chartScrollbar = new AmCharts.ChartScrollbar();
-      self.chart.addChartScrollbar(chartScrollbar);
-
-      /* // HORIZONTAL GREEN RANGE
-       var guide = new AmCharts.Guide();
-       guide.value = 525;
-       guide.toValue = 575;
-       guide.fillColor = '#00CC00';
-       guide.inside = true;
-       guide.fillAlpha = 0.2;
-       guide.lineAlpha = 0;
-       valueAxis.addGuide(guide);*/
-
-      // WRITE
-
-      $('#chartdiv').empty();
-      self.chart.write('chartdiv');
 
     }
 

mdot/mdot_server/mdot_server/app/test.html

@@ -4,14 +4,15 @@
   <meta charset="UTF-8">
   <title>Title</title>
   <link href="css/mui.css" rel="stylesheet" type="text/css"/>
+  <link href="css/test.css" rel="stylesheet" type="text/css"/>
   <link href="css/style.css" rel="stylesheet" type="text/css"/>
   <script src="lib/notification.js"></script>
   <link rel="stylesheet" href="css/notification.css">
 </head>
-<body>
+<body style="background-color:#161616">
 <div class="mui-container">
   <div class='mui-row'>
-    <div class="mui-col-md-3">
+    <div class="mui-col-md-3 panel">
       <div id="main"></div>
       <div id="graph"></div>
       <div id="output"></div>