Dashboard empty in UI

Dashboard
1

I am running this on a Raspberry Pi 4 Model B Rev 1.1
Node-Red: 1.2.6
Node-red-dashboard: 2.25.0
Dashboard installed with: npm install node-red-dashboard

Chart is empty in UI but numeric and gauge works.

node-red
node-red346Ă—602 9.86 KB

The following is my flow:

[{"id":"5891993e.ce2298","type":"ui_chart","z":"cdab28ac.65eca8","name":"","group":"2fda441c.bc393c","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"10","removeOlderPoints":"","removeOlderUnit":"1","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":770,"y":180,"wires":[[]]},{"id":"c70f0b8b.0d0908","type":"random","z":"cdab28ac.65eca8","name":"","low":"1","high":"10","inte":"true","property":"payload","x":570,"y":180,"wires":[["5891993e.ce2298","2e57e87a.356d38","6c962f00.06f4","c237ac7a.2e22a"]]},{"id":"21ea2579.02151a","type":"ui_button","z":"cdab28ac.65eca8","name":"","group":"2fda441c.bc393c","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":410,"y":180,"wires":[["c70f0b8b.0d0908"]]},{"id":"2e57e87a.356d38","type":"ui_numeric","z":"cdab28ac.65eca8","name":"","label":"numeric","tooltip":"","group":"2fda441c.bc393c","order":2,"width":0,"height":0,"wrap":false,"passthru":true,"topic":"","format":"{{value}}","min":0,"max":10,"step":1,"x":780,"y":240,"wires":[[]]},{"id":"6c962f00.06f4","type":"ui_gauge","z":"cdab28ac.65eca8","name":"","group":"2fda441c.bc393c","order":3,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":770,"y":300,"wires":[]},{"id":"c237ac7a.2e22a","type":"debug","z":"cdab28ac.65eca8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":800,"y":360,"wires":[]},{"id":"2fda441c.bc393c","type":"ui_group","name":"Default","tab":"d1171ce9.84d9","order":1,"disp":true,"width":"6","collapse":false},{"id":"d1171ce9.84d9","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

I tried some other example flows but had the same empty result, what am I missing?

2

This is the flow you have posted...

image

This is how to export parts of a flow...

OVX2rsQAUx
OVX2rsQAUx774Ă—666 260 KB

3

Also attach a debug node showing what you are sending to the chart and check that you are sending it good data. If you think it is ok then show us what it gives.

4

Im sorry about that. Thank you for the guide, I have updated the flow.

5

I am sending it random integers from 1-10. Are these not valid? I found an example where they used a function to generate random values, and just assumed this would be the same.

6

Also please see this post for how to share code and flows. How to share code or flow json

Did you realise that you have configured the chart to show only ten seconds worth of data?

7

The other problem with your flow is that you have used a non-standard node but not told us what it is. Is it node-red-node-random?

8

It works ok for me. Try clearing the browser cache, particularly if you have upgraded the dashboard node. Othewise what browser are you using?

9

Works for me

image
image367Ă—596 19.1 KB

[{"id":"2fc607c3.337dd8","type":"ui_chart","z":"64ce1d00.d049e4","name":"","group":"2fda441c.bc393c","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"10","removeOlderPoints":"","removeOlderUnit":"1","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":1110,"y":220,"wires":[[]]},{"id":"4e7a5d6d.8cd514","type":"ui_button","z":"64ce1d00.d049e4","name":"","group":"2fda441c.bc393c","order":0,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":750,"y":220,"wires":[["641a70a.fc5dc9"]]},{"id":"389cdf43.3602a","type":"ui_numeric","z":"64ce1d00.d049e4","name":"","label":"numeric","tooltip":"","group":"2fda441c.bc393c","order":2,"width":0,"height":0,"wrap":false,"passthru":true,"topic":"","format":"{{value}}","min":0,"max":10,"step":1,"x":1120,"y":280,"wires":[[]]},{"id":"6ec79e30.d3872","type":"ui_gauge","z":"64ce1d00.d049e4","name":"","group":"2fda441c.bc393c","order":3,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":1110,"y":340,"wires":[]},{"id":"41b5a030.9bdf3","type":"debug","z":"64ce1d00.d049e4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1140,"y":400,"wires":[]},{"id":"641a70a.fc5dc9","type":"change","z":"64ce1d00.d049e4","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"($random() * 10)  + 1","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":900,"y":220,"wires":[["2fc607c3.337dd8","389cdf43.3602a","6ec79e30.d3872","41b5a030.9bdf3"]]},{"id":"2fda441c.bc393c","type":"ui_group","name":"Default","tab":"d1171ce9.84d9","order":1,"disp":true,"width":"6","collapse":false},{"id":"d1171ce9.84d9","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

NOTE: I didnt use the contrib random node (used change node to generate random numbers)

10

Okay, thank you. I have cleared cache and tried both Chromium and Firefox, both with the same result.

11

Have you tried my flow? Does that work?

Are there any errors in the browser console?

Use a debug to see what values are being sent to the chart - are they numbers? strings?

12

Thank you, your flow gave the same result.
But the console showed: TypeError: Cannot read property 'themeState' of undefined
I will update once I have searched some more.

13

I tried to follow:

https://discourse.nodered.org/t/app-min-js-148-typeerror-cannot-read-property-themestate-of-undefined/28343/2?u=henrikjo

Which indicates that there is a bug in app.min.js

Tried the following but without success:

cd Downloads
wget share/app.min.js at master · martinLim45/share · GitHub
cd ..
cp Downloads/app.min.js ./node_modules/node-red-dashboard/dist/js/app.min.js
sudo reboot

14

On another thread with this issue, the reply said something like...

Delete your flows (start from fresh node-red / blank) (to do this just rename the flow files in .node-red & restart node-red)

Add a standard node-red-dashboard item (like ui_button) - test.

If ok, add the ui_chart, deploy & check

then add other items.

Some issue with adding NON node-red-dashboard items first.

15

I have managed to replicate a similar error by importing the flow into an empty flows file, so have submitted an issue. It is not quite the same error message though.

16

Added one more repro case for issue.

17

Fix proposal:

The root cause:
If ui_base is not created yet and chart initializes, the loadConfiguration method asks for item.theme.themeState but item.theme is not initialized yet.

function loadConfiguration(type,scope) {
    //console.log("LOAD CONFIG",type,scope);
    var config = scope.config || { data:[], series:[], labels:[], nodata:true }
    var item = scope.$eval('me.item');
    var yMin = parseFloat(item.ymin);
    var yMax = parseFloat(item.ymax);
    var xFormat = item.xformat;
    var themeState = item.theme.themeState;

Fix
ui-chart-js.js

unction loadConfiguration(type,scope) {
    //console.log("LOAD CONFIG",type,scope);
    var config = scope.config || { data:[], series:[], labels:[], nodata:true }
    var item = scope.$eval('me.item');
    var yMin = parseFloat(item.ymin);
    var yMax = parseFloat(item.ymax);
    var xFormat = item.xformat;
    var themeState = item.theme ? item.theme.themeState : false;

Tried this and it does the thing. No errors in console, and chart is able to work. ui-chart-js.js is well prepared to ignore the themestate if it does not exist.

The themestate is also asked from ui_gauge but seems already even fixed or made in the way to not fall into this trap.

The issue occurs with first dashboard usage, maybe importing first flow just if you don't visit the dashboard configuration tab in prior to deploy) So newcomers have highest probability to be victims here.

2 Likes
18

Thank you both @hotNipi and @Steve-Mcl!

I think @Steve-Mcl tried to tell me this in a previous comment, but I believe I missed a step. It clicked when I read the comment in:

What I did to fix it:
In terminal for Raspberry:

cd .node-red
rm flows_x.json
node-red-restart

Then inside node-red flow: aaa.bbb.ccc.ddd:1880/#flow. Click the down arrow, then dashboard. Click deploy. After that I added the dashboard items and the chart would update.

19

Should this proposal be added to the github issue?

20

This happened to me on a working system after simply updating dashboard & restarting node-red. So there are more vectors at play.