Very slow dashboard (dark at reload)

Dashboard
1

Hi,

Every 5min i trigger a readout over JSON (http), from my internal network, and then I sort out the data (temperatures). After that I display the resaults in text-boxes and in one chart. I do 9 different readouts.
The chart will hold data for 1 week or 1000 points.
I have made the screen quite small, so it fits on my 7 inch Raspberry Pi screen (but I'm running node red on a separate Ubuntu server).
When I do a reload of the webpage (ui) then (from my PC, i7 win7), it takes several seconds (10s) before the data comes back .
On the PI the screen often dies, (says connection broken and goes to white error page).

Any ideas why the Node red is so slow? The ubuntu server is a "big" computer (i5) with 12GB RAM. I think it should handle this without any problem....

2

If you are using line chart, the meaningful number of data points to show depends on how many pixels the chart has to draw into. If you are creating chart to fit into small area you'll need to reduce data points.

3

But will this actually create a problem. Okay for very big chunks of data, but this small (less then 20 000points).
But you are right, it's quite a small chart.

How do I reduce the the points/data? I get them every 5min, and I don't want to do an average (I want to see the real max and min). Is there some other node that is good for this?

Thanks for the help!

5

It is kind of problematic indeed. Actually the number of points the chart can handle in the manner that it still "says" something meaningful is really low.
I created little example to compare different sizes of line chart against number of data points. Play with it. You most probably agree that to preserve readability, the number of points is quite low.

[{"id":"85fc81f.c715d8","type":"ui_chart","z":"2400fb92.5478a4","name":"","group":"e6141859.e80168","order":2,"width":"3","height":"3","label":"chart x3","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"4","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#ffff80","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":760,"y":260,"wires":[[],[]]},{"id":"a7f37f6f.1fd6f","type":"inject","z":"2400fb92.5478a4","name":"loop","topic":"","payload":"","payloadType":"date","repeat":"0.2","crontab":"","once":false,"onceDelay":0.1,"x":370,"y":320,"wires":[["acf9226d.f210d"]]},{"id":"acf9226d.f210d","type":"function","z":"2400fb92.5478a4","name":"data","func":"var count = context.get(\"count\")||0;\nif(msg.topic === \"clear\"){\n    msg.payload  = [];\n    count = 0;\n    msg.count = 0;\n}\nelse{\n   msg.payload = (Math.random()*2)+1 ;\n   count++;\n   msg.count = count;\n}\ncontext.set(\"count\",count);\n\nreturn msg;","outputs":1,"noerr":0,"x":590,"y":300,"wires":[["85fc81f.c715d8","19db34c4.853deb","84ead1b4.58f07","4f033a92.ba7aa4","c963297.3058ed8","81a44929.ef1e48"]]},{"id":"29d45244.54c43e","type":"inject","z":"2400fb92.5478a4","name":"clear","topic":"clear","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":370,"y":280,"wires":[["acf9226d.f210d"]]},{"id":"19db34c4.853deb","type":"ui_text","z":"2400fb92.5478a4","group":"e6141859.e80168","order":6,"width":0,"height":0,"name":"","label":"Data points","format":"{{msg.count}}","layout":"row-spread","x":760,"y":440,"wires":[]},{"id":"84ead1b4.58f07","type":"ui_chart","z":"2400fb92.5478a4","name":"","group":"e6141859.e80168","order":5,"width":"6","height":"3","label":"chart x6","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"4","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#ff80c0","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":760,"y":380,"wires":[[],[]]},{"id":"4f033a92.ba7aa4","type":"ui_chart","z":"2400fb92.5478a4","name":"","group":"e6141859.e80168","order":1,"width":"2","height":"3","label":"chart x2","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"4","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":760,"y":220,"wires":[[],[]]},{"id":"c963297.3058ed8","type":"ui_chart","z":"2400fb92.5478a4","name":"","group":"e6141859.e80168","order":3,"width":"4","height":"3","label":"chart x4","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"4","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#80ff80","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":760,"y":300,"wires":[[],[]]},{"id":"81a44929.ef1e48","type":"ui_chart","z":"2400fb92.5478a4","name":"","group":"e6141859.e80168","order":4,"width":"5","height":"3","label":"chart x5","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"bezier","nodata":"","dot":false,"ymin":"0","ymax":"4","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#80ffff","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":760,"y":340,"wires":[[],[]]},{"id":"e6141859.e80168","type":"ui_group","z":"","name":"CHARTS","tab":"b5e9809.d91cc8","disp":true,"width":"6","collapse":false},{"id":"b5e9809.d91cc8","type":"ui_tab","z":"","name":"HOME","icon":"dashboard","order":1}]

Now for the solution, if you need your charts to be precise in both directions, timing and values, there is no way to do it with ui_dashboard charts. You should think about using some of external tool for that. Like https://grafana.com/ or similar.

If this is not an option for you, you'll need to do some kind compromise decisions. For example - do you really need to see data for a week with sharp preciseness?

6

Thanks for the input and help!

I will start with taking the chart away, to verify that this is the problem.

I will let you know how it's going, but it will take some time (this is a hobby project). :slight_smile:

7

20000 points on a chart isn't small by anyone's definition! That is a lot of data to manage. If the Dashboard chart doesn't handle it well, time to look at something else. For example, Graphana has no problem handling those kinds of charts.

8

Hello,

I have now tested to take away the chart, and it makes a big difference!
So, the root cause have been found!

It's just temperature data that is shown to me, (I have made a small weather station), so it's nothing important. More a learning project.
I think I will skip some data input, and just use fewer values.

Thanks for the help!

1 Like