Dear Node-red Experts is it possible in Node-red Graph that the 2 different topics have different interpolate types?
Let say topic1 is a line while topic2 is a step line?
Hoping for kind responds.
Thank you!
Regards,
Unfortunately not possible with dashboard chart widget. It should be possible if you create the chart by using ui_template and use raw chartjs library and then initialize the chart with different datasets defined.. Never tried but according to the documentation should work.
Thanks Buddy!
I actually tried to use UI_Template, how ever I found few problem. I used this simple node
[{"id":"957b298d.334ed8","type":"ui_template","z":"c6ca63bb.080ba","group":"80d77992.39c8e8","name":"PI Chart","order":4,"width":"0","height":"0","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":700,"y":180,"wires":[["99ff25f6.6486b8"]]},{"id":"1b809d8e.a34272","type":"inject","z":"c6ca63bb.080ba","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":260,"wires":[["576d31f9.b0d72"]]},{"id":"576d31f9.b0d72","type":"function","z":"c6ca63bb.080ba","name":"","func":"msg.payload = {\n \"Legend\": 'Legend 1',\n \"Data\" : [9,12,4,6,2,2],\n \"Type\" : flow.get(\"type\") || 'pie'\n}\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":200,"wires":[["51f6b098.faa0f"]]},{"id":"99ff25f6.6486b8","type":"debug","z":"c6ca63bb.080ba","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":780,"y":320,"wires":[]},{"id":"51f6b098.faa0f","type":"template","z":"c6ca63bb.080ba","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=\"400\" height=\"400\"></canvas>\n<script>\nvar ctx = document.getElementById('myChart').getContext('2d');\nnew Chart(ctx, {\n type: '{{{payload.Type}}}',\n data: {\n labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n datasets: [{\n label: '{{{payload.Legend}}}',\n data: [{{{payload.Data}}}],\n backgroundColor: [\n 'rgba(255, 99, 132, 0.5)',\n 'rgba(54, 162, 235, 0.5)',\n 'rgba(255, 206, 86, 0.5)',\n 'rgba(75, 192, 192, 0.5)',\n 'rgba(153, 102, 255, 0.5)',\n 'rgba(255, 159, 64, 0.5)'\n ],\n borderColor: [\n 'rgba(255, 99, 132, 1)',\n 'rgba(54, 162, 235, 1)',\n 'rgba(255, 206, 86, 1)',\n 'rgba(75, 192, 192, 1)',\n 'rgba(153, 102, 255, 1)',\n 'rgba(255, 159, 64, 1)'\n ],\n borderWidth: 2,\n steppedLine: true\n }]\n },\n options: {\n scales: {\n yAxes: [{\n ticks: {\n beginAtZero: true\n },\n stacked: false\n }]\n },\n title: {\n display: true,\n text: 'This is the Title!',\n fontSize: 25\n },\n legend: {\n position: 'right',\n display: 'true'\n }\n }\n});\n</script>","output":"str","x":500,"y":200,"wires":[["957b298d.334ed8"]]},{"id":"3b7e6a21.85f076","type":"inject","z":"c6ca63bb.080ba","name":"","topic":"","payload":"line","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":320,"wires":[["41aa3fb8.1ab2"]]},{"id":"41aa3fb8.1ab2","type":"function","z":"c6ca63bb.080ba","name":"","func":"var type = msg.payload;\nflow.set(\"type\", type)\n\n\nreturn msg","outputs":1,"noerr":0,"x":390,"y":300,"wires":[[]]},{"id":"80d77992.39c8e8","type":"ui_group","z":"","name":"Chart","tab":"8962ad11.78ab2","order":3,"disp":true,"width":"6","collapse":false},{"id":"8962ad11.78ab2","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
But everytime I deploy it, I need to refresh the Webrowser before it take effect, or sometimes I need to redeploy it. What may be the wrong with this?
It may help if you set some sizes to ui_template. Auto size seems to not working well in those conditions.
Thanks about that.
Will try that 
Thanks hotNipi ! Now Working ! I will do now all my UI-graphs into a UI template
Anyways.. Do you have any recommendations regarding the Chart.js tutorial? Or just their official documentation will do? THanks Buddy!
You can safely rely on documentation. That is what I do almost always.
Hello hotNipi,
Dont know what is the problem with my code:
[{"id":"8aa16d81.d126a","type":"ui_template","z":"c5297e70.44a6f","group":"35195b4c.6627d4","name":"","order":1,"width":"15","height":"5","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":820,"y":340,"wires":[[]]},{"id":"50873831.445ab8","type":"template","z":"c5297e70.44a6f","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"annualChart\" width=\"600\" height=\"400\"></canvas>\n<script>\nvar ctx = document.getElementById('annualChart').getContext('2d');\nnew Chart(ctx, {\n type: 'line',\n data: {\n labels: [],\n datasets: [\n {\n type:'line',\n label: 'Annual Target',\n backgroundColor: rgba(44, 160, 44, 0.85),\n data: [{{payload.data}}]\n }\n ]\n },\n options: {\n scales: {\n xAxes: [{\n type: 'time',\n time: {\n unit: 'month'\n }\n }]\n }\n }\n});\n</script>","output":"str","x":520,"y":340,"wires":[["8aa16d81.d126a","544421db.68442"]]},{"id":"544421db.68442","type":"debug","z":"c5297e70.44a6f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":750,"y":300,"wires":[]},{"id":"5e8547a1.50e328","type":"function","z":"c5297e70.44a6f","name":"","func":"\nvar m_actual = []\nvar startTime = 1577836800000\nfor(x=1;x<=365;x++){\n var new_msg_actual = {\"x\": startTime, \"y\": Math.random() * 300}\n m_actual.push(new_msg_actual)\n startTime += 86400000\n}\nmsg.payload = {\n \"data\": m_actual\n}\nreturn msg;\n","outputs":1,"noerr":0,"x":330,"y":340,"wires":[["50873831.445ab8","78ea598.0f04ca8"]]},{"id":"8a4b27bd.8980d8","type":"inject","z":"c5297e70.44a6f","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":340,"wires":[["5e8547a1.50e328"]]},{"id":"78ea598.0f04ca8","type":"debug","z":"c5297e70.44a6f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":550,"y":420,"wires":[]},{"id":"35195b4c.6627d4","type":"ui_group","z":"","name":"Annual Target ","tab":"e69d5cf5.b9796","order":1,"disp":true,"width":"15","collapse":false},{"id":"e69d5cf5.b9796","type":"ui_tab","z":"","name":"TIWI Asset KPI","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
Kindly troubleshoot this 
in debug message the "data" only appears as Object .....
Thanks! Hoping for your response..
Look at the output of the template node, what do you notice? Compare that to the flow you have earlier that works (stick a debug node of the output of that template node)
What is the difference?
It seems like the Template node can't get the Data right from another node.
I have functions that creates an array of object [{x: 1238091823, y: 25}...] , this object will pass on the template node, however template node see this object as [[object, object], [object,object]]... That is why my graph is nothing because this should be the datasets.
I dont know the template node will read my array of object .
Generate data to be json string
var m_actual = []
var startTime = 1577836800000
for(x=0;x<365;x++){
var new_msg_actual = {"x": startTime, "y": Math.random() * 300}
m_actual.push(new_msg_actual)
startTime += 86400000
}
msg.payload = JSON.stringify(m_actual)
return msg;
And use the payload in template:
data:{{{payload}}}
Edit: My phone typing was terrible - but thanks to @zenofmud fixes applied
1 Like
Thanks to all of you!
I can now see the JSON object to my template..
However, still has no graphs
Did I miss something on the "Options" side of XAxis?
<canvas id="myChart" width=600 height =400></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [],
datasets: [{
label: 'My First dataset',
backgroundColor: ['Green'],
//data: [-5, 10, 5],
data: {{{payload}}}
yAxisID: 'right-y-axis',
steppedLine: true,
fill: false,
borderColor: ['Green'],
borderWidth: 3
},
]
},
// Configuration options go here
options: {
scales: {
xAxes: [{
type: 'time',
distribution: 'series'
}]
}
}
});
</script>
Thanks again buddy !
OMG! Just missing a comma and few Options!
It is now working ! Thanks Buddy !
[{"id":"957b298d.334ed8","type":"ui_template","z":"c6ca63bb.080ba","group":"80d77992.39c8e8","name":"Line Chart","order":4,"width":"15","height":"15","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":710,"y":180,"wires":[[]]},{"id":"1b809d8e.a34272","type":"inject","z":"c6ca63bb.080ba","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":180,"wires":[["576d31f9.b0d72"]]},{"id":"576d31f9.b0d72","type":"function","z":"c6ca63bb.080ba","name":"","func":"\nvar m_actual = []\nvar startTime = 1577836800000\nfor(x=1;x<=365;x++){\n var new_msg_actual = {x: new Date(startTime), y: Math.random() * 300}\n m_actual.push(new_msg_actual)\n startTime += 86400000\n}\nmsg.payload = JSON.stringify(m_actual)\nreturn msg;\n","outputs":1,"noerr":0,"x":330,"y":160,"wires":[["51f6b098.faa0f"]]},{"id":"99ff25f6.6486b8","type":"debug","z":"c6ca63bb.080ba","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":690,"y":260,"wires":[]},{"id":"51f6b098.faa0f","type":"template","z":"c6ca63bb.080ba","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =400></canvas>\n<script>\n var ctx = document.getElementById('myChart').getContext('2d');\nvar 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 label: 'My First dataset',\n backgroundColor: ['Green'],\n //data: [-5, 10, 5],\n data: {{{payload}}},\n yAxisID: 'right-y-axis',\n steppedLine: true,\n fill: false,\n borderColor: ['Green'],\n borderWidth: 3\n },\n \n ]\n \n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [{\n id: 'left-y-axis',\n type: 'linear',\n position: 'left'\n }, {\n id: 'right-y-axis',\n type: 'linear',\n position: 'right'\n }],\n xAxes: [{\n type: 'time',\n distribution: 'series'\n }]\n }\n }\n});\n</script>\n","output":"str","x":500,"y":160,"wires":[["957b298d.334ed8","99ff25f6.6486b8"]]},{"id":"80d77992.39c8e8","type":"ui_group","z":"","name":"Chart","tab":"8962ad11.78ab2","order":3,"disp":true,"width":"15","collapse":false},{"id":"8962ad11.78ab2","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
I think you'll have errors in console cos colors in dataset cant be provided in array.
Use hex string backgroundColor: '#009900', borderColor: '#009900'
Added some styling tricks, to force chart render according to the dashboard styles
[{"id":"26d66b9b.186034","type":"ui_template","z":"5f1bed63.cb2a94","group":"304730.1de8e8d","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":640,"y":280,"wires":[[]]},{"id":"29e44bca.6d2594","type":"inject","z":"5f1bed63.cb2a94","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"0.62","x":200,"y":280,"wires":[["98fd0130.0550d"]]},{"id":"98fd0130.0550d","type":"function","z":"5f1bed63.cb2a94","name":"","func":"\nvar m_first = []\nvar m_second = []\nvar a\nvar startTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y: Math.random() * 300}\n m_first.push(a)\n startTime += 86400000\n}\nstartTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y: -2.5 + Math.random() * 5}\n m_second.push(a)\n startTime += 86400000\n}\n\nmsg.payload = {}\nmsg.payload.first = JSON.stringify(m_first)\nmsg.payload.second = JSON.stringify(m_second)\nreturn msg;\n","outputs":1,"noerr":0,"x":340,"y":280,"wires":[["55e9c5a5.e31f0c"]]},{"id":"1f88035e.029a1d","type":"debug","z":"5f1bed63.cb2a94","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":620,"y":320,"wires":[]},{"id":"55e9c5a5.e31f0c","type":"template","z":"5f1bed63.cb2a94","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =300></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#889900']\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar 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: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.first}}},\n yAxisID: 'left-y-axis',\n steppedLine: true,\n fill: false,\n borderWidth: 1\n },\n {\n label: 'Second',\n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.second}}},\n yAxisID: 'right-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 1\n }\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor: linecolors[0]\n }\n },\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n id: 'right-y-axis',\n type: 'linear',\n position: 'right',\n ticks: {\n fontColor:linecolors[1]\n }\n }\n ],\n xAxes: [\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n type: 'time',\n distribution: 'series',\n ticks: {\n fontColor:textcolor\n }\n }\n ]\n }\n }\n});\n</script>\n","output":"str","x":470,"y":280,"wires":[["26d66b9b.186034","1f88035e.029a1d"]]},{"id":"304730.1de8e8d","type":"ui_group","z":"","name":"Chart","tab":"ebf9c239.14c15","order":3,"disp":true,"width":"15","collapse":false},{"id":"ebf9c239.14c15","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Or more color coded version (edit - correct colors for dataset)
[{"id":"26d66b9b.186034","type":"ui_template","z":"5f1bed63.cb2a94","group":"304730.1de8e8d","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":640,"y":280,"wires":[[]]},{"id":"29e44bca.6d2594","type":"inject","z":"5f1bed63.cb2a94","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"0.62","x":200,"y":280,"wires":[["98fd0130.0550d"]]},{"id":"98fd0130.0550d","type":"function","z":"5f1bed63.cb2a94","name":"","func":"\nvar m_first = []\nvar m_second = []\nvar a\nvar startTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y: Math.random() * 300}\n m_first.push(a)\n startTime += 86400000\n}\nstartTime = 1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y: -2.5 + Math.random() * 5}\n m_second.push(a)\n startTime += 86400000\n}\n\nmsg.payload = {}\nmsg.payload.first = JSON.stringify(m_first)\nmsg.payload.second = JSON.stringify(m_second)\nreturn msg;\n","outputs":1,"noerr":0,"x":340,"y":280,"wires":[["55e9c5a5.e31f0c"]]},{"id":"1f88035e.029a1d","type":"debug","z":"5f1bed63.cb2a94","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":620,"y":320,"wires":[]},{"id":"55e9c5a5.e31f0c","type":"template","z":"5f1bed63.cb2a94","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =300></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#889900']\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar 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: linecolors[0],\n borderColor: linecolors[0],\n data: {{{payload.first}}},\n yAxisID: 'left-y-axis',\n steppedLine: true,\n fill: false,\n borderWidth: 1\n },\n {\n label: 'Second',\n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: {{{payload.second}}},\n yAxisID: 'right-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 1\n }\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor: linecolors[0]\n }\n },\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n id: 'right-y-axis',\n type: 'linear',\n position: 'right',\n ticks: {\n fontColor:linecolors[1]\n }\n }\n ],\n xAxes: [\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n type: 'time',\n distribution: 'series',\n ticks: {\n fontColor:textcolor\n }\n }\n ]\n }\n }\n});\n</script>\n","output":"str","x":470,"y":280,"wires":[["26d66b9b.186034","1f88035e.029a1d"]]},{"id":"304730.1de8e8d","type":"ui_group","z":"","name":"Chart","tab":"ebf9c239.14c15","order":3,"disp":true,"width":"15","collapse":false},{"id":"ebf9c239.14c15","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
2 Likes
Thanks Buddy! You're awesome!
And here is the basics how to do same thing for live data
[{"id":"26d66b9b.186034","type":"ui_template","z":"5f1bed63.cb2a94","group":"304730.1de8e8d","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":610,"y":270,"wires":[[]]},{"id":"29e44bca.6d2594","type":"inject","z":"5f1bed63.cb2a94","name":"","topic":"","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"onceDelay":"0.62","x":250,"y":240,"wires":[["98fd0130.0550d"]]},{"id":"98fd0130.0550d","type":"function","z":"5f1bed63.cb2a94","name":"fake live data","func":"msg.payload = {}\nmsg.payload.first = Math.random() * 300\nmsg.payload.second = -2.5 + Math.random() * 5\nreturn msg;\n","outputs":1,"noerr":0,"x":410,"y":240,"wires":[["26d66b9b.186034"]]},{"id":"55e9c5a5.e31f0c","type":"template","z":"5f1bed63.cb2a94","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =300></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#889900']\nvar maxDataPoints = 20\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar 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: linecolors[0],\n borderColor: linecolors[0],\n data: [],\n yAxisID: 'left-y-axis',\n steppedLine: true,\n fill: false,\n borderWidth: 1\n },\n {\n label: 'second',\n backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n data: [],\n yAxisID: 'right-y-axis',\n steppedLine: false,\n fill: false,\n borderWidth: 1\n }\n ]\n },\n\n // Configuration options go here\n options: {\n scales: {\n yAxes: [\n {\n gridLines :{display:false},\n id: 'left-y-axis',\n type: 'linear',\n position: 'left',\n ticks: {\n fontColor: linecolors[0]\n }\n },\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n id: 'right-y-axis',\n type: 'linear',\n position: 'right',\n ticks: {\n fontColor:linecolors[1]\n }\n }\n ],\n xAxes: [\n {\n gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n type: 'time',\n distribution: 'series',\n time:{\n displayFormats: {\n quarter: 'MMM YYYY',\n millisecond:'h:mm:ss',\n second:\t'h:mm:ss',\n minute:\t'h:mm',\n hour:\t'h' \n }\n },\n \n ticks: {\n fontColor:textcolor\n }\n }\n ]\n }\n }\n});\nfunction 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(0);//0 means no animation\n}\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n addData(chart,{x:new Date(),y:msg.payload.first},\"first\")\n addData(chart,{x:new Date(),y:msg.payload.second},\"second\")\n\n }\n });\n})(scope);\n</script>\n","output":"str","x":400,"y":300,"wires":[["26d66b9b.186034"]]},{"id":"bf7ecf9e.8f61f","type":"inject","z":"5f1bed63.cb2a94","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":250,"y":300,"wires":[["55e9c5a5.e31f0c"]]},{"id":"304730.1de8e8d","type":"ui_group","z":"","name":"Chart","tab":"ebf9c239.14c15","order":3,"disp":true,"width":"15","collapse":false},{"id":"ebf9c239.14c15","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
The live data example works well, but I've been unable to persist the chart between browser sessions. The data that I'm processing spans 24hrs, and currently it's only plotted whilst the browser is open.
My idea was trying to continually export the dataset.data, save it to file context, then on a new browser session restore that data back into the chart, but it hasn't really worked out 
Are there any thoughts how this can be achieved?
EDIT - Should I build, save & limit the data object external to the template node (instead of building it in the browser), and then push the entire objects into the respective dataset.data, so the chart is redrawn every time the flow is run.
