diff --git a/smartoffice/SODashServer/SODashServer/app/js/mdot.js b/smartoffice/SODashServer/SODashServer/app/js/mdot.js
index 90685ae..7151a55 100644
--- a/smartoffice/SODashServer/SODashServer/app/js/mdot.js
+++ b/smartoffice/SODashServer/SODashServer/app/js/mdot.js
@@ -18,6 +18,8 @@
     var pass = '9txJEf3Cjy7hkSOvkv'; // Your actual password
     var token = user.concat(':', pass);
     xhr.setRequestHeader('Authorization', ('Basic '.concat(btoa(token))));
+
+    console.log('Auth:', ('Basic '.concat(btoa(token))));
   };
 
   var EventsModel = Backbone.Model.extend({
@@ -165,7 +167,10 @@
     events: {
             'change select#device': 'changeDevice',
             'click button#refresh': 'updateDevice',
+            'change input#from': 'changeDate',
+            'change input#to': 'changeDate',
             submit: function(event) {}
+
           },
     initialize: function() {
           _.bindAll(this, 'render','changeDevice', 'updateDevice');
@@ -177,7 +182,17 @@
     render: function() {
       $(this.el).html(this.template());
       return this;
-    },
+    },changeDate: function(elm) {
+          console.log('ChangeDate', elm);
+
+          if (Number.isNaN(elm.currentTarget.valueAsNumber)) {
+            this.model.unset(elm.currentTarget.id);
+          } else {
+            this.model.set(elm.currentTarget.id, elm.currentTarget.valueAsNumber);
+          }
+
+
+        },
     changeDevice: function() {
       var newDevice;
       console.log('MainView:ChangeDevice');
@@ -186,9 +201,24 @@
       this.model.set('device', newDevice);
     },
     updateDevice: function() {
+      var fetchObj = {beforeSend: sendAuthentication};
+      var rangeObj = {start: null, end: null};
       console.log('MainView:Updatedevice');
-      this.collection.url =  'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + this.model.get('device');
-      this.collection.fetch({beforeSend: sendAuthentication});
+      console.log(this.model);
+      if (this.model.has('from') && this.model.has('to')) {
+        rangeObj.start = this.model.get('from');
+        rangeObj.end = this.model.get('to');
+        fetchObj.data = $.param(rangeObj);
+        console.log(fetchObj.data);
+      }
+      if (this.model.has('device')) {
+        //FetchObj.data = $.param({key:'"'+ this.model.get('device') + '"'});
+        this.collection.url =  'https://qz0da4.internetofthings.ibmcloud.com/api/v0002/historian/types/mDot/devices/' + this.model.get('device');
+        // this.collection.url =  'http://127.0.0.1:5984/mdot/_design/getDevice/_view/getDevice';
+        this.collection.fetch(fetchObj);
+      } else {
+        console.error('Nothing to get!');
+      }
 
     }
 
@@ -241,7 +271,7 @@
           let data = [];
           let circle, title;
           let getMode = this.modes[this.mode];
-      var occupied;
+          var occupied;
 
           _(this.collection.models).each(function(i) {
                 // Console.log(i);
@@ -277,8 +307,7 @@
               occupied = (points[x] > 920) ? 'purple' : 'red';
             } else if (parseInt(this.mode) === 3) {
               occupied = (points[x] > 579) ? 'purple' : 'red';
-            }
-            else {
+            } else {
               occupied = 'red';
             }
 
@@ -313,41 +342,40 @@
 
 
             bline  = document.createElementNS(this.xmlns,'line');
-                        bline.setAttributeNS(null,'x1',46);
-                        bline.setAttributeNS(null,'y1',(136 - (4884 * scale)).toFixed(2).toString());
-                        bline.setAttributeNS(null,'x2',280);
-                        bline.setAttributeNS(null,'y2',(136 - (4884 * scale)).toFixed(2).toString());
+            bline.setAttributeNS(null,'x1',46);
+            bline.setAttributeNS(null,'y1',(136 - (4884 * scale)).toFixed(2).toString());
+            bline.setAttributeNS(null,'x2',280);
+            bline.setAttributeNS(null,'y2',(136 - (4884 * scale)).toFixed(2).toString());
 
-                        bline.setAttributeNS(null,'stroke','#00ff55');
-                        bline.setAttributeNS(null,'stroke-width','1');
+            bline.setAttributeNS(null,'stroke','#00ff55');
+            bline.setAttributeNS(null,'stroke-width','1');
             this.$baseline[0].appendChild(bline);
           }
 
-      if (parseInt(this.mode) === 3)
-      {
-        var bline  = document.createElementNS(this.xmlns,'line');
-        bline.setAttributeNS(null,'x1',46);
-        bline.setAttributeNS(null,'y1',(136 - (632 * scale)).toFixed(2).toString());
-        bline.setAttributeNS(null,'x2',280);
-        bline.setAttributeNS(null,'y2',(136 - (632 * scale)).toFixed(2).toString());
+          if (parseInt(this.mode) === 3) {
+            var bline  = document.createElementNS(this.xmlns,'line');
+            bline.setAttributeNS(null,'x1',46);
+            bline.setAttributeNS(null,'y1',(136 - (632 * scale)).toFixed(2).toString());
+            bline.setAttributeNS(null,'x2',280);
+            bline.setAttributeNS(null,'y2',(136 - (632 * scale)).toFixed(2).toString());
 
-        bline.setAttributeNS(null,'stroke','yellow');
-        bline.setAttributeNS(null,'stroke-width','1');
+            bline.setAttributeNS(null,'stroke','yellow');
+            bline.setAttributeNS(null,'stroke-width','1');
 
-        this.$baseline[0].appendChild(bline);
+            this.$baseline[0].appendChild(bline);
 
-        var bline  = document.createElementNS(this.xmlns,'line');
-        bline.setAttributeNS(null,'x1',46);
-        bline.setAttributeNS(null,'y1',(136 - (1045 * scale)).toFixed(2).toString());
-        bline.setAttributeNS(null,'x2',280);
-        bline.setAttributeNS(null,'y2',(136 - (1045 * scale)).toFixed(2).toString());
+            var bline  = document.createElementNS(this.xmlns,'line');
+            bline.setAttributeNS(null,'x1',46);
+            bline.setAttributeNS(null,'y1',(136 - (1045 * scale)).toFixed(2).toString());
+            bline.setAttributeNS(null,'x2',280);
+            bline.setAttributeNS(null,'y2',(136 - (1045 * scale)).toFixed(2).toString());
 
-        bline.setAttributeNS(null,'stroke','red');
-        bline.setAttributeNS(null,'stroke-width','1');
+            bline.setAttributeNS(null,'stroke','red');
+            bline.setAttributeNS(null,'stroke-width','1');
 
-        this.$baseline[0].appendChild(bline);
+            this.$baseline[0].appendChild(bline);
 
-      }
+          }
 
 
           this.$line[0].setAttribute('points',calcArray.join(' '));
diff --git a/smartoffice/SODashServer/SODashServer/app/test.html b/smartoffice/SODashServer/SODashServer/app/test.html
index 133559f..aebdc10 100644
--- a/smartoffice/SODashServer/SODashServer/app/test.html
+++ b/smartoffice/SODashServer/SODashServer/app/test.html
@@ -76,13 +76,13 @@
 
           <div class="mui-col-md-3">
             <div class="mui-textfield">
-              <input type="date" placeholder="" name="from" /> <label>From</label>
+              <input type="date" placeholder="" id='from' name="from" /> <label>From</label>
             </div>
           </div>
 
           <div class="mui-col-md-3">
             <div class="mui-textfield">
-              <input type="date" placeholder="" name="to" /> <label>To</label>
+              <input type="date" placeholder="" id='to' name="to" /> <label>To</label>
             </div>
           </div>
         </div>