# @flowfuse/node-red-dashboard line chart

**URL:** <https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [19 November 2024 12:05 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257 "2024-11-19T12:05:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![YK934](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yk934/32/96555_2.png) [@YK934](https://discourse.nodered.org/u/YK934)\
**Post date:** [19 November 2024 12:05 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/1 "2024-11-19T12:05:17Z")

</div>

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.

```auto
[
  {
    "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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/56baf58de814c8ad93c6adb06653759fa4cda41a.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/adb4756db2f2f6df83a736a06b0b1566a6897d03.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 November 2024 12:07 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/2 "2024-11-19T12:07:24Z")

</div>

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](https://dashboard.flowfuse.com/nodes/widgets/ui-chart.html)

---

<div class="post-metadata">

**Author:** ![YK934](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yk934/32/96555_2.png) [@YK934](https://discourse.nodered.org/u/YK934)\
**Post date:** [19 November 2024 12:26 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/3 "2024-11-19T12:26:47Z")

</div>

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._

---

<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:** [19 November 2024 12:27 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/4 "2024-11-19T12:27:42Z")

</div>

You might find [this post](https://discourse.nodered.org/t/cant-get-the-chart-working-with-dataset/93114) relevant.

---

<div class="post-metadata">

**Author:** ![YK934](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yk934/32/96555_2.png) [@YK934](https://discourse.nodered.org/u/YK934)\
**Post date:** [19 November 2024 20:14 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/6 "2024-11-19T20:14:49Z")

</div>

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?

```auto
[{"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}](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/627124947dddafbb262b74dfe4144bb258f97083.png)

---

<div class="post-metadata">

**Author:** ![YK934](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yk934/32/96555_2.png) [@YK934](https://discourse.nodered.org/u/YK934)\
**Post date:** [20 November 2024 05:43 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/7 "2024-11-20T05:43:15Z")

</div>

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

> **[Chart Improvements & Migrating to Dashboard 2.0 • FlowFuse](https://flowfuse.com/blog/2023/11/dashboard-0-7/)**
>
> Discover significant chart enhancements and migration guidance in Dashboard 2.0's 0.7.x releases. Stay informed on project updates.

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.

---

<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:** [20 November 2024 08:32 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/8 "2024-11-20T08:32:48Z")

</div>

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.

> [@YK934](#):
>
> not good practice to put large data set for drawing chart.

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.

---

<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:** [20 December 2024 08:33 UTC](https://discourse.nodered.org/t/flowfuse-node-red-dashboard-line-chart/93257/9 "2024-12-20T08:33:34Z")

</div>

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