# Dashboard empty in UI

**URL:** <https://discourse.nodered.org/t/dashboard-empty-in-ui/37492>\
**Category:** Dashboard\
**Created:** [14 December 2020 15:31 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492 "2020-12-14T15:31:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![HenrikJo](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HenrikJo](https://discourse.nodered.org/u/HenrikJo)\
**Post date:** [14 December 2020 15:31 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/1 "2020-12-14T15:31:02Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7dd7063ef6a30910a2addc4aacdbe6493cbb0a6c.png)

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?

---

<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:** [14 December 2020 15:34 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/2 "2020-12-14T15:34:47Z")

</div>

This is the flow you have posted...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/c/8cbe25778d5c2dc3c903c4fc8d2d9808236c701e.png)

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

 ![OVX2rsQAUx](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/ca2609c8ec146c62d22e35398a57d51668844fea.gif)

---

<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:** [14 December 2020 15:45 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/3 "2020-12-14T15:45:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HenrikJo](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HenrikJo](https://discourse.nodered.org/u/HenrikJo)\
**Post date:** [14 December 2020 15:50 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/4 "2020-12-14T15:50:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HenrikJo](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HenrikJo](https://discourse.nodered.org/u/HenrikJo)\
**Post date:** [14 December 2020 15:52 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/5 "2020-12-14T15:52:31Z")

</div>

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.

> **[Tutorial: Node-RED dashboards – multiple lines on a chart – Node RED...](http://noderedguide.com/tutorial-node-red-dashboards-multiple-lines-on-a-chart/)**

---

<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:** [14 December 2020 15:52 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/6 "2020-12-14T15:52:45Z")

</div>

Also please see this post for how to share code and flows. [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

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

---

<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:** [14 December 2020 15:54 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/7 "2020-12-14T15:54:54Z")

</div>

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?

---

<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:** [14 December 2020 15:58 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/8 "2020-12-14T15:58:57Z")

</div>

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

---

<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:** [14 December 2020 15:59 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/9 "2020-12-14T15:59:09Z")

</div>

Works for me

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b57cf18d5cbaabef8ef842711bce28dbe6ddf432.png)

```auto
[{"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)

---

<div class="post-metadata">

**Author:** ![HenrikJo](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HenrikJo](https://discourse.nodered.org/u/HenrikJo)\
**Post date:** [14 December 2020 16:02 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/10 "2020-12-14T16:02:27Z")

</div>

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

---

<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:** [14 December 2020 16:08 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/11 "2020-12-14T16:08:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![HenrikJo](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HenrikJo](https://discourse.nodered.org/u/HenrikJo)\
**Post date:** [14 December 2020 16:11 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/12 "2020-12-14T16:11:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HenrikJo](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HenrikJo](https://discourse.nodered.org/u/HenrikJo)\
**Post date:** [14 December 2020 16:28 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/13 "2020-12-14T16:28:13Z")

</div>

I tried to follow:

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

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](https://github.com/martinLim45/share/blob/master/app.min.js)  
> cd ..  
> cp Downloads/app.min.js ./node\_modules/node-red-dashboard/dist/js/app.min.js  
> sudo reboot

---

<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:** [14 December 2020 16:31 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/14 "2020-12-14T16:31:59Z")

</div>

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.

---

<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:** [14 December 2020 17:37 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/15 "2020-12-14T17:37:46Z")

</div>

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.

> <https://github.com/node-red/node-red-dashboard/issues/650>
>
> What are the steps to reproduce?
> Stop node-red, remove any flows file, ensure node-red-dashboard is installed and restart node-red.
> Refresh the browser to...

---

<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:** [14 December 2020 18:41 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/16 "2020-12-14T18:41:59Z")

</div>

Added one more repro case for issue.

---

<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:** [15 December 2020 08:06 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/17 "2020-12-15T08:06:04Z")

</div>

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.

```auto
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`

```auto
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.

---

<div class="post-metadata">

**Author:** ![HenrikJo](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@HenrikJo](https://discourse.nodered.org/u/HenrikJo)\
**Post date:** [15 December 2020 08:55 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/18 "2020-12-15T08:55:38Z")

</div>

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:

> <https://github.com/node-red/node-red-dashboard/issues/650#issuecomment-744627204>
>
> What are the steps to reproduce?
> Stop node-red, remove any flows file, ensure node-red-dashboard is installed and restart node-red.
> Refresh the browser to...

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

```auto
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.

---

<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:** [15 December 2020 10:26 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/19 "2020-12-15T10:26:23Z")

</div>

Should this proposal be added to the github issue?

---

<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:** [15 December 2020 10:35 UTC](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492/20 "2020-12-15T10:35:56Z")

</div>

> [@hotNipi](#):
>
> 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

[This happened to me](https://discourse.nodered.org/t/app-min-js-148-typeerror-cannot-read-property-themestate-of-undefined/28343/13) on a working system after simply updating dashboard & restarting node-red. So there are more vectors at play.

[Next page](https://discourse.nodered.org/t/dashboard-empty-in-ui/37492.md?page=2)