# Keep data on multiple series with different axis to chart

**URL:** https://discourse.nodered.org/t/keep-data-on-multiple-series-with-different-axis-to-chart/45217
**Category:** Dashboard
**Created:** [5 May 2021 12:34 UTC](https://discourse.nodered.org/t/keep-data-on-multiple-series-with-different-axis-to-chart/45217 "2021-05-05T12:34:53Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![mofisher](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mofisher/32/41273_2.png) [@mofisher](https://discourse.nodered.org/u/mofisher)
#### Post date: [5 May 2021 12:34 UTC](https://discourse.nodered.org/t/keep-data-on-multiple-series-with-different-axis-to-chart/45217/1 "2021-05-05T12:34:53Z")

</div>

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](https://discourse.nodered.org/t/adding-multiple-series-with-different-axis-to-chart/38591/5). It's excellent.  
Thanks hotNipi.

The code in post:

```auto
[{"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.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [5 May 2021 12:46 UTC](https://discourse.nodered.org/t/keep-data-on-multiple-series-with-different-axis-to-chart/45217/2 "2021-05-05T12:46:15Z")

</div>

I think you can find the solution from this thread. (post 24)  
[SteppedLine Chart together with Line Chart](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092)

---

<div class="post-metadata">

### Author: ![mofisher](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mofisher/32/41273_2.png) [@mofisher](https://discourse.nodered.org/u/mofisher)
#### Post date: [6 May 2021 01:31 UTC](https://discourse.nodered.org/t/keep-data-on-multiple-series-with-different-axis-to-chart/45217/3 "2021-05-06T01:31:04Z")

</div>

Thanks hotNipi.  
It works fine as my expectation.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [5 June 2021 01:31 UTC](https://discourse.nodered.org/t/keep-data-on-multiple-series-with-different-axis-to-chart/45217/4 "2021-06-05T01:31:08Z")

</div>

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