@flowfuse/node-red-dashboard line chart

Dashboard
1

Hi all,
I am trying to put 2x lines on one chart from mysql data. I could create msg.payload as below but only legends show up, no lines... anything I missed or did wrong? Appreciate your advice.

[
  {
    "series":["data1","data2"],
    "data":[
      [
        {"x":"2024-11-18T00:00:09.000Z","y":11},
        {"x":"2024-11-18T00:00:19.000Z","y":11},
        {"x":"2024-11-18T00:00:29.000Z","y":11},
        {"x":"2024-11-18T00:00:39.000Z","y":11}
      ],[
        {"x":"2024-11-18T00:00:09.000Z","y":231},
        {"x":"2024-11-18T00:00:19.000Z","y":241},
        {"x":"2024-11-18T00:00:29.000Z","y":251},
        {"x":"2024-11-18T00:00:39.000Z","y":261}
      ]
    ]
  }
]

image
image1323×819 33 KB

image
image917×643 7.3 KB

2

Hi, welcome to the forum

The payload format is not the same as old Dashboard-1 (for good reason)

It is fully documented (and there are "Try Demo" links on most pages) here: Chart ui-chart | Node-RED Dashboard 2.0

3

Thank you, Steve. that's good to know. i tried the multiple lines example on your link and its works. And the document says about a single piece of data to plot multiple lines as below, but I struggled to understand. is there any example?

If you want a single piece of data to plot multiple lines, you can set the Series property to JSON, and then provide an array of keys (e.g. ["key1", "key2"]), which will plot a data point for each key provided, from a single data point.

4

You might find this post relevant.

6

Hi jbudd, thank you. Put below and works!
Sorry to bother you but want to as few more questions.

  1. How to put 2x Y axis scale? Say, 0 to 20 for label1, 0 to 600 for label2.
  2. When put large dataset, say 5000 of mysql records, it took a while to draw the chart. Is there any way to speed up?
[{"name":"label1","time":"2024-11-19T00:00:08.000Z","value":11},{"name":"label2","time":"2024-11-19T00:00:08.000Z","value":465},{"name":"label1","time":"2024-11-19T00:00:18.000Z","value":11},{"name":"label2","time":"2024-11-19T00:00:18.000Z","value":475},{"name":"label1","time":"2024-11-19T00:00:28.000Z","value":11},{"name":"label2","time":"2024-11-19T00:00:28.000Z","value":485},{"name":"label1","time":"2024-11-19T00:00:38.000Z","value":11},{"name":"label2","time":"2024-11-19T00:00:38.000Z","value":495}]

{FD36466E-5248-4C4D-9D82-1C7DCEF66377}
{FD36466E-5248-4C4D-9D82-1C7DCEF66377}845×559 15.4 KB

7

Found an example exact I was looking for at very end of this article...

And with this, can draw a chart without any data conversion of mysql output... Now agree to Steve's comment. Drawing speed was improved too. And it may not good practice put large data set for darwing chart.

8

Thanks for posting that flowfuse blog post, I had hot seen that.

The main difference between that and my example linked above seems to be that mine plots the same property, temperature, as a different line for each sensor while Joe plots temperature and humidity for a single sensor as two lines on the chart.
Depends on your data structure and what you are plotting.

You can't really display a chart with 5000 points on a monitor maybe 1900 pixels wide.
If the data comes from an SQL database you can use the query to reduce it eg
select timestamp, temperature from mydata where id % 5 = 0
Or perhaps split, filter and join nodes to only include significantly different points.

9

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