# Node-Red charts are not displayed

**URL:** <https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338>\
**Category:** Dashboard\
**Created:** [22 November 2020 15:15 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338 "2020-11-22T15:15:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lfil](https://avatars.discourse-cdn.com/v4/letter/l/85e7bf/32.png) [@lfil](https://discourse.nodered.org/u/lfil)\
**Post date:** [22 November 2020 15:15 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/1 "2020-11-22T15:15:35Z")

</div>

Hi,  
I wanted to get into touch with Node-Red by implementing the following project: [https://randomnerdtutorials.com/esp32-mqtt-publish-subscribe-arduino-ide/](https://randomnerdtutorials.com/esp32-mqtt-publish-subscribe-arduino-ide/)  
In the end I was not able to get the chart to show temperature over time running, it does not display anything at that position. As far as I can tell the error messages in browser console also does not belong to charts:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/6/5697fc4cef8561a30af0558c7de052c045bfbf2a.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/1/a12231573aa823f195f92dba082ef2376cfd6b30.png)

I have no idea whats wrong with my implementation, data is available and changing msg.payloud to numbers also doesn't change anything.  
I would be thankful for any support/ idea to solve this issue.  
Current installation:  
Node-Red version 1.2.5

Node: v14.15.1  
Nodejs: v10.23.0

Thanks in advance,  
Fil

---

<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:** [22 November 2020 16:24 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/2 "2020-11-22T16:24:52Z")

</div>

Welcome to the forum @lfil

Please select the four lower nodes and Export them to the clipboard then paste them here using the `</>` button at the top of the forum text window when pasting it in.

---

<div class="post-metadata">

**Author:** ![lfil](https://avatars.discourse-cdn.com/v4/letter/l/85e7bf/32.png) [@lfil](https://discourse.nodered.org/u/lfil)\
**Post date:** [22 November 2020 17:03 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/3 "2020-11-22T17:03:29Z")

</div>

@Colin thanks for welcoming. I'm not sure what the "lower nodes" are, therfore I exported all of them. I hope this helps?

Thanks.

```auto
[{"id":"abf7079a.653be8","type":"mqtt in","z":"a39bb7f1.bc8788","name":"","topic":"esp32/temperature","qos":"2","datatype":"auto","broker":"10e78a89.5b4fd5","x":344,"y":327,"wires":[["cc79021b.9a751","21eae8f8.2971b8","8356a104.2e64b"]]},{"id":"cc79021b.9a751","type":"debug","z":"a39bb7f1.bc8788","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":541,"y":294,"wires":[]},{"id":"4aecba01.78ce64","type":"mqtt in","z":"a39bb7f1.bc8788","name":"","topic":"esp32/humidity","qos":"2","datatype":"auto","broker":"10e78a89.5b4fd5","x":333,"y":211,"wires":[["22efa7b7.544a28","df37e6b7.64c1c8"]]},{"id":"22efa7b7.544a28","type":"debug","z":"a39bb7f1.bc8788","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":530,"y":178,"wires":[]},{"id":"21eae8f8.2971b8","type":"ui_chart","z":"a39bb7f1.bc8788","name":"","group":"61285987.c20328","order":0,"width":0,"height":0,"label":"Temperature","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":541,"y":354,"wires":[[]]},{"id":"df37e6b7.64c1c8","type":"ui_gauge","z":"a39bb7f1.bc8788","name":"","group":"61285987.c20328","order":0,"width":0,"height":0,"gtype":"gage","title":"Humidity","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b3d9","#0073e6","#001bd7"],"seg1":"33","seg2":"66","x":520,"y":238,"wires":[]},{"id":"8356a104.2e64b","type":"ui_gauge","z":"a39bb7f1.bc8788","name":"","group":"61285987.c20328","order":0,"width":0,"height":0,"gtype":"gage","title":"Temperature","label":"°C","format":"{{value}}","min":0,"max":"100","colors":["#007cdb","#e6d600","#d64000"],"seg1":"20","seg2":"22","x":550,"y":400,"wires":[]},{"id":"10e78a89.5b4fd5","type":"mqtt-broker","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"61285987.c20328","type":"ui_group","name":"Main","tab":"e7c46d5e.a1283","order":1,"disp":true,"width":"6","collapse":false},{"id":"e7c46d5e.a1283","type":"ui_tab","name":"Dashboard","icon":"dashboard"}]

```

---

<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:** [22 November 2020 17:28 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/5 "2020-11-22T17:28:17Z")

</div>

That looks ok, does the temperature gauge work?

Are you using the latest version of node-red-dashboard? Check in Manage Palette. If not try updating it, clear the browser cache and refresh the page.

If still not fixed then what browser are you using? Can you try a different one?

Please stop node-red and start it again in a terminal and copy/paste the output here, that will show us a lot.

If you replace the temperature MQTT node with a couple of injects like this does it work?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/dfcfb3ff27a0c0be4b05f21691cf76913c5097e5.png)

Here are the inject nodes so you can Import them.

```auto
[{"id":"e81c76b9.011a4","type":"inject","z":"bdd7be38.d3b55","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"esp32/temperature","payload":"16.4","payloadType":"str","x":140,"y":3260,"wires":[["cc79021b.9a751","21eae8f8.2971b8","8356a104.2e64b"]]},{"id":"94f3566d.7039d","type":"inject","z":"bdd7be38.d3b55","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"esp32/temperature","payload":"20.0","payloadType":"str","x":140,"y":3320,"wires":[["cc79021b.9a751","21eae8f8.2971b8","8356a104.2e64b"]]}]

```

By lower four nodes I meant just the four associated with temperature, since the humidity part is working as it should.

Finally, are those the only dashboard nodes you have configured (the two gauges and the chart)? If so remove them, Deploy, restart node-red and add them again please.

---

<div class="post-metadata">

**Author:** ![lfil](https://avatars.discourse-cdn.com/v4/letter/l/85e7bf/32.png) [@lfil](https://discourse.nodered.org/u/lfil)\
**Post date:** [22 November 2020 17:50 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/6 "2020-11-22T17:50:59Z")

</div>

Yes the temperature gauge works fine. I already tested it with CHrome, Firefox and Safari, as well as restarted Node-Red several times with and without changes.

I also replaced the temperature MQTT with your import suggestion and nothung changed.

I asume that there are any packages or settings at my raspberry pi which do not allow to use chart, what services and packages are needed tfor chart to work?

Thanks for explanation for "lower notes". 🙂

As requested I restarted the Node-Red and got following messages:  
**Start Node-RED**

**Once Node-RED has started, point a browser at http...:1880**  
**On Pi Node-RED works better with the Firefox or Chrome browser**

**Use node-red-stop to stop Node-RED**  
**Use node-red-start to start Node-RED again**  
**Use node-red-log to view the recent log output**  
**Use sudo systemctl enable nodered.service to autostart Node-RED at every boot**  
**Use sudo systemctl disable nodered.service to disable autostart on boot**

**To find more nodes and example flows - go to [http://flows.nodered.org](http://flows.nodered.org)**

**Starting as a systemd service.**  
**22 Nov 18:40:45 - [info]**  
**Welcome to Node-RED**  
**===================**  
**22 Nov 18:40:45 - [info] Node-RED version: v1.2.5**  
**22 Nov 18:40:45 - [info] Node.js version: v14.15.1**  
**22 Nov 18:40:45 - [info] Linux 5.4.72-v7l+ arm LE**  
**22 Nov 18:40:46 - [info] Loading palette nodes**  
**22 Nov 18:40:47 - [info] Dashboard version 2.24.1-beta started at /ui**  
**22 Nov 18:40:47 - [info] Settings file : /home/pi/.node-red/settings.js**  
**22 Nov 18:40:47 - [info] Context store : 'default' [module=memory]**  
**22 Nov 18:40:47 - [info] User directory : /home/pi/.node-red**  
**22 Nov 18:40:47 - [warn] Projects disabled : editorTheme.projects.enabled=false**  
**22 Nov 18:40:48 - [info] Flows file : /home/pi/.node-red/flows\_Homeverzeichn is.json**  
**22 Nov 18:40:48 - [warn]**  
**---------------------------------------------------------------------**  
**Your flow credentials file is encrypted using a system-generated key.**  
**If the system-generated key is lost for any reason, your credentials**  
**file will not be recoverable, you will have to delete it and re-enter**  
**your credentials.**  
**You should set your own key using the 'credentialSecret' option in**  
**your settings file. Node-RED will then re-encrypt your credentials**  
**file using your chosen key the next time you deploy a change.**  
**---------------------------------------------------------------------**  
**22 Nov 18:40:48 - [info] Starting flows**  
**22 Nov 18:40:48 - [info] Started flows**  
**22 Nov 18:40:48 - [info] Server now running at http:...**  
**22 Nov 18:40:48 - [info] [mqtt-broker:10e78a89.5b4fd5] Connected to broker: mqtt**

---

<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:** [22 November 2020 20:13 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/7 "2020-11-22T20:13:26Z")

</div>

You are using a Beta version of the dashboard, though I don't know if that is significant. Is there a reason you are doing that? If not then restore the released version by running  
`cd ~/.node-red`  
`npm remove node-red-dashboard`  
`npm install node-red-dashboard`  
then restart node-red. If that still doesn't fix it then try my suggestion from my last post: "Finally, are those the only dashboard nodes you have configured (the two gauges and the chart)? If so remove them, Deploy, restart node-red and add them again please."

---

<div class="post-metadata">

**Author:** ![lfil](https://avatars.discourse-cdn.com/v4/letter/l/85e7bf/32.png) [@lfil](https://discourse.nodered.org/u/lfil)\
**Post date:** [22 November 2020 20:39 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/8 "2020-11-22T20:39:48Z")

</div>

Thanks a lot for your support. I installed node-red-dashboard 2.24.0 and started again from scratch and it seems to work, now. Thanks.

---

<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:** [6 December 2020 20:39 UTC](https://discourse.nodered.org/t/node-red-charts-are-not-displayed/36338/9 "2020-12-06T20:39:50Z")

</div>

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