function sensor_data_collection() { var controllerId = Session.get('controller_id'); return SensorData.find({ controllerId: controllerId }, { sort: { created_at: -1 }, limit: 100 }); } Template.log.helpers({ sensorDataCollection: sensor_data_collection }); Template.log.events({ 'click clear_log': function() { Meteor.call('clearLog'); } }); var tempHolder = {}; var createChart = function() { var self = tempHolder; self.labels = []; self.temperatures = []; Tracker.autorun(function() { var sdc = sensor_data_collection(); sdc.forEach(function(sensorReading) { if (sensorReading.temperatures) { self.labels.push(moment(sensorReading.lastBoxContact).format('ddd DD.MM. HH:mm:ss')); for (var i = 0; i < sensorReading.temperatures.length; i++) { if (!self.temperatures[i]) { self.temperatures[i] = []; } self.temperatures[i].push(sensorReading.temperatures[i]); } } }); }); if(self.temperatures.length <= 0) { return; } /// there are no temperatures // Get the context of the canvas element we want to select var chartCanvas = document.getElementById("temperatureChart"); var lengthOfTemperatures = self.temperatures[0].length * 40 + 10; chartCanvas.width = (window.innerWidth > lengthOfTemperatures) ? window.innerWidth : lengthOfTemperatures; var heightOfElementsBefore = chartCanvas.getBoundingClientRect().top; chartCanvas.height = window.innerHeight - heightOfElementsBefore; var ctx = chartCanvas.getContext("2d"); // Set the options var options = { ///Boolean - Whether grid lines are shown across the chart scaleShowGridLines: true, //String - Colour of the grid lines scaleGridLineColor: "rgba(0,0,0,.05)", //Number - Width of the grid lines scaleGridLineWidth: 1, //Boolean - Whether to show horizontal lines (except X axis) scaleShowHorizontalLines: true, //Boolean - Whether to show vertical lines (except Y axis) scaleShowVerticalLines: true, //Boolean - Whether the line is curved between points bezierCurve: true, //Number - Tension of the bezier curve between points bezierCurveTension: 0.4, //Boolean - Whether to show a dot for each point pointDot: true, //Number - Radius of each point dot in pixels pointDotRadius: 4, //Number - Pixel width of point dot stroke pointDotStrokeWidth: 1, //Number - amount extra to add to the radius to cater for hit detection outside the drawn point pointHitDetectionRadius: 20, //Boolean - Whether to show a stroke for datasets datasetStroke: true, //Number - Pixel width of dataset stroke datasetStrokeWidth: 2, //Boolean - Whether to fill the dataset with a colour datasetFill: true, //String - A legend template legendTemplate: "" }; var random = function() { return Math.random() * (100 - 1) + 1; } var colours = [{ // blue fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,0.8)" }, { // red fillColor: "rgba(247,70,74,0.2)", strokeColor: "rgba(247,70,74,1)", pointColor: "rgba(247,70,74,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(247,70,74,0.8)" }, { // green fillColor: "rgba(70,191,189,0.2)", strokeColor: "rgba(70,191,189,1)", pointColor: "rgba(70,191,189,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(70,191,189,0.8)" }, { // light grey fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,0.8)" }, { // yellow fillColor: "rgba(253,180,92,0.2)", strokeColor: "rgba(253,180,92,1)", pointColor: "rgba(253,180,92,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(253,180,92,0.8)" }, { // grey fillColor: "rgba(148,159,177,0.2)", strokeColor: "rgba(148,159,177,1)", pointColor: "rgba(148,159,177,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(148,159,177,0.8)" }, { // dark grey fillColor: "rgba(77,83,96,0.2)", strokeColor: "rgba(77,83,96,1)", pointColor: "rgba(77,83,96,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(77,83,96,1)" } ]; var datasets = []; for (var i = 0; i < self.temperatures.length; i++) { // repeat colors once you run out var colour = colours[i % colours.length]; var dataset = Object.assign({ label: "Senzor #", data: self.temperatures[i] }, colour); datasets.push(dataset); } // Set the data var data = { labels: self.labels, datasets: datasets }; // draw the charts var myLineChart = new Chart(ctx).Line(data, options); }; Template.log.onRendered(function() { createChart(); }); Template.log.resized = function() { createChart(); return Session.get('resize'); } Template.log.orientation = function() { createChart(); return Session.get('orientation'); } Template.sensorData.helpers({ created_at_formatted: function() { return moment(this.created_at).format( /*"DD.MM.YYYY, */ " (HH:mm)") }, all_temperatures: function(temperatures) { var result = ''; if (temperatures.length > 0) { for (var i in temperatures) { result += '' + parseFloat(temperatures[i]).toFixed(1) + ' °C '; } } return result; } });