# Mutiple line chart

**URL:** https://discourse.nodered.org/t/mutiple-line-chart/39103
**Category:** Dashboard
**Created:** [14 January 2021 04:34 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103 "2021-01-14T04:34:54Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![doomdanger](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/doomdanger/32/34905_2.png) [@doomdanger](https://discourse.nodered.org/u/doomdanger)
#### Post date: [14 January 2021 04:34 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103/1 "2021-01-14T04:34:54Z")

</div>

Hi i have problem to make multiple line chart and i need some help

I get 3data with 1source by "mqtt in" node they are JSON format and use "split "and "switch" convert JSON to number and use this post to manange my function [Multiple lines on a graph from one message? - #3 by Steve-Mcl](https://discourse.nodered.org/t/multiple-lines-on-a-graph-from-one-message/9315/3)

But i dont understand that well so i cant make mutiple line chart  
Here is my flow

 ![Screenshot 2021-01-14 113740](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a7e019a16b3fd6c22e69c017f7a708ea41e66b38.jpeg)

---

<div class="post-metadata">

### Author: ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)
#### Post date: [14 January 2021 08:45 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103/2 "2021-01-14T08:45:29Z")

</div>

the chart node needs a special input -\> in this case it is an object.  
to get 2 lines in your line diagram you have to transfer 2 objects to the chart node at the same time.  
(see example)

```auto
[{"id":"a7976e20.a59f1","type":"function","z":"48461642.eb259","name":"","func":"msg.payload = [{\n\"series\": [\"A\", \"B\", \"C\"],\n\"data\": [\n [{ \"x\": 1504029632890, \"y\": 5 },\n { \"x\": 1504029636001, \"y\": 4 },\n { \"x\": 1504029638656, \"y\": 2 }\n],\n [{ \"x\": 1504029633514, \"y\": 6 },\n { \"x\": 1504029636622, \"y\": 7 },\n { \"x\": 1504029639539, \"y\": 6 }\n],\n [{ \"x\": 1504029634400, \"y\": 7 },\n { \"x\": 1504029637959, \"y\": 7 },\n { \"x\": 1504029640317, \"y\": 7 }\n]\n],\n\"labels\": [\"\"]\n}]\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":260,"y":320,"wires":[["7d76732b.a947ac"]]},{"id":"1295c7f8.7e73c","type":"inject","z":"48461642.eb259","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":320,"wires":[["a7976e20.a59f1"]]},{"id":"7d76732b.a947ac","type":"ui_chart","z":"48461642.eb259","name":"","group":"c0b1b8ca.93ab38","order":2,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":450,"y":320,"wires":[[]]},{"id":"c0b1b8ca.93ab38","type":"ui_group","name":"Default","tab":"50372f16.d4f1a","order":1,"disp":false,"width":"10","collapse":false},{"id":"50372f16.d4f1a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

The dashboard has a very good documentation so please see the link aswell  
[https://github.com/node-red/node-red-dashboard/blob/master/Charts.md](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md)

if you want to create a continuous diagram, so that the diagram retains the old values, this is not easily (to my knowledge) possible. I use plotly.js to do that.  
What you can do in parallel is to save the previous data set via a context or flow variable, then add the new one and transfer everything to the chart node

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [14 January 2021 09:55 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103/3 "2021-01-14T09:55:23Z")

</div>

For live data you just need to ensure each data arrive with a different msg.topic property set - each topic will become a new series (line) on the chart - (rather than complete datasets which do require special formatting as above).

So you may already have a suitable msg.topic you can generate from the mqtt input - or you can just assign one using 3 change nodes at the end of your switch nodes just before the function node.

---

<div class="post-metadata">

### Author: ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)
#### Post date: [14 January 2021 10:33 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103/4 "2021-01-14T10:33:44Z")

</div>

cool, that was new for me as well. How can you reset the data?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [14 January 2021 10:38 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103/5 "2021-01-14T10:38:30Z")

</div>

sending an empty array `[]`

---

<div class="post-metadata">

### Author: ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)
#### Post date: [14 January 2021 10:40 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103/6 "2021-01-14T10:40:32Z")

</div>

ahh damn, thank you. I was trying to reset with a `msg.payload = [];` but my grid was defined as msg1 so of course it cannot work. now I changed it to `msg1 = []` and it works

---

<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: [13 February 2021 10:40 UTC](https://discourse.nodered.org/t/mutiple-line-chart/39103/7 "2021-02-13T10:40:34Z")

</div>

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