How a line chart shows a payload of 700 data separated by comma?

Dashboard
1

Hi,

I have a payload of 700 data separated by comma. I would like to show them in a line chart. How should I set the chart node? Note: The chart will be updated if the new payload comes in.

Thx
8526,7846,7855,7879,7649,7600,7927,7772,7411,7600,7689,7659,7760,7826,7608,7821,7866,7998,7812,7748,7698,7810,8205,8111,7702,7859,8134,7976,7539,7771,7960,7999,8082,7815,8914,8525,8301,8239,7988,8091,7889,7929,7778,7905,7804,7797,7978,8002,7863,8014,8204,8576,9352,10188,10025,9453,9046,9498,9274,9357,9381,9301,8897,8581,8505,8657,8723,9035,9658,9808,9191,7364,7486,8004,8098,5932,7467,8875,8422,8291,8057,7370,6290,5439,5404,5548,5792,6144,6554,6559,7148,6096,5595,5842,5420,5161,4907,4797,4907,4875,4735,4383,4348,4573,5383,6869,8300,9661,10365,10992,11374,11211,11143,12114,12834,12863,23061,33937,16510,17189,11958,8871,7758,6992,12194,14164,12654,11075,9977,9885,9455,9855,10650,11235,10975,10513,10576,10414,11024,12271,10813,7878,10520,10025,9022,8569,8262,7554,6623,6069,6000,6822,7802,8718,8802,8012,6150,9654,9148,10577,11737,13397,14372,15947,16254,16959,17716,18130,17792,26737,34973,29777,21057,26178,22241,16104,19420,15130,11475,8212,8963,8547,8392,8976,9315...

2

Line chart is a line, drawn between points. Point is two-dimensional object. {x;y} You have only one dimension. Let's say those numbers represent value, which most commonly goes to vertical axis y but you are missing the horizontal component x (most commonly the time)
Line chart can be created only if you add some value for x, every next a bit bigger than previous.
For live data, if new value is sent to chart, the x (timestamp) is created automatically so you can send only the value. But for historical data, you'll need to store values with timestamps.

.

3

Hi,

What the output payload should be?
Thanks.

4

Maybe you'll get the answer from this document: node-red-dashboard/Charts.md at master · node-red/node-red-dashboard · GitHub

5

Hi,

I have made the payload to be this (just 10 data for testing). But I am not sure the setting in the line chart node. Thanks

chart
chart1405Ă—773 110 KB

"[{"data":[{"x":2,"y":10005},{"x":3,"y":9223},{"x":4,"y":9007},{"x":5,"y":8522},{"x":6,"y":8489},{"x":7,"y":9283},{"x":8,"y":8902},{"x":9,"y":8790},{"x":10,"y":8403},{"x":11,"y":8036}],"labels": [""]}]"

6

The debug tab says, that data has bad format.

Correct will be

msg.payload = [
    {
        "series": ["A"],
        "data": [
            [{"x":2,"y":10005},
            {"x":3,"y":9223},
            {"x":4,"y":9007},
            {"x":5,"y":8522},
            {"x":6,"y":8489},
            {"x":7,"y":9283},
            {"x":8,"y":8902},
            {"x":9,"y":8790},
            {"x":10,"y":8403},
            {"x":11,"y":8036}
            ]
        ],
        "labels": [""]
    }
]
return msg
7

I have made the same format but still can not show the line.... Sorry to bother you but I wonder if my chart node setting is correct. Thx
Thanks.

[{"series": ["AccT"],"data":[[{"x":2,"y":9296},{"x":3,"y":7829},{"x":4,"y":7880},{"x":5,"y":7660},{"x":6,"y":7921},{"x":7,"y":7657},{"x":8,"y":7891},{"x":9,"y":7813},{"x":10,"y":7876},{"x":11,"y":7909}]],"labels": [""]}]

Better format to this (Same)
[
{
"series": ["AccT"],
"data":[
[{"x":2,"y":9296},
{"x":3,"y":7829},
{"x":4,"y":7880},
{"x":5,"y":7660},
{"x":6,"y":7921},
{"x":7,"y":7657},
{"x":8,"y":7891},
{"x":9,"y":7813},
{"x":10,"y":7876},
{"x":11,"y":7909}
]
],
"labels": [""]
}
]

chart1
chart11599Ă—713 120 KB

8

With your settings I get this
image

9

image

msg.payload is string. That's why you don't get anything.
It should be an array.

msg.payload = [
    {
        "series": ["A"],
        "data": [ .....

image

10

You can simply put a function node before your chart with

msg.payload = JSON.parse(msg.payload);
return msg;

That will do the conversion

11

Though probably better to build it as an object in the first place. You can convert your input (assuming that is a string too) into an array by adding a [ on the front and a ] on the end and feeding it through a JSON node. Then you can build your payload much easier that using string manipulation, which I assume you have been doing.

12

It is working now.

Thanks all. :>

chart_working

1 Like
13

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