Multiple charts example
Classes for elements should not be in those templates but somewhere in common place
[{"id":"821cef66.60aa8","type":"ui_template","z":"bf66f153.dd752","group":"195db59f.44875a","name":"Line Chart","order":4,"width":"8","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":590,"y":440,"wires":[[]]},{"id":"e57aac9d.c6f3b","type":"inject","z":"bf66f153.dd752","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":"0.62","x":210,"y":380,"wires":[["96676de2.6bd3b"]]},{"id":"96676de2.6bd3b","type":"function","z":"bf66f153.dd752","name":"fake live data","func":"msg.payload = {}\nmsg.payload.first = Math.random() * 300\nmsg.payload.second = Math.random() * 5\nreturn msg;\n","outputs":1,"noerr":0,"x":370,"y":380,"wires":[["821cef66.60aa8","41e61bf9.187f94"]]},{"id":"db64afe.49ae05","type":"template","z":"bf66f153.dd752","name":"","field":"template","fieldType":"msg","format":"html","syntax":"plain","template":"<canvas class=\"myChart\" id=\"{{'myChart'+$id}}\"></canvas>\n<div class=\"myValue\" id=\"{{'myValue'+$id}}\"></div>\n<style>\n .myValue{\n position: absolute;\n left: 125px;\n top: 100px;\n text-align: center;\n font-size: 60px;\n font-weight: bold;\n }\n .myChart{\n position:absolute;\n top:20px;\n }\n \n</style>\n\n<script>\n\n(function($scope) {\n setTimeout(function() {\n //debugger\n $scope.init();\n },100);\n \n $scope.init = function () {\n var maxDataPoints = 20\n var ctx = document.getElementById('myChart'+$scope.$id).getContext('2d');\n $scope.chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'line',\n \n // The data for our dataset\n data: {\n labels: [],\n datasets: [\n {\n label: 'first',\n backgroundColor: '#00ff0022',\n borderColor: '#00ff00',\n data: [],\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: true,\n borderWidth: 1\n }\n ]\n },\n \n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n display:false\n }\n }\n ],\n xAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n type: 'time',\n distribution: 'series',\n ticks: {\n display:false\n }\n }\n ]\n }\n }\n });\n function showValue(v){\n if(v){\n document.getElementById('myValue'+$scope.$id).innerHTML = v.toFixed(2)\n }\n }\n function addData(chart, data, label) {\n chart.data.datasets.forEach((dataset) => {\n if(dataset.label == label){\n dataset.data.push(data);\n }\n if(dataset.data.length > maxDataPoints){\n dataset.data.shift()\n }\n });\n chart.update(200);//0 means no animation\n }\n $scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n addData($scope.chart,{x:new Date(),y:msg.payload.first},\"first\")\n showValue(msg.payload.first)\n \n }\n });\n }\n})(scope);\n</script>\n\n\n","output":"str","x":380,"y":440,"wires":[["821cef66.60aa8"]]},{"id":"32f7132.f9080ec","type":"inject","z":"bf66f153.dd752","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":190,"y":440,"wires":[["db64afe.49ae05","e71370f9.bd593"]]},{"id":"e71370f9.bd593","type":"template","z":"bf66f153.dd752","name":"","field":"template","fieldType":"msg","format":"html","syntax":"plain","template":"<canvas class=\"myChart\" id=\"{{'myChart'+$id}}\"></canvas>\n<div class=\"myValue\" id=\"{{'myValue'+$id}}\"></div>\n<style>\n .myValue{\n position: absolute;\n left: 125px;\n top: 100px;\n text-align: center;\n font-size: 60px;\n font-weight: bold;\n }\n .myChart{\n position:absolute;\n top:20px;\n }\n \n</style>\n\n<script>\n\n(function($scope) {\n setTimeout(function() {\n //debugger\n $scope.init();\n },100);\n \n $scope.init = function () {\n var maxDataPoints = 20\n var ctx = document.getElementById('myChart'+$scope.$id).getContext('2d');\n $scope.chart = new Chart(ctx, {\n // The type of chart we want to create\n type: 'line',\n \n // The data for our dataset\n data: {\n labels: [],\n datasets: [\n {\n label: 'first',\n backgroundColor: '#00ff0022',\n borderColor: '#00ff00',\n data: [],\n yAxisID: 'left-y-axis',\n steppedLine: false,\n fill: true,\n borderWidth: 1\n }\n ]\n },\n \n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n display:false\n }\n }\n ],\n xAxes: [\n {\n gridLines :{display:false,drawBorder:false},\n type: 'time',\n distribution: 'series',\n ticks: {\n display:false\n }\n }\n ]\n }\n }\n });\n function showValue(v){\n if(v){\n document.getElementById('myValue'+$scope.$id).innerHTML = v.toFixed(2)\n }\n }\n function addData(chart, data, label) {\n chart.data.datasets.forEach((dataset) => {\n if(dataset.label == label){\n dataset.data.push(data);\n }\n if(dataset.data.length > maxDataPoints){\n dataset.data.shift()\n }\n });\n chart.update(200);//0 means no animation\n }\n $scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n addData($scope.chart,{x:new Date(),y:msg.payload.second},\"first\")\n showValue(msg.payload.second)\n \n }\n });\n }\n})(scope);\n</script>\n\n\n","output":"str","x":380,"y":480,"wires":[["41e61bf9.187f94"]]},{"id":"41e61bf9.187f94","type":"ui_template","z":"bf66f153.dd752","group":"195db59f.44875a","name":"Line Chart","order":4,"width":"8","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":590,"y":480,"wires":[[]]},{"id":"195db59f.44875a","type":"ui_group","z":"","name":"Chart","tab":"29b0213a.62176e","order":3,"disp":true,"width":"8","collapse":false},{"id":"29b0213a.62176e","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
