Grafana iframe disappears

I'm embedding a grafana chart into my dashboard, an have used this library flow as a starting point.
I've made a number of changes to the flow (and yet more to come), and it seems to work OK, except the iframe seems to disappear;

  • When I leave my phone for even 3-4 minutes
  • When I refresh (F5) my browser (Chrome)
  • Occasionally when I change browser tabs for a few minutes.

Neither selecting different time button or refreshing the display returns the iframe, and the only way I've found to get it back is to select a different dashboard menu item, and then reselect this menu item again.

I have attached my flow, together with a data source;

[{"id":"f5262887.e96268","type":"ui_button","z":"c9c4eeb8.bad8e","name":"","group":"61d2dced.3db8f4","order":4,"width":2,"height":1,"passthru":true,"label":"30 M","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"refresh\":\"10s\",\"time\":\"30m\"}","payloadType":"json","topic":"","x":110,"y":940,"wires":[["92c7701f.709f3"]]},{"id":"64aee6e3.e76da8","type":"ui_button","z":"c9c4eeb8.bad8e","name":"","group":"61d2dced.3db8f4","order":5,"width":2,"height":1,"passthru":false,"label":"8 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"refresh\":\"30s\",\"time\":\"8h\"}","payloadType":"json","topic":"","x":110,"y":980,"wires":[["92c7701f.709f3"]]},{"id":"9ce2fe1b.380e4","type":"ui_button","z":"c9c4eeb8.bad8e","name":"","group":"61d2dced.3db8f4","order":3,"width":2,"height":1,"passthru":false,"label":"1 M","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"refresh\":\"5s\",\"time\":\"1m\"}","payloadType":"json","topic":"","x":110,"y":900,"wires":[["92c7701f.709f3"]]},{"id":"1a473f4.ce899c1","type":"ui_template","z":"c9c4eeb8.bad8e","group":"61d2dced.3db8f4","name":"Realtime Power Chart","order":8,"width":"22","height":"10","format":"\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":720,"y":960,"wires":[[]]},{"id":"92c7701f.709f3","type":"function","z":"c9c4eeb8.bad8e","name":"SetTimeRange","func":"var time = msg.payload.time;\n\nvar d = new Date();\nvar current = d.getTime();\n\nmsg.fromdate = \"now-\" + time;\nmsg.enddate = \"now\";\nmsg.refresh = msg.payload.refresh;\n\nreturn msg;","outputs":1,"noerr":0,"x":320,"y":960,"wires":[["b9a31e55.c7053"]]},{"id":"b9a31e55.c7053","type":"function","z":"c9c4eeb8.bad8e","name":"BuildTemplate","func":"panelid=2;\n\n\nmsg.template= \"<iframe \"+\n\n\"style=\\\"width:100%; height:100%; overflow:hidden;  margin:auto; border:none;\\\" \"+ \n\n\n\"src=https://dashboard.digitalnut.co.uk:8443/d/5yf1ztbWz/test?orgId=1\"+\n\"&amp;refresh=\"+ msg.refresh +\n\"&amp;theme=dark\"+\n\"&amp;from=\"+ msg.fromdate +\n\"&amp;to=\"+ msg.enddate +\n\"&amp;panelId=\"+panelid +\n\"&amp;fullscreen\"+\n\"&amp;kiosk\"+\"> </iframe>\";\n\nreturn msg;\n","outputs":1,"noerr":0,"x":510,"y":960,"wires":[["1a473f4.ce899c1"]]},{"id":"432f4ad1.5332b4","type":"ui_template","z":"c9c4eeb8.bad8e","group":"61d2dced.3db8f4","name":"Page Loaded","order":1,"width":0,"height":0,"format":"<script>\n(function() {\n    (function(scope) {\n        scope.send({payload: \"preload\"}); // this gets sent when the view is opened in the browser\n    })(scope);\n})();\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":110,"y":860,"wires":[["f5262887.e96268"]]},{"id":"525c5152.4e94b","type":"ui_button","z":"c9c4eeb8.bad8e","name":"","group":"61d2dced.3db8f4","order":6,"width":2,"height":1,"passthru":false,"label":"24 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"{\"refresh\":\"1m\",\"time\":\"24h\"}","payloadType":"json","topic":"","x":110,"y":1020,"wires":[["92c7701f.709f3"]]},{"id":"61d2dced.3db8f4","type":"ui_group","z":0,"name":"flowtest","tab":"3c94630c.13381c","disp":true,"width":22,"collapse":false},{"id":"3c94630c.13381c","type":"ui_tab","z":0,"name":"Test","icon":"dashboard","order":8}]

When I run it on my Mac in Safari, it works. When I switch to chrome I get this:

No idea what this means....

Never mind - I had the option 'Block third party cookies' turned on and it caused the error.

UPDATE: I swapped tabs and waited 30 minutes and when I went back it pulled up the graph again.
Seems to work fine in my iPhone.

Could it be a issue in your network/wifi?

Not really, I've tried both wifi and GPRS.
Did you try refreshing the page (F5), was the chart still present?
BTW I'm using a Windows 10 laptop & an Android phone.

Also, any idea what the code in the 'Page Loaded' template node is?
I assume it's to run the flow when a browser client connects, but why not use a ui-control node instead? Could it be a 'leftover' bit of code from a bigger flow than the 'library flow'?

Thanks for looking Paul

Many of such issues happen when some display object tries to render before the parent container is ready in DOM. It is really hard to track down if you can't debug source code at all levels.

That sounds above my pay grade!
I'll live with it...
Thanks

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

Hi Paul,

I have updated my Embed Grafana Chart in NR dashboard [https://flows.nodered.org/flow/8e96b8630c4edc866aa0459354033c9b ] flow. With this update the problem with disappearing charts should be fixed.

2 Likes