Keep data on multiple series with different axis to chart

Hi all,
I want to adding multiple series with different axis to chart. And I find the info that I want from post: 38591/5. It's excellent.
Thanks hotNipi.

The code in post:

[{"id":"26d66b9b.186034","type":"ui_template","z":"82bb9cb4.29b64","group":"304730.1de8e8d","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":710,"y":300,"wires":[[]]},{"id":"29e44bca.6d2594","type":"inject","z":"82bb9cb4.29b64","name":"","repeat":"5","crontab":"","once":false,"onceDelay":"0.62","topic":"","payload":"","payloadType":"date","x":350,"y":270,"wires":[["98fd0130.0550d"]]},{"id":"98fd0130.0550d","type":"function","z":"82bb9cb4.29b64","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":510,"y":270,"wires":[["26d66b9b.186034"]]},{"id":"55e9c5a5.e31f0c","type":"template","z":"82bb9cb4.29b64","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":500,"y":330,"wires":[["26d66b9b.186034"]]},{"id":"bf7ecf9e.8f61f","type":"inject","z":"82bb9cb4.29b64","name":"","repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":350,"y":330,"wires":[["55e9c5a5.e31f0c"]]},{"id":"304730.1de8e8d","type":"ui_group","name":"Chart","tab":"ebf9c239.14c15","order":3,"disp":true,"width":"15","collapse":false},{"id":"ebf9c239.14c15","type":"ui_tab","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

But I find that the chart data will reset after I go to other tab and come back tab:Ovens. I have no idea how to keep/continue chart data after I come back Ovens tab. How to solve it?

Thanks.

I think you can find the solution from this thread. (post 24)
SteppedLine Chart together with Line Chart

Thanks hotNipi.
It works fine as my expectation.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.