Created graphs without d3 ;)

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
+    }
+  });
+}