# Multiple lines on single chart ui

**URL:** <https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266>\
**Category:** Dashboard\
**Created:** [30 June 2020 22:33 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266 "2020-06-30T22:33:53Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![deekshaha](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@deekshaha](https://discourse.nodered.org/u/deekshaha)\
**Post date:** [30 June 2020 22:33 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/1 "2020-06-30T22:33:53Z")

</div>

Hi .I want to display temperature and windspeed from open weather map api call in the chart node. Code works perfectly fine when displaying one attribute data on chart.  
This is my function:

```auto
var chartdata = msg.payload;
var temp=[];
var wind=[];
var p=global.get('points');

for(var i = 0;i<=p ; i++){
   temp.push({x:chartdata[i].Timestamp*1000,y:chartdata[i].Temperature});
    wind.push({x:chartdata[i].Timestamp*1000,y:chartdata[i].WindSpeed});
}
var tempchart = [{
    "series":["Temperature"],
        "data":[temp],
    "labels":[""],
}];
var windchart = [{
    "series":["WindSpeed"],
        "data":[wind],
    "labels":[""],
}];
msg={};
msg1={};
msg.payload=tempchart;
msg.topic='Temperature';
msg1.payload=windchart;
msg1.topic='WindSpeed';
node.send([[msg,msg1]]);

```

But when I do so only msg1 i.e. WindSpeed graph is displayed on dashboard. Kindly help.I have attached screenshot of flow and msg object returned from chart node

 ![error-mul-lines](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/0/b05bf5c412ee627ef661952f03f726acc018b62d.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [30 June 2020 22:45 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/2 "2020-06-30T22:45:30Z")

</div>

You don't need two outputs from the function node to get two lines on the chart.

Each _Line_ of the chart is a different _stream_ of data.

Each _stream_ is defined by the `msg.topic`.

Look at this flow:

```auto
[{"id":"2e1be58a.27420a","type":"inject","z":"b9924a74.4d98f8","name":"Series 1","topic":"Series 1","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":1860,"wires":[["291b6d90.de72a2"]]},{"id":"6e106340.3a4be4","type":"ui_chart","z":"b9924a74.4d98f8","name":"","order":0,"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"],"useOldStyle":false,"outputs":1,"x":610,"y":1940,"wires":[[]]},{"id":"df56ed23.0c7bd","type":"inject","z":"b9924a74.4d98f8","name":"Series 2","topic":"series 2","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":290,"y":2000,"wires":[["3556ded8.422a4a"]]},{"id":"291b6d90.de72a2","type":"random","z":"b9924a74.4d98f8","name":"","low":"1","high":"10","inte":"true","property":"payload","x":440,"y":1860,"wires":[["6e106340.3a4be4"]]},{"id":"3556ded8.422a4a","type":"random","z":"b9924a74.4d98f8","name":"","low":"1","high":"10","inte":"true","property":"payload","x":440,"y":2000,"wires":[["6e106340.3a4be4"]]}]

```

You will have to give the `chart` a _home_.  
Click the two inject nodes alternately a few times and you should see two lines of different colours on the chart.

The colours are _defined_ in the `chart` node by the `series colour` part

---

<div class="post-metadata">

**Author:** ![deekshaha](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@deekshaha](https://discourse.nodered.org/u/deekshaha)\
**Post date:** [30 June 2020 23:05 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/3 "2020-06-30T23:05:11Z")

</div>

I tried your way and passed seperately two function nodes in chart node. Still Only one line is rendered in the chart.Like first temperature line appears for a second and then wind line shows without showing temperature line.

 ![ui error](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/5196165755b66580e50a6de5d35c54ad5b156d7e.png) My UI has form button when I click it, the function nodes are triggered. ![error-mul](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f4acaaeadbc1cb51477dbabdbf9fba5b984be4de.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [30 June 2020 23:07 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/4 "2020-06-30T23:07:28Z")

</div>

Did you try the flow I posted?

On the flow you showed, the `temp fetch` and `wind fetch` node.

Connect a `debug` node to each node and show their outputs.

![Screenshot from 2020-07-01 09-11-04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/615fca9c7f16af2ea91f38675492687183ba66be.png)

And have some data showing.

---

<div class="post-metadata">

**Author:** ![deekshaha](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@deekshaha](https://discourse.nodered.org/u/deekshaha)\
**Post date:** [30 June 2020 23:36 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/5 "2020-06-30T23:36:05Z")

</div>

Output of temp msg complete object:  
 ![temp-msg](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/17f7a4024a5f50ca4c897d44fa012858f02bd290.png)  
Output of temp, wind msg.payload object:

 ![temp-wind](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/efeb83d2127af3a6989d3dd521b8c3214715f56f.png)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [30 June 2020 23:37 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/6 "2020-06-30T23:37:15Z")

</div>

If that is from your flow, it is beyond my skill set.

I sent you a **working** example which shows you two different coloured lines on a chart.

Beyond that I can't help you.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [1 July 2020 00:01 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/7 "2020-07-01T00:01:30Z")

</div>

I'm not clear if you want two lines on the same chart or two charts with one line on each?

---

<div class="post-metadata">

**Author:** ![deekshaha](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@deekshaha](https://discourse.nodered.org/u/deekshaha)\
**Post date:** [1 July 2020 00:03 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/8 "2020-07-01T00:03:12Z")

</div>

I want two lines on the same chart.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [1 July 2020 00:05 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/9 "2020-07-01T00:05:20Z")

</div>

Looking at these _messages_ I suspect you have way too much _complexity_ in the structure.

Please look at the flow I posted and how the data packets are structured.

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/efeb83d2127af3a6989d3dd521b8c3214715f56f.png) ](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/efeb83d2127af3a6989d3dd521b8c3214715f56f.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [1 July 2020 00:14 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/10 "2020-07-01T00:14:50Z")

</div>

If I understand correctly, deekshaha is sending a complete chart in one, Trying\_to\_learn's example sends just one data point at a time - ie it is plotting time series data.

According to [https://github.com/node-red/node-red-dashboard/blob/master/Charts.md](https://github.com/node-red/node-red-dashboard/blob/master/Charts.md) you need to send the data in a single message formatted like this

```auto
[{
"series": ["WindSpeed", "Temperature"],
"data": [
    [{ "x": 1504029632890, "y": 5 },
     { "x": 1504029636001, "y": 4 },
     { "x": 1504029638656, "y": 12 }
    ],
    [{ "x": 1504029634400, "y": 28 },
     { "x": 1504029637959, "y": 32 },
     { "x": 1504029640317, "y": 30 }
    ]
],
"labels": [""]
}]

```

So that implies a single output from your function node.  
Something like this (I'm not too sure of the syntax for the data component)?  
msg.payload = [{  
"series": ["WindSpeed", "Temperature"],  
"data": [[wind],[temp] ],  
"labels": [""]  
}]

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [1 July 2020 00:17 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/11 "2020-07-01T00:17:37Z")

</div>

Correct, but @deekshaha isn't really saying they have a complete set of data to send or the data is being sent in real time.

I think I shall walk away from this. There seems to be too much of a communications failure.

---

<div class="post-metadata">

**Author:** ![deekshaha](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@deekshaha](https://discourse.nodered.org/u/deekshaha)\
**Post date:** [1 July 2020 00:46 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/12 "2020-07-01T00:46:22Z")

</div>

Thanks you jbudd! It worked with slight change in data.

msg.payload = [{  
"series": ["WindSpeed", "Temperature"],  
"data": [wind,temp],  
"labels": [""]  
}]

---

<div class="post-metadata">

**Author:** ![apex](https://avatars.discourse-cdn.com/v4/letter/a/e56c9b/32.png) [@apex](https://discourse.nodered.org/u/apex)\
**Post date:** [7 July 2020 09:55 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/13 "2020-07-07T09:55:58Z")

</div>

pls give sime hint s thanks~  
same problem encounter,  
want to display BOTH wind and temp in the SAME time series chart  
both in two chart way or one chart way ~  
thanks

---

<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:** [21 July 2020 09:55 UTC](https://discourse.nodered.org/t/multiple-lines-on-single-chart-ui/29266/14 "2020-07-21T09:55:58Z")

</div>

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