# SteppedLine Chart together with Line Chart

**URL:** https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092
**Category:** Dashboard
**Created:** [22 February 2020 11:27 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092 "2020-02-22T11:27:10Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [22 February 2020 11:27 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/1 "2020-02-22T11:27:10Z")

</div>

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,

---

<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: [22 February 2020 13:48 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/2 "2020-02-22T13:48:04Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [22 February 2020 15:02 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/3 "2020-02-22T15:02:23Z")

</div>

Thanks Buddy!  
I actually tried to use UI\_Template, how ever I found few problem. I used this simple node

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

---

<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: [22 February 2020 15:36 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/4 "2020-02-22T15:36:17Z")

</div>

It may help if you set some sizes to `ui_template`. Auto size seems to not working well in those conditions.

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [22 February 2020 15:50 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/5 "2020-02-22T15:50:58Z")

</div>

Thanks about that.  
Will try that 🙂

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [23 February 2020 02:24 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/6 "2020-02-23T02:24:47Z")

</div>

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!

---

<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: [23 February 2020 05:56 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/7 "2020-02-23T05:56:13Z")

</div>

You can safely rely on documentation. That is what I do almost always.

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [23 February 2020 09:59 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/8 "2020-02-23T09:59:02Z")

</div>

Hello hotNipi,

Dont know what is the problem with my code:

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

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [23 February 2020 11:26 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/9 "2020-02-23T11:26:04Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [23 February 2020 11:29 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/10 "2020-02-23T11:29:49Z")

</div>

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 .

---

<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: [23 February 2020 12:14 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/11 "2020-02-23T12:14:23Z")

</div>

Generate data to be json string

```auto

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:

```auto
 data:{{{payload}}}

```

Edit: My phone typing was terrible - but thanks to @zenofmud fixes applied

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [23 February 2020 12:33 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/12 "2020-02-23T12:33:55Z")

</div>

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?

```auto
 <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 !

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [23 February 2020 12:42 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/13 "2020-02-23T12:42:59Z")

</div>

OMG! Just missing a comma and few Options!  
It is now working ! Thanks Buddy !

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

```

---

<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: [23 February 2020 12:59 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/14 "2020-02-23T12:59:04Z")

</div>

I think you'll have errors in console cos colors in dataset cant be provided in array.  
Use hex string `backgroundColor: '#009900'`, `borderColor: '#009900'`

---

<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: [23 February 2020 14:43 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/15 "2020-02-23T14:43:33Z")

</div>

Added some styling tricks, to force chart render according to the dashboard styles

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

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

```

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/7/07ce3e6efcc0c9790ff8309352435e530c39c7a5.png)

---

<div class="post-metadata">

### Author: ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)
#### Post date: [23 February 2020 14:46 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/16 "2020-02-23T14:46:35Z")

</div>

Thanks Buddy! You're awesome!

---

<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: [24 February 2020 09:00 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/17 "2020-02-24T09:00:31Z")

</div>

And here is the basics how to do same thing for live data

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

```

---

<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: [9 March 2020 11:15 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/19 "2020-03-09T11:15:50Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [14 April 2021 15:43 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/20 "2021-04-14T15:43:10Z")

</div>



---

<div class="post-metadata">

### Author: ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [14 April 2021 15:54 UTC](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092/21 "2021-04-14T15:54:18Z")

</div>

> [@hotNipi](#):
>
> how to do same thing for live data

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.

[Next page](https://discourse.nodered.org/t/steppedline-chart-together-with-line-chart/22092.md?page=2)