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(); }, last_out_valve_open: function() { return moment(this.significantEvents.lastOutValveOpen).fromNow(); }, last_in_valve_open: function() { return moment(this.significantEvents.lastInValveOpen).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 unfilteredReadings = sensor_data_collection(); // we want to show only 11 points from all data var breakingPoint = Math.floor(countValues(unfilteredReadings) / 10); var sensorReadings = filterDataPoints(unfilteredReadings, breakingPoint); var times = sensorReadings.map(function(reading) { return moment(reading.created_at).format("HH:mm:ss"); }); var values = sensorReadings.map(function(reading) { return reading.temperatureValue; }); var breakingPoint = Math.floor(times.length / 11); return new Chartist.Line('#temperature_graph', { labels: times, series: [values] }, { fullWidth: true, chartPadding: { right: 40 } }); } /* * Function to draw the graph */ function buildHumidityGraph() { var unfilteredReadings = sensor_data_collection(); // we want to show only 11 points from all data - filtering will add // the last one so 10 + 1 = 11 var breakingPoint = Math.floor(countValues(unfilteredReadings) / 10); var sensorReadings = filterDataPoints(unfilteredReadings, breakingPoint); 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 } }); } function filterDataPoints(data, breakingPoint) { if (breakingPoint === 0) { return data; } var result = []; var index = 0; var lastUnpushedRow = null; data.forEach(function(row) { if (index % breakingPoint === 0) { result.push(row); lastUnpushedRow = null; } else { lastUnpushedRow = row; } index++; }); // in order to always have the latest value if(lastUnpushedRow) { result.push(lastUnpushedRow); } return result; } // dirty hack for the complicated way of getting // acual number of values function countValues(data) { var count = 0; data.forEach(function(row) { count++; }); return count; };