Template.state_details.helpers({ pretty_valve: function(state) { if (state === 'open') return "Otvoren"; if (state === 'opening') return "Otvara se"; if (state === 'closing') return "Zatvara se"; if (state === 'closed') return "Zatvoren"; }, last_communication_time: function() { return moment(this.time).fromNow(); } }); 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 } }); }