new graph

app/js/mdot.js

@@ -3,7 +3,6 @@
 /* global  mainview */
 /* jshint browser: true , devel: true*/
 
-
 (function($) {
 
   var mqttConfig = {
@@ -37,8 +36,7 @@
         this.processAdded();
       });
 
-    },
+    }, processAdded: function() {
-    processAdded: function() {
       console.log('Model:ProcessAdded');
 
       var tempCollection = new Backbone.Collection();
@@ -56,7 +54,14 @@
           this.temporal.high = i.timestamp;
         }
 
-        tempCollection.add({dt: i.timestamp,lux: i.lux, temp: i.temp, co2: i.co2, humid: i.humidity, noise: i.sound});
+        tempCollection.add({
+          dt: i.timestamp,
+          lux: i.lux,
+          temp: i.temp,
+          co2: i.co2,
+          humid: i.humidity,
+          noise: i.sound
+        });
       }, this);
 
       DeviceCollection.temporal = this.temporal;
@@ -64,26 +69,33 @@
       DeviceCollection.models = tempCollection.models;
       DeviceCollection.trigger('update');
       console.log('temporal:', this.temporal);
-    },
+    }, decoder: function(data) {
-    decoder: function(data) {
       var _obj = {};
       var _data = window.atob(data).split('');
 
       var bytes = _data.map(i => i.charCodeAt());
 
-      _obj.light =  parseInt('0x' + ('0' + bytes[0]).substr(-2) + ('0' + bytes[1]).substr(-2));
+      _obj.light = parseInt('0x' + ('0' + bytes[0]).substr(-2) + ('0' + bytes[1]).substr(
-      _obj.co2 = parseInt(_data[2] + _data[3] + _data[4] + _data[5] + _data[6], 10);
+          -2));
-      _obj.temp = (parseInt(_data[7] + _data[8] + _data[9] + _data[10] + _data[11], 10) - 1000) / 10;
+      _obj.co2 = parseInt(_data[2] + _data[3] + _data[4] + _data[5] + _data[6],
-      _obj.humid = (parseInt(_data[12] + _data[13] + _data[14] + _data[15] + _data[16], 10) / 10);
+        10);
-      _obj.noise = parseInt('0x' + ('0' + bytes[17]).substr(-2) + ('0' + bytes[18]).substr(-2));
+      _obj.temp = (parseInt(_data[7] + _data[8] + _data[9] + _data[10] + _data[11],
+          10) - 1000) / 10;
+      _obj.humid = (parseInt(_data[12] + _data[13] + _data[14] + _data[15] + _data[16],
+        10) / 10);
+      _obj.noise = parseInt('0x' + ('0' + bytes[17]).substr(-2) + ('0' + bytes[18]).substr(
+          -2));
       _obj.binData = bytes;
       return _obj;
-    },
+    }, dateTime: function($date) {
-    dateTime: function($date) {
       var dateTime = new Date.create($date);
       var date = dateTime.format('{yyyy}-{MM}-{dd}');
       var time = dateTime.format('{HH}:{mm}:{ss}');
-      return {dateTime: dateTime.format('{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'), date: date, time: time};
+      return {
+        dateTime: dateTime.format('{yyyy}-{MM}-{dd} {HH}:{mm}:{ss}'),
+        date: date,
+        time: time
+      };
     }
   });
 
@@ -114,8 +126,6 @@
     }
   });
 
-
-
   var MDOT = Backbone.View.extend({
     model: EventsModel, el: $('#output'),
 
@@ -125,9 +135,9 @@
       _.bindAll(this, 'render', 'refresh', 'update');
       this.collection.bind('change reset add remove', this.render, this);
 
-      //this.template = _.template($('#list-template').html());
+      //This.template = _.template($('#list-template').html());
       this.template = _.template($('#loaded-template').html());
-      //this.render();
+      //This.render();
     }, refresh: function() {
 
     }, update: function() {
@@ -144,7 +154,7 @@
       var that = this;
       that.$el.append(this.template);
 
-     /* var that = this;
+      /* Var that = this;
        this.$el.empty();
        this.collection.each(function(model) {
        var events = model.get('events');
@@ -159,28 +169,23 @@
     }
   });
 
-
   var MainModel = Backbone.Model.extend({});
 
   var MainView = Backbone.View.extend({
-    el: $('#main'),
+    el: $('#main'), template: _.template($('#main-template').html()), events: {
-    template: _.template($('#main-template').html()),
-    events: {
       'change select#device': 'changeDevice',
       'click button#refresh': 'updateDevice',
       'change input#from': 'changeDate',
       'change input#to': 'changeDate',
       submit: function(event) {}
 
-          },
+    }, initialize: function() {
-    initialize: function() {
       _.bindAll(this, 'render', 'changeDevice', 'updateDevice');
 
       this.model.on('change', this.updateDevice);
       console.log('MainView:', this);
       this.render();
-        },
+    }, render: function() {
-    render: function() {
       $(this.el).html(this.template());
       return this;
     }, changeDate: function(elm) {
@@ -192,15 +197,13 @@
         this.model.set(elm.currentTarget.id, elm.currentTarget.valueAsDate);
       }
 
-        },
+    }, changeDevice: function() {
-    changeDevice: function() {
       var newDevice;
       console.log('MainView:ChangeDevice');
       newDevice = this.$el.find('#device')[0].value;
 
       this.model.set('device', newDevice);
-    },
+    }, updateDevice: function() {
-    updateDevice: function() {
       var fetchObj = {beforeSend: sendAuthentication};
       var rangeObj = {start: null, end: null};
       console.log('MainView:Updatedevice');
@@ -216,6 +219,7 @@
         this.collection.url = '/apiv2/mdot/' + this.model.get('device');
         // this.collection.url =  'http://127.0.0.1:5984/mdot/_design/getDevice/_view/getDevice';
 
+        $('#output').empty();
         this.collection.fetch(fetchObj);
       } else {
         console.error('Nothing to get!');
@@ -254,7 +258,6 @@
     render: function() {
       $(this.el).html(this.template());
 
-
       return this;
     },
     setupChart: function() {
@@ -284,9 +287,22 @@ var self = this;
       var temporal = {high: 0, low: 0};
       var HL = {high: 0, low: 0};
 
+      var mode = parseInt(this.mode);
+      console.log('mode:', mode, this.mode);
+      debugger;
       _(this.collection.models).each(function(i) {
         var dt = i.get('dt');
-            var value = i.get(getMode);
+        var obj;
+        var value, valueB;
+        if (mode < 6) {
+          value = i.get(getMode);
+        } else {
+          if (mode === 6) {
+            value = i.get(this.modes[1]);
+            valueB = i.get(this.modes[3]);
+          }
+        }
+
         if (temporal.low === 0 || dt < temporal.low) {
           temporal.low = dt;
         }
@@ -301,43 +317,40 @@ var self = this;
           HL.high = value;
         }
 
-                chartData.push({
+        obj = {date: dt, value: value};
-                            date: dt,
+
-                            value: value
+        if (mode => 6) {
-                          });
+          obj.valueB = valueB;
+        }
+        chartData.push(obj);
 
       }, this);
 
-
-      console.log('this.temporal', this.temporal);
-      console.log('temporal', temporal);
       console.log(chartData);
 
-
       console.log('Doing chart now');
 
-        //debugger;
+      //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.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ';
-                      self.chart.categoryField = "date";
+      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.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.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
+      // Value
       var valueAxis = new AmCharts.ValueAxis();
       valueAxis.tickLength = 0;
       valueAxis.axisAlpha = 0;
@@ -345,16 +358,53 @@ var self = this;
       valueAxis.showLastLabel = false;
       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.position = 'right';
+        self.chart.addValueAxis(co2Axis);
+
+      }
+
+
       // GRAPH
       var graph = new AmCharts.AmGraph();
       graph.dashLength = 3;
-                      graph.lineColor = "#00CC00";
+      graph.lineColor = '#00CC00';
-                      graph.valueField = "value";
+      graph.valueField = 'value';
       graph.dashLength = 3;
-                      graph.bullet = "round";
+      graph.bullet = 'round';
-                      graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>";
+      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);
+
+      }
       // CURSOR
       var chartCursor = new AmCharts.ChartCursor();
       chartCursor.valueLineEnabled = true;
@@ -365,22 +415,20 @@ var self = this;
       var chartScrollbar = new AmCharts.ChartScrollbar();
       self.chart.addChartScrollbar(chartScrollbar);
 
-                      // HORIZONTAL GREEN RANGE
+     /* // HORIZONTAL GREEN RANGE
       var guide = new AmCharts.Guide();
       guide.value = 525;
       guide.toValue = 575;
-                      guide.fillColor = "#00CC00";
+      guide.fillColor = '#00CC00';
       guide.inside = true;
       guide.fillAlpha = 0.2;
       guide.lineAlpha = 0;
-                      valueAxis.addGuide(guide);
+      valueAxis.addGuide(guide);*/
-
 
       // WRITE
 
       $('#chartdiv').empty();
-                      self.chart.write("chartdiv");
+      self.chart.write('chartdiv');
-
 
     }
 
@@ -391,7 +439,10 @@ var self = this;
   var mdotCollection = new mDotCollection();
 
   var mainSettings = new MainModel();
-  var mainview = new MainView({collection: mdotCollection, model: mainSettings});
+  var mainview = new MainView({
+    collection: mdotCollection,
+    model: mainSettings
+  });
 
   var mdot = new MDOT({collection: mdotCollection});
 

app/test.html

@@ -3,54 +3,38 @@
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
-  <link href="css/mui.css" rel="stylesheet"
+  <link href="css/mui.css" rel="stylesheet" type="text/css"/>
-         type="text/css"/>
+  <link href="css/style.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>
-
 <div class="mui-container">
   <div class='mui-row'>
     <div class="mui-col-md-3">
-    <div id="main">
+      <div id="main"></div>
-      </div>
+      <div id="graph"></div>
-
-    <div id="graph">
-      </div>
       <div id="output"></div>
-
     </div>
     <div class="mui-col-md-9">
       <div class="mui-container">
         <div id="chartdiv" style="width:100%; height:600px;"></div>
       </div>
-
     </div>
   </div>
-
-
-
-
   <!--<div id="main"></div>-->
   <!--<div id="graph"></div>-->
-
   <script type="text/template" id="loaded-template">
-  <div style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded</div>
+    <div
+      style="background-color: darkred;color: white;font-weight: 900;text-align: center">Loaded
+    </div>
   </script>
   <script type="text/template" id="main-template">
     <div class="mui-container">
-
       <div class="mui-row">
-
         <div class="mui-select">
           <select id="device" name="device">
-              <option>
+            <option></option>
-
-                            </option>
             <option>
               HIE-mobile-1
             </option>
@@ -81,57 +65,48 @@
             <option>
               HIE-smart-campus-7
             </option>
-
             <option>
               CENSIS-LoRa-1
             </option>
-
             <option>
               CENSIS-LoRa-2
             </option>
-
             <option>
               CENSIS-LoRa-3
             </option>
-
             <option>
               CENSIS-LoRa-4
             </option>
             <option>
               HIE-mDot-1
             </option>
-
           </select> <label>Device</label>
         </div>
-
       </div>
       <div class="mui-row">
         <div class="mui-col-md-6">
           <div class="mui-textfield">
-              <input type="date" placeholder="" id='from' name="from" /> <label>From</label>
+            <input type="date" placeholder="" id='from' name="from"/>
+            <label>From</label>
           </div>
         </div>
-
         <div class="mui-col-md-6">
           <div class="mui-textfield">
-              <input type="date" placeholder="" id='to' name="to" /> <label>To</label>
+            <input type="date" placeholder="" id='to' name="to"/>
+            <label>To</label>
           </div>
         </div>
       </div>
     </div>
-
     <div class="mui-row">
-      <button id='refresh' class="mui-btn mui-btn--small mui-btn--primary">Refresh</button>
+      <button id='refresh'
+              class="mui-btn mui-btn--small mui-btn--primary">Refresh
+      </button>
     </div>
-
   </script>
-
-
-
   <script type="text/template" id="list-template">
     <ul></ul>
   </script>
-
   <script type="text/template" id="item-template">
     <div class="mui-row">
       <div class="mui-col-md-2"><%= item.timestamp %></div>
@@ -142,7 +117,6 @@
       <div class="mui-col-md-2"><%= item.sound %></div>
     </div>
   </script>
-
   <script type="text/template" id="AMChart-template">
     <div class="mui-container">
       <div class="mui-row">
@@ -152,31 +126,30 @@
             <option value="1">
               Light
             </option>
-
             <option value="2">
               Temp
             </option>
             <option value="3">
               Co2
             </option>
-
             <option value="4">
               Humidity
             </option>
             <option value="5">
               Noise
             </option>
+            <option value="6">
+              Light & Co2
+            </option>
+            <option value="7">
+              Temperature & Humidity
+            </option>
 
           </select> <label>Graph</label>
-
         </div>
       </div>
     </div>
-
-
   </script>
-
-
   <script type="text/template" id="graph-template">
     <div class="mui-container">
       <div class="mui-row">
@@ -186,23 +159,19 @@
             <option value="1">
               Light
             </option>
-
             <option value="2">
               Temp
             </option>
             <option value="3">
               Co2
             </option>
-
             <option value="4">
               Humidity
             </option>
             <option value="5">
               Noise
             </option>
-
           </select> <label>Graph</label>
-
         </div>
         <div class="mui-col-md-6">
           <svg id="graphSVG" width="300" height="150" fill="blue">
@@ -212,24 +181,15 @@ Co2
             <line x1="46" y1="136" x2="280" y2="136"
                   style="stroke:#004c6d;stroke-width:2;"></line>
             <text id="MinY" x="36" y="139" text-anchor="end">0</text>
-
+            <polyline id="line" fill="none" stroke="#2196F3" text-anchor="end"
-              <polyline id="line" fill="none" stroke="#2196F3"
+                      stroke-width="1" points=""></polyline>
-                        text-anchor="end" stroke-width="1"
-                        points=""></polyline>
             <g id="datapoints"></g>
-          <g id="baseline">
+            <g id="baseline"></g>
-
-          </g>
-
           </svg>
         </div>
       </div>
     </div>
-
-
   </script>
-
-
   <script src="lib/jquery.js"
           integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4="
           crossorigin="anonymous"></script>
@@ -237,14 +197,9 @@ Co2
   <script src="lib/underscore.js"></script>
   <script src="lib/backbone.js"></script>
   <script src="lib/sugar-date.js"></script>
-
   <script src="lib/amcharts.js"></script>
   <script src="lib/serial.js"></script>
   <script src="lib/amstock.js"></script>
-
-
   <script src="js/mdot.js"></script>
-
-
 </body>
 </html>