”2016-08-17”

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

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

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

@@ -279,7 +279,7 @@
 
     changeMode: function() {
       this.mode = this.$el.find('#displaymode')[0].value;
-      this.updateGraph();
+      this.updateGraphV2();
       console.log('new mode:', this.mode);
 
     },
@@ -332,6 +332,108 @@
       graph.showBalloon = true;
 
       return graph;
+    },
+    doChartV2: function(chartData) {
+      var self = this;
+
+      self.chart = AmCharts.makeChart('chartdiv', {
+          type: 'serial',
+          theme: 'light',    legend: {
+              useGraphSettings: true
+            },
+        color:'#ffffff',
+          dataProvider: chartData,
+          dataDateFormat: 'YYYY-MM-DDTHH:NN:SS.QQQ',
+          synchronizeGrid: true,
+          valueAxes: [{
+              id: 'lux',
+              axisColor: '#FFC802',
+              axisThickness: 2,
+              axisAlpha: 1,
+              position: 'left'
+            }, {
+              id: 'co2',
+              axisColor: 'rgba(0,191,255,1)',
+              axisThickness: 2,
+              axisAlpha: 1,
+              position: 'right'
+            }, {
+              id: 'temp',
+              axisColor: 'rgba(46,255,0,1)',
+              axisThickness: 2,
+              gridAlpha: 0,
+              offset: 50,
+              axisAlpha: 1,
+              position: 'left'
+            }, {
+                        id: 'humid',
+                        axisColor: 'rgba(255,0,99,1)',
+                        axisThickness: 2,
+                        axisAlpha: 1,
+            offset: 50,
+                        position: 'right'
+                      }, {
+                                  id: 'noise',
+                                  axisColor: 'rgb(99, 157, 189)',
+                                  axisThickness: 2,
+                                  gridAlpha: 0,
+                                  offset: 100,
+                                  axisAlpha: 1,
+                                  position: 'left'
+                                }],
+          graphs: [{
+              valueAxis: 'lux',
+              lineColor: '#FFC802',
+              title: 'Light Level',
+              valueField: 'lux',
+              fillAlphas: 0
+            }, {
+              valueAxis: 'co2',
+              lineColor: 'rgba(0,191,255,1)',
+              title: 'Co2',
+              valueField: 'co2',
+              fillAlphas: 0
+            }, {
+              valueAxis: 'temp',
+              lineColor: 'rgba(46,255,0,1)',
+              title: 'Temperature',
+              valueField: 'temp',
+              fillAlphas: 0
+            },{
+                        valueAxis: 'humid',
+                        lineColor: 'rgba(255,0,99,1)',
+                        title: 'Humidity',
+                        valueField: 'humid',
+                        fillAlphas: 0
+                      },{
+                                            valueAxis: 'noise',
+                                            lineColor: 'rgb(99, 157, 189)',
+                                            title: 'Sound',
+                                            valueField: 'noise',
+                                            fillAlphas: 0
+                                          }],
+          chartScrollbar: {},
+          chartCursor: {
+              cursorPosition: 'mouse'
+            },
+          categoryField: 'date',
+          categoryAxis: {
+              minPeriod:'mm',
+              parseDates: true,
+              axisColor: '#ff0000',
+              minorGridEnabled: true
+            },
+          export: {
+            enabled: true,
+            position: 'bottom-right'
+          }
+        });
+
+
+      $('#chartdiv').empty();
+      self.chart.write('chartdiv');
+
+
     },
     doChart: function(mode, chartData) {
       var chartScrollbar;
@@ -416,6 +518,22 @@
       $('#chartdiv').empty();
       self.chart.write('chartdiv');
     },
+    updateGraphV2: function() {
+      var self = this;
+      var chartData = [];
+      _(this.collection.models).each(function(i) {
+        chartData.push({
+          date: i.get('dt'),
+          co2: i.get('co2'),
+          humid: i.get('humid'),
+          lux: i.get('lux'),
+          noise: i.get('noise'),
+          temp: i.get('temp')
+        });
+      });
+      console.log(chartData);
+      self.doChartV2(chartData);
+    },
     updateGraph: function() {
       var self = this;
       let getMode = this.modes[this.mode];
@@ -434,13 +552,11 @@
         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]);

mdot/mdot_server/mdot_server/app/test.html

@@ -9,7 +9,7 @@
   <script src="lib/notification.js"></script>
   <link rel="stylesheet" href="css/notification.css">
 </head>
-<body style="background-color:#161616">
+<body style="background-color:#3f3f4f">
 <div class="mui-container">
   <div class='mui-row'>
     <div class="mui-col-md-3 panel">