Multiple lines on single chart ui

[deekshaha]

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:

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

[Trying_to_learn]

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:

[{"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

[deekshaha]

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.

My UI has form button when I click it, the function nodes are triggered.

[Trying_to_learn]

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.

And have some data showing.

[deekshaha]

Output of temp msg complete object:

Output of temp, wind msg.payload object:

[Trying_to_learn]

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.

[jbudd]

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

[deekshaha]

I want two lines on the same chart.

[Trying_to_learn]

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.

[jbudd]

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 you need to send the data in a single message formatted like this

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

[Trying_to_learn]

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.

[deekshaha]

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

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

[apex]

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