# Node-RED dashboard can't handle high freq. data

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [25 November 2021 11:15 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265 "2021-11-25T11:15:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [25 November 2021 11:15 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/1 "2021-11-25T11:15:49Z")

</div>

Hi,

I am outputting accelerometer data **at high freq. (119 Hz)** to Node-RED dashboard via line chart node. I realized when we have lower **freq. (1 Hz)** there are no issues, but at higher **frequencies** , the **dashboard can't catch up** with the data as shown in below image.

![dashboardNode-RED](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/5/756e1804ff5f1572822fd4635d96fe93f43dcbe8.png)

I can see via debug node that the **data are still arriving** so no issues with that.

So, how I can handle high freq. data? Also, are the positions of widgets fixed/automated, I appreciate if someone can share a guide that shows how to customise the positions of widgets.

---

<div class="post-metadata">

**Author:** ![ghayne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghayne/32/39_2.png) [@ghayne](https://discourse.nodered.org/u/ghayne)\
**Post date:** [25 November 2021 11:21 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/2 "2021-11-25T11:21:17Z")

</div>

Which hardware is node red running on?

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [25 November 2021 11:22 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/3 "2021-11-25T11:22:36Z")

</div>

It is Raspberry Pi 4.

---

<div class="post-metadata">

**Author:** ![ghayne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghayne/32/39_2.png) [@ghayne](https://discourse.nodered.org/u/ghayne)\
**Post date:** [25 November 2021 12:22 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/4 "2021-11-25T12:22:01Z")

</div>

I think you will need dedicated hardware to capture at that data rate, your graph example would contain over 14000 data points, if they could all be displayed. Also, node red is single threaded and there are lots of other processes and interrupts happening in the background.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [25 November 2021 12:37 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/5 "2021-11-25T12:37:29Z")

</div>

How are you drawing the chart - which node are you using (or html?).

Some charts are more efficient than others, because when a new point is added, some libraries reload and redraw the entire chart, which maybe is struggling to keep up.

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [25 November 2021 12:43 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/6 "2021-11-25T12:43:05Z")

</div>

Forgive my ignorance about the topic, but I would like mention something.

Node-RED is running on Pi that runs **minimal dietpi image** , so it is **CLI only**. I access to Pi via SSH from my Intel i7 laptop. I realized Node-RED runs smoother than when I access it on Pi itself. So, I have assumed that it depends on where you access, not where you run the server. However, I am not sure how exactly it works.

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [25 November 2021 12:48 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/7 "2021-11-25T12:48:24Z")

</div>

Hi @Paul-Reed,

Here is the example setup:

![exampleSetup](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/c/7c6c088182b28bf9176274975c1bd0433187bf04.png)

Here is the configuration of line chart node:

 ![linechartConfig](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/a/aaa3efba3f0f12601b4b373fc5230645fdfb5786.png)

I need to visualize these based on the time. I also changed `X-axis` setting to minutes as well, I have not observed any differences based on the performance.

It works well, If I set freq. to 1 Hz.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 November 2021 13:39 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/8 "2021-11-25T13:39:45Z")

</div>

> [@hkayan](#):
>
> I realized Node-RED runs smoother than when I access it on Pi itself.

It may well be the browser that is overloading the machine running it, or possibly the connection between the two systems is the limiting factor, rather than node-red itself.

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [25 November 2021 14:53 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/9 "2021-11-25T14:53:30Z")

</div>

Hi @Colin,

Any advice regarding what might be the best setup to display such high freq. data?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 November 2021 15:17 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/10 "2021-11-25T15:17:58Z")

</div>

Many things depend on the charting library. The chart node for dashboard uses the [angular-chart.js](https://jtblin.github.io/angular-chart.js/) which is based on Chart.js v2.xx  
Chart.js is common charting library so it is not optimized to be performance king. But there is some advises to get more out of it. [Performance | Chart.js](https://www.chartjs.org/docs/latest/general/performance.html). I think most of them not available to use with the chart node, so you need to create the chat with the `ui_template` to use and adjust the library options directly.  
But even then, the chart.js is not only library in the world and it is far from being fastest.

So may be you can get better results if using some library which does claim to be fast. For example [the uPlot](https://github.com/leeoniya/uPlot)

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [25 November 2021 17:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/11 "2021-11-25T17:01:35Z")

</div>

Hi @hotNipi,

Thanks for this informative post. Can you elaborate the below statement please?

> So may be you can get better results if using some library which does claim to be fast. For example [the uPlot](https://github.com/leeoniya/uPlot)

How can I use/integrate such a library to Node-RED dashboard?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 November 2021 17:17 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/12 "2021-11-25T17:17:27Z")

</div>

Here is one example

> [@u-Plot charts simple live data example](https://discourse.nodered.org/t/u-plot-charts-simple-live-data-example/45453):
>
> You'll need to download the needed files from here [GitHub - leeoniya/uPlot: chart_with_upwards_trend A small, fast chart for time series, lines, areas, ohlc & bars](https://github.com/leeoniya/uPlot) and then serve them from your static folder. If performance matters and you are ready for a bit of JavaScript struggle, It is the way to go. Here's the starting point [{"id":"d03aad8c.fcdf9","type":"ui\_template","z":"c0ddb509.b04f48","group":"304730.1de8e8d","name":"chart","order":1,"width":"15","height":"8","format":"\<script src=\"/uplot/uPlot.iife.mi…

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [25 November 2021 17:38 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/13 "2021-11-25T17:38:40Z")

</div>

Oh, I understand now what you mean. We download from GitHub, than include via:  
`<script src="/uplot/uPlot.iife.min.js"></script>`  
using the **template node**.

Just one more question, if my path is `/home/pi/uplot/uPlot.iife.min.js` is this how should include:  
`<script src="/home/pi/uplot/uPlot.iife.min.js"></script>` or does that assume any path before `/uplot`. I remember wasting huge time for such a thing.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 November 2021 18:03 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/14 "2021-11-25T18:03:11Z")

</div>

There is many threads talking about how to configure the **static folder** from where the node red serves external files. Just do search.  
In this example the files are in subfolder called `uplot`  
It is free of choice how you build up the internal hierarchy in your static folder.

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [25 November 2021 19:44 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/15 "2021-11-25T19:44:47Z")

</div>

It is a commonly known issue of the current Node-RED line chart. As @hotNipi mentioned, the line chart was based on the version v2.xx of Chart.js, which is extremely inefficient. It struggles when displaying slightly fast incoming data (say more than 10 points/second).

Chart.js since 3.0 is much faster and efficient. It would be great if line chart could use Chart.js 3.0 or above.

Alternatively, thanks to @hotNipi and Christian-Me, who have provided ways to use uPlot.  
Chirstian-Me started working on a uPlot node and you can see discussions here:

> [@\[Beta\] node-red-contrib-ui-uPlot-charts](https://discourse.nodered.org/t/beta-node-red-contrib-ui-uplot-charts/52758):
>
> Anybody into charts (like me)? [withBands] Perhaps somebody likes to try out this one sitting on my desk too long: Still BETA so NOT on [flows.node-red.org](http://flows.node-red.org) Have fun. Any feedback highly welcome (even my time is limited so progress will not be at a fast pace) Chris

Unfortunately, there are still bugs in the node.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 November 2021 20:08 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/16 "2021-11-25T20:08:32Z")

</div>

Oh I absolutely forgot the Chirstian-Me contribution. But still in beta so yeah.. Anyway, if dealing with edge cases and/or pushing the limits, the raw library usage may give some advantages. Of course it takes then to good understanding not only the library but also all meaningful optimization strategies and often it takes also to go with some compromise decisions. It all depends...

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [25 November 2021 22:44 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/17 "2021-11-25T22:44:29Z")

</div>

My time is limited (I think I mentioned this) but I‘m working on it currently. I have a day time job and a family so ..  
But there will be an update „soon“. The task to build a „low code“ node with a full feature ui around a complex library it is quite the opposite as @hotNipi approach. Not to mention that the documentation of uPlot is not “perfect” to honest.  
With my speedtest demo I get more than 150 samples per second until the flow seams to stop increasing the pace. Think the interval function and the scheduler of node.js don’t call the callback function more often.  
I can display the chart (scrolling sine wave) on a fire 7” tablet from 2019 without any issue and the browser is still responsive.

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [26 November 2021 14:14 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/18 "2021-11-26T14:14:39Z")

</div>

First, I will have a look at @hotNipi example with `ui_template`. In my case, IMU sensor generates 3 types sensor data (accelerometer, gyroscope and magnetometer). Acc. and gyro. fixed at 119 Hz, while mag. is at 20 Hz. I believe, `ui_template` might be enough. Then I will check the @Christian-Me's node and post my results here.

Thanks for the feedbacks.

---

<div class="post-metadata">

**Author:** ![hkayan](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hkayan/32/42713_2.png) [@hkayan](https://discourse.nodered.org/u/hkayan)\
**Post date:** [30 November 2021 17:55 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/19 "2021-11-30T17:55:09Z")

</div>

I actually ended up using Influxdb + Grafana combo to visualize my data to be honest as my current work is kind of urgent. It works really well.

I will look into what I mentioned after Christmas.

---

<div class="post-metadata">

**Author:** ![davidz](https://avatars.discourse-cdn.com/v4/letter/d/a88e57/32.png) [@davidz](https://discourse.nodered.org/u/davidz)\
**Post date:** [30 November 2021 18:25 UTC](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265/20 "2021-11-30T18:25:38Z")

</div>

We tested Grafana 7.0 with Node-RED and show history data with Grafana inside Node-RED. It was clunky with decent large amount of data query, so we dropped this approach.

Grafana 8.0 does have the live data view function. Did you put Grafana display inside Node-RED, or use Grafana directly from another interface?

[Next page](https://discourse.nodered.org/t/node-red-dashboard-cant-handle-high-freq-data/54265.md?page=2)