diff --git a/app/.meteor/packages b/app/.meteor/packages
index 15145a2..a373565 100644
--- a/app/.meteor/packages
+++ b/app/.meteor/packages
@@ -26,3 +26,4 @@ percolate:synced-cron
 rzymek:moment-locale-bs
 peppelg:bootstrap-3-modal
 fortawesome:fontawesome
+mfpierre:chartist-js
diff --git a/app/.meteor/versions b/app/.meteor/versions
index 45149dc..a0b1dd9 100644
--- a/app/.meteor/versions
+++ b/app/.meteor/versions
@@ -29,6 +29,7 @@ email@1.0.8
 es5-shim@4.1.14
 fastclick@1.0.7
 fortawesome:fontawesome@4.5.0
+fourseven:scss@3.4.1
 geojson-utils@1.0.4
 handlebars@1.0.4
 hot-code-push@1.0.0
@@ -47,6 +48,7 @@ localstorage@1.0.5
 logging@1.0.8
 meteor@1.1.10
 meteor-base@1.0.1
+mfpierre:chartist-js@1.6.1
 minifiers@1.1.7
 minimongo@1.0.10
 mobile-experience@1.0.1
diff --git a/app/client/state.js b/app/client/state.js
index f26deef..4d799d3 100644
--- a/app/client/state.js
+++ b/app/client/state.js
@@ -46,15 +46,15 @@ Template.state.helpers({
     var sensor = last_sensor_reading();
     var stateObject = controller_state();
     if (sensor) {
-      if (sensor.tankFull === 0 && stateObject.state.in_valve === 'open' && stateObject.state.out_valve === 'closed') return "/images/barrellFillingUp.png";
-      else if (sensor.tankFull === 1 && (stateObject.state.out_valve === 'closed')) return "/images/barrellFull.png";
-      else if (sensor.tankFull === 1 && (stateObject.state.out_valve === 'opening')) return "/images/barrellStartWateringFull.png";
-      else if (sensor.tankFull === 1 && (stateObject.state.out_valve === 'open')) return "/images/barrellWateringFull.png";
-      else if (sensor.tankFull === 1 && (stateObject.state.out_valve === 'closing')) return "/images/barrellStopWateringFull.png";
-      else if (sensor.tankFull === 0 && (stateObject.state.out_valve === 'closed')) return "/images/barrellNotFull.png";
-      else if (sensor.tankFull === 0 && (stateObject.state.out_valve === 'opening')) return "/images/barrellStartWateringNotFull.png";
-      else if (sensor.tankFull === 0 && (stateObject.state.out_valve === 'open')) return "/images/barrellWateringNotFull.png"
-      else if (sensor.tankFull === 0 && (stateObject.state.out_valve === 'closing')) return "/images/barrellStopWateringNotFull.png"
+      if (parseInt(sensor.tankFull) === 0 && stateObject.state.in_valve === 'open' && stateObject.state.out_valve === 'closed') return "/images/barrellFillingUp.png";
+      else if (parseInt(sensor.tankFull) === 1 && (stateObject.state.out_valve === 'closed')) return "/images/barrellFull.png";
+      else if (parseInt(sensor.tankFull) === 1 && (stateObject.state.out_valve === 'opening')) return "/images/barrellStartWateringFull.png";
+      else if (parseInt(sensor.tankFull) === 1 && (stateObject.state.out_valve === 'open')) return "/images/barrellWateringFull.png";
+      else if (parseInt(sensor.tankFull) === 1 && (stateObject.state.out_valve === 'closing')) return "/images/barrellStopWateringFull.png";
+      else if (parseInt(sensor.tankFull) === 0 && (stateObject.state.out_valve === 'closed')) return "/images/barrellNotFull.png";
+      else if (parseInt(sensor.tankFull) === 0 && (stateObject.state.out_valve === 'opening')) return "/images/barrellStartWateringNotFull.png";
+      else if (parseInt(sensor.tankFull) === 0 && (stateObject.state.out_valve === 'open')) return "/images/barrellWateringNotFull.png"
+      else if (parseInt(sensor.tankFull) === 0 && (stateObject.state.out_valve === 'closing')) return "/images/barrellStopWateringNotFull.png"
       else return "/images/statusAmber.png";
     } else return "/images/statusRed.png";
   },
@@ -80,10 +80,11 @@ Template.state.helpers({
 
   pretty_days: function(daysInNumbers) {
     var days = ["Nedjelja", "Ponedjeljak", "Utorak", "Srijeda", "Četvrtak", "Petak", "Subota"];
-    if (daysInNumbers.length == 7) {
-      return "Svaki dan"
-    } else if (!daysInNumbers || daysInNumbers.length == 0) {
+    if (!daysInNumbers || daysInNumbers.length == 0) {
       return "Nikad"
+    }
+    else if (daysInNumbers.length == 7) {
+      return "Svaki dan"
     } else {
       return daysInNumbers.map(function(number) {
         return days[number -1 ];
diff --git a/app/client/state_details.html b/app/client/state_details.html
index 14b1c45..7d34a48 100644
--- a/app/client/state_details.html
+++ b/app/client/state_details.html
@@ -8,9 +8,29 @@
         </div>
 
         <div class="modal-body">
-          <div><strong>Otpusni ventil:</strong> {{pretty_valve state.out_valve }}</div>
-            <div><strong>Ulazni ventil/pumpa:</strong> {{pretty_valve state.in_valve }}</div>
-            <div><strong>Zadnja komunikacija: {{ last_communication_time }}</strong></div>
+          <div class="row">
+            <div class="col-md-12 chart">
+              <div><strong>Otpusni ventil:</strong> {{pretty_valve state.out_valve }}</div>
+              <div><strong>Ulazni ventil/pumpa:</strong> {{pretty_valve state.in_valve }}</div>
+              <div><strong>Zadnja komunikacija: {{ last_communication_time }}</strong>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12 chart">
+              <h3>Temperatura:</h3>
+              <div id="temperature_graph">
+              </div>
+
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12 chart">
+              <h3>Vlažnost:</h3>
+              <div id="humidity_graph">
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="modal-footer">
diff --git a/app/client/state_details.js b/app/client/state_details.js
index ee01e5c..11cf6b7 100644
--- a/app/client/state_details.js
+++ b/app/client/state_details.js
@@ -10,5 +10,99 @@ Template.state_details.helpers({
   }
 });
 
-Template.state_details.events({
-});
+Template.state_details.events({});
+
+Template.state_details.rendered = function() {
+  this.node = this.find('#temperature_graph'); // our d3 code goes here
+  var yScale = d3.scale.linear()
+    .domain([0, 4])
+    .range([10, 60]);
+  var xScale = d3.scale.linear()
+    .domain([0, self.duration])
+    .range([0, $(self.timelineWrapper).width()])
+};
+
+
+
+
+function sensor_data_collection() {
+  var controllerId = Session.get('controller_id');
+  return SensorData.find({
+    controllerId: controllerId
+  }, {
+    sort: {
+      created_at: -1
+    }
+  });
+}
+
+
+Template.state_details.rendered = function() {
+
+  var self = this;
+  /*
+   * add point when new temperature is added
+   */
+  setTimeout(function() {
+    self.autorun(function() {
+      sensor_data_collection().observe({
+        added: function(reading) {
+          buildTemperatureGraph();
+          buildHumidityGraph()
+        }
+      });
+    });
+  }, 1000);
+}
+
+/*
+ * Function to draw the graph
+ */
+function buildTemperatureGraph() {
+
+  var sensorReadings = sensor_data_collection();
+
+  console.log("Added: ", sensorReadings.count());
+  var times = sensorReadings.map(function(reading) {
+    return moment(reading.created_at).format("HH:mm:ss");
+  });
+  var values = sensorReadings.map(function(reading) {
+    return reading.temperatureValue;
+  });
+
+  return new Chartist.Line('#temperature_graph', {
+    labels: times,
+    series: [values]
+  }, {
+    fullWidth: true,
+    chartPadding: {
+      right: 40
+    }
+  });
+}
+
+/*
+ * Function to draw the graph
+ */
+function buildHumidityGraph() {
+
+  var sensorReadings = sensor_data_collection();
+
+  console.log("Added: ", sensorReadings.count());
+  var times = sensorReadings.map(function(reading) {
+    return moment(reading.created_at).format("HH:mm:ss");
+  });
+  var values = sensorReadings.map(function(reading) {
+    return reading.humidityValue;
+  });
+
+  return new Chartist.Line('#humidity_graph', {
+    labels: times,
+    series: [values]
+  }, {
+    fullWidth: true,
+    chartPadding: {
+      right: 40
+    }
+  });
+}
diff --git a/app/server/api.js b/app/server/api.js
index b59951a..04bf55e 100644
--- a/app/server/api.js
+++ b/app/server/api.js
@@ -24,10 +24,12 @@ Api.addRoute('sensorData', {
 
 
 function reactToSensorData(nextSensorReading) {
-  console.log("reacting to sensor");
   var controllerId = nextSensorReading.controllerId;
   var state = stateOrDefault(controllerId).state;
-  var shouldStartPumping = (!state.in_valve || state.in_valve === 'closed') && ((parseInt(nextSensorReading.tankFull) === 0) && (state.out_valve === 'closed' || state.out_valve === 'closing'));
+  console.log(nextSensorReading , state);
+  var shouldStartPumping = (!state.in_valve || state.in_valve === 'closed' || state.in_valve === 'closing') && ((parseInt(nextSensorReading.tankFull) === 0) && (state.out_valve === 'closed' || state.out_valve === 'closing'));
+
+  var shouldStopPumping = (state.in_valve === 'open' || state.in_valve === 'opening') && (parseInt(nextSensorReading.tankFull) === 1 || state.out_valve === 'open' || state.out_valve === 'opening');
 
   if (shouldStartPumping) {
     ControllerState.update({
@@ -39,10 +41,7 @@ function reactToSensorData(nextSensorReading) {
         'set_by': 'server'
       }
     });
-  }
-  var shouldStopPumping =  (state.in_valve === 'open' || state.in_valve === 'opening') && (parseInt(nextSensorReading.tankFull) === 1 || state.out_valve === 'open' || state.out_valve === 'opening');
-
-  if (shouldStopPumping) {
+  } else if (shouldStopPumping) {
     ControllerState.update({
       controller_id: controllerId
     }, {
@@ -102,3 +101,6 @@ function stateOrDefault(id) {
   });
   return stateEntry;
 }
+
+Meteor.sharedFunctions = Meteor.sharedFunctions || {};
+Meteor.sharedFunctions.reactToSensorData = reactToSensorData;
diff --git a/app/server/methods.js b/app/server/methods.js
index cf991ea..bb9251f 100644
--- a/app/server/methods.js
+++ b/app/server/methods.js
@@ -40,7 +40,9 @@ function openOutValve(controller_id) {
       closeOutValve(controller_id);
     }
   });
-  console.log("Finished adding cron ", controller_id);
+  console.log(Meteor.sharedFunctions);
+
+  Meteor.sharedFunctions.reactToSensorData(last_sensor_reading(controller_id));
 }
 
 function closeOutValve(controller_id) {
@@ -51,6 +53,10 @@ function closeOutValve(controller_id) {
   SyncedCron.remove(jobName);
   setOutValveTo(controller_id, 'closing');
   console.log("Finished clearing cron ", controller_id);
+
+  console.log(Meteor.sharedFunctions);
+
+  Meteor.sharedFunctions.reactToSensorData(last_sensor_reading(controller_id));
 }
 
 function clearLog() {
@@ -88,6 +94,28 @@ function saveControllerConfig(controller_id, time, days) {
   });
 }
 
+
+function last_sensor_reading(controller_id) {
+  var result = null;
+
+  if (controller_id) {
+    result = SensorData.find({
+      controllerId: controller_id
+    }, {
+      sort: {
+        created_at: -1
+      },
+      limit: 1
+    });
+  }
+  if (result && result.count() > 0) {
+    return result.fetch()[0];
+  } else {
+    return {}
+  }
+}
+
+
 Meteor.methods({
   openOutValve: openOutValve,
   closeOutValve: closeOutValve,
diff --git a/app/server/startup.js b/app/server/startup.js
index 4232b09..17e054f 100644
--- a/app/server/startup.js
+++ b/app/server/startup.js
@@ -5,26 +5,28 @@ if (Meteor.isServer) {
   });
 
 
+
+
   // Global API configuration
   var Api = new Restivus({
     useDefaultAuth: true,
     prettyJson: true
   });
 
-  Api.addRoute('sensorData', {
-    authRequired: false
-  }, {
-    post: function() {
-      SensorData.insert({
-        temperatureValue: parseFloat(this.bodyParams.temperatureValue),
-        humidityValue: parseFloat(this.bodyParams.humidityValue),
-	tankFull: this.bodyParams.tankFull,
-        owner: this.bodyParams.owner,
-        created_at: new Date()
-      });
-      return [];
-    }
-  });
+  // Api.addRoute('sensorData', {
+  //   authRequired: false
+  // }, {
+  //   post: function() {
+  //     SensorData.insert({
+  //       temperatureValue: parseFloat(this.bodyParams.temperatureValue),
+  //       humidityValue: parseFloat(this.bodyParams.humidityValue),
+	// tankFull: this.bodyParams.tankFull,
+  //       owner: this.bodyParams.owner,
+  //       created_at: new Date()
+  //     });
+  //     return [];
+  //   }
+  // });
 
 
 }