Best way to show Grafana in Dashboard?

Apologies if this has been covered elsewhere but I've seen a lot of articles about getting data out of Node-RED into InfluxDB then visualising that data in Grafana.

But what's the best way to show one of these graphs in Node-RED dashboard?

Presumably I'd need a template node. Is the best way just to insert an iframe?

Yes for both template node+iframe.

From grafana you can export the code directly from a chart.

Note that authentication might give some problems, check the grafana documentation how to enable sharing without login (or without eg cookies)

Have a look at this flow https://flows.nodered.org/flow/8e96b8630c4edc866aa0459354033c9b

7 Likes

Perfect, thank you @edje11 . That was a #googlefail because "show grafana in node red dashboard" did not bring that result up!

+1 Thanks @edje11 bookmarked for later

The Buildtemplate node is a normal function node, see the example posted on that page, it's just the label they gave to the function node

+1 thanks

how did you manage to get only the graph from grafana i have the filter and dashboard name as well?

Click on the triangle and choose share and then the tab embed. Copy from the share url the part starting with http:... and ends with orgid=1 , for example http://192.168.1.127:3000/d-solo/0032x0mgk/joshuadashboard?orgId=1
Copy this part to Build template function.
Passing this url to a browser should also show the chart only to verify.
If that's also not working you didn't change the grafana.ini correct or not.

2019-10-17_14-29-41

i did, how you did manage to prevent the marked stuff apprearing in dashboard?

solved : &kiosk

Hi @edje11

i test the link :

http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1
&refresh=1m
&panelId=2

This is the result in Chrome :

If i change little thing after the &:

http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1
&refresh=1m
&panelId=2

it's working :

What is the problem with & ? What do i put instead ?

Try doing a google search using what is &

it's the html code for the & charactere

so I must transform in my Function node an address that has & by & see @edje11. But this code does not show anything in my dashboard.

if someone see something wrong in :

[{"id":"98f78289.cab7","type":"ui_template","z":"378c07b4.3c0cd8","group":"aa43db30.ce1298","name":"temp & tds avec test chrome","order":1,"width":3,"height":2,"format":"<iframe  style=\"\n  width:150px; \n  height:65px;\n  overflow: hidden;\n  margin: auto;\n  border: 0px solid green;\n  \"\nframeborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"\n\nsrc=\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&amp;refresh=1m\n&amp;panelId=2\"  \n\n  \n></iframe>\n<!-- \n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&amp;refresh=1m\n&amp;panelId=2\" \n\n\nMARCHE PAS dans chrome : \"Panel with id not found\" -->\n  \n<!--\nhttp://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&refresh=1m\n&panelId=2\n\nMARCHE OK dans Chrome\n-->","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":860,"y":4100,"wires":[[]]},{"id":"ccce1533.c4a478","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":4,"width":2,"height":1,"passthru":true,"label":"24 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"24","payloadType":"num","topic":"","x":290,"y":4040,"wires":[["8ab52dba.0a72"]]},{"id":"97804d2d.e7399","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":3,"width":2,"height":1,"passthru":false,"label":"12 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"12","payloadType":"num","topic":"","x":290,"y":4080,"wires":[["8ab52dba.0a72"]]},{"id":"1d67fe8d.35ae21","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":2,"width":2,"height":1,"passthru":false,"label":"1 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"num","topic":"","x":290,"y":4000,"wires":[["8ab52dba.0a72"]]},{"id":"4b186b84.b42234","type":"ui_template","z":"378c07b4.3c0cd8","group":"aa43db30.ce1298","name":"ChartTemperatuur","order":8,"width":0,"height":0,"format":"\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":890,"y":4040,"wires":[[]]},{"id":"8ab52dba.0a72","type":"function","z":"378c07b4.3c0cd8","name":"SetTimeRange","func":"var p_30d  = 1000*60*60*24*30 ; //30 Days\nvar p_7d  = 1000*60*60*24*7 ; //7 Days\nvar p_1d   =  1000*60*60*24 ; // 1 Day\nvar p_hr = 1000*60*60; //1 Hour\n\nvar d = new Date();\nvar current = d.getTime();\n\n\nmsg.fromdate = \"now-\" + msg.payload +\"h\";\nmsg.enddate = \"now\";\n\n\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":4040,"wires":[["d1307e21.69815"]]},{"id":"d1307e21.69815","type":"function","z":"378c07b4.3c0cd8","name":"BuildTemplate","func":"panelid=2\n\nmsg.template= \"<iframe \"+\n\n\"style=\\\"width:600px; height:300px; overflow:hidden;  margin:auto; border:0px solid green;\\\" \"+ \n\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"&amp;refresh=1m\"+\n\"&amp;theme=dark\"+\n\"&amp;from=\"+ msg.fromdate +\n\"&amp;to=\"+ msg.enddate +\n\"&amp;panelId=\"+panelid+\"> </iframe>\"\n\n\n\nreturn msg;\n\n/*   ORIGINAL\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"&amp;refresh=1m\"+\n\"&amp;theme=dark\"+\n\"&amp;from=\"+ msg.fromdate +\n\"&amp;to=\"+ msg.enddate +\n\"&amp;panelId=\"+panelid+\"> </iframe>\"\n\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"%26refresh=5s\"+\n\"%26theme=dark\"+\n\"%26from=\"+ msg.fromdate +\n\"%26to=\"+ msg.enddate +\n\"%26panelId=\"+panelid+\"> </iframe>\"\n\nsort le message : \"Panel with id not found\"\nhttp://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&amp;refresh=1m\n&amp;theme=dark\n&amp;from=now-24h\n&amp;to=now\n&amp;panelId=2\n\nhttp://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&refresh=1m\n&theme=dark\n&from=now-24h\n&to=now\n&panelId=2\n*/\n\n\n\n/*   ORIGINAL\npanelid=2\n\nmsg.template= \"<iframe \"+\n\n\"style=\\\"width:600px; height:300px; overflow:hidden;  margin:auto; border:0px solid green;\\\" \"+ \n\n\"src=http://192.168.1.127:3000/d-solo/0032x0mgk/joshuadashboard?orgId=1\"+\n\"&amp;refresh=1m\"+\n\"&amp;theme=dark\"+\n\"&amp;from=\"+ msg.fromdate +\n\"&amp;to=\"+ msg.enddate +\n\"&amp;panelId=\"+panelid+\"> </iframe>\"\n\nreturn msg;\n*/","outputs":1,"noerr":0,"x":700,"y":4040,"wires":[["4b186b84.b42234"]]},{"id":"ff082149.1bb62","type":"function","z":"378c07b4.3c0cd8","name":"SetTimeYesterday","func":"var p_30d  = 1000*60*60*24*30 ; //30 Days\nvar p_7d  = 1000*60*60*24*7 ; //7 Days\nvar p_1d   =  1000*60*60*24 ; // 1 Day\nvar p_hr = 1000*60*60; //1 Hour\n\nvar d = new Date();\nvar current = d.getTime();\nvar today0h = d.setHours(0,0,0,0); //Timestamp midnight\n\nmsg.fromdate = today0h - p_1d\nmsg.enddate = today0h\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":4080,"wires":[["d1307e21.69815"]]},{"id":"839ad95b.c18748","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":5,"width":2,"height":1,"passthru":false,"label":"Yesterday","tooltip":"","color":"","bgcolor":"","icon":"","payload":"yesterday","payloadType":"str","topic":"","x":280,"y":4120,"wires":[["ff082149.1bb62"]]},{"id":"b46bcd92.3dac","type":"ui_template","z":"378c07b4.3c0cd8","group":"aa43db30.ce1298","name":"Page Got Loaded","order":10,"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":90,"y":4040,"wires":[["ccce1533.c4a478","516d713c.6cd53"]]},{"id":"aa43db30.ce1298","type":"ui_group","z":"","name":"Bathroom","tab":"7605e0c6.2cdf9","order":1,"disp":true,"width":"12","collapse":false},{"id":"7605e0c6.2cdf9","type":"ui_tab","z":"","name":"GrafanaTest","icon":"dashboard","order":37}]

Note that replacing & with &amp ; is only done when writing the URL in HTML, where "&" is a special character (along with "<" and ">"). When writing the same URL in a plain text email message or in the location bar of your browser, you would use "&" and not "&amp;" . With HTML, the browser translates "&amp;" to "&" so the Web server would only see "&" and not "&amp;" in the query string of the request. from https://stackoverflow.com/questions/9084237/what-is-amp-used-for

thank you for the explanation.
Ok, the & all alone is for an address to type directly in a browser, and &amp; to include it in a html code.
But why, chrome can not display it ? Why the Template node, can not display my Grafana curve?


image

[{"id":"ccce1533.c4a478","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":4,"width":2,"height":1,"passthru":true,"label":"24 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"24","payloadType":"num","topic":"","x":290,"y":4040,"wires":[["8ab52dba.0a72"]]},{"id":"97804d2d.e7399","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":3,"width":2,"height":1,"passthru":false,"label":"12 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"12","payloadType":"num","topic":"","x":290,"y":4080,"wires":[["8ab52dba.0a72"]]},{"id":"1d67fe8d.35ae21","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":2,"width":2,"height":1,"passthru":false,"label":"1 H","tooltip":"","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"num","topic":"","x":290,"y":4000,"wires":[["8ab52dba.0a72"]]},{"id":"4b186b84.b42234","type":"ui_template","z":"378c07b4.3c0cd8","group":"aa43db30.ce1298","name":"ChartTemperatuur","order":8,"width":0,"height":0,"format":"\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":890,"y":4040,"wires":[[]]},{"id":"8ab52dba.0a72","type":"function","z":"378c07b4.3c0cd8","name":"SetTimeRange","func":"var p_30d  = 1000*60*60*24*30 ; //30 Days\nvar p_7d  = 1000*60*60*24*7 ; //7 Days\nvar p_1d   =  1000*60*60*24 ; // 1 Day\nvar p_hr = 1000*60*60; //1 Hour\n\nvar d = new Date();\nvar current = d.getTime();\n\n\nmsg.fromdate = \"now-\" + msg.payload +\"h\";\nmsg.enddate = \"now\";\n\n\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":4040,"wires":[["d1307e21.69815"]]},{"id":"d1307e21.69815","type":"function","z":"378c07b4.3c0cd8","name":"BuildTemplate","func":"panelid=2\n\nmsg.template= \"<iframe \"+\n\n\"style=\\\"width:600px; height:300px; overflow:hidden;  margin:auto; border:0px solid green;\\\" \"+ \n\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"&amp;refresh=1m\"+\n\"&amp;theme=dark\"+\n\"&amp;from=\"+ msg.fromdate +\n\"&amp;to=\"+ msg.enddate +\n\"&amp;panelId=\"+panelid+\"> </iframe>\"\n\n\n\nreturn msg;\n\n/*   ORIGINAL\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"&amp;refresh=1m\"+\n\"&amp;theme=dark\"+\n\"&amp;from=\"+ msg.fromdate +\n\"&amp;to=\"+ msg.enddate +\n\"&amp;panelId=\"+panelid+\"> </iframe>\"\n\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"%26refresh=5s\"+\n\"%26theme=dark\"+\n\"%26from=\"+ msg.fromdate +\n\"%26to=\"+ msg.enddate +\n\"%26panelId=\"+panelid+\"> </iframe>\"\n\nsort le message : \"Panel with id not found\"\nhttp://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&amp;refresh=1m\n&amp;theme=dark\n&amp;from=now-24h\n&amp;to=now\n&amp;panelId=2\n\nhttp://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&refresh=1m\n&theme=dark\n&from=now-24h\n&to=now\n&panelId=2\n*/\n\n\n\n/*   ORIGINAL\npanelid=2\n\nmsg.template= \"<iframe \"+\n\n\"style=\\\"width:600px; height:300px; overflow:hidden;  margin:auto; border:0px solid green;\\\" \"+ \n\n\"src=http://192.168.1.127:3000/d-solo/0032x0mgk/joshuadashboard?orgId=1\"+\n\"&amp;refresh=1m\"+\n\"&amp;theme=dark\"+\n\"&amp;from=\"+ msg.fromdate +\n\"&amp;to=\"+ msg.enddate +\n\"&amp;panelId=\"+panelid+\"> </iframe>\"\n\nreturn msg;\n*/","outputs":1,"noerr":0,"x":700,"y":4040,"wires":[["4b186b84.b42234"]]},{"id":"ff082149.1bb62","type":"function","z":"378c07b4.3c0cd8","name":"SetTimeYesterday","func":"var p_30d  = 1000*60*60*24*30 ; //30 Days\nvar p_7d  = 1000*60*60*24*7 ; //7 Days\nvar p_1d   =  1000*60*60*24 ; // 1 Day\nvar p_hr = 1000*60*60; //1 Hour\n\nvar d = new Date();\nvar current = d.getTime();\nvar today0h = d.setHours(0,0,0,0); //Timestamp midnight\n\nmsg.fromdate = today0h - p_1d\nmsg.enddate = today0h\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":4080,"wires":[["d1307e21.69815"]]},{"id":"839ad95b.c18748","type":"ui_button","z":"378c07b4.3c0cd8","name":"","group":"aa43db30.ce1298","order":5,"width":2,"height":1,"passthru":false,"label":"Yesterday","tooltip":"","color":"","bgcolor":"","icon":"","payload":"yesterday","payloadType":"str","topic":"","x":280,"y":4120,"wires":[["ff082149.1bb62"]]},{"id":"b46bcd92.3dac","type":"ui_template","z":"378c07b4.3c0cd8","group":"aa43db30.ce1298","name":"Page Got Loaded","order":10,"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":90,"y":4040,"wires":[["ccce1533.c4a478","516d713c.6cd53","98f78289.cab7"]]},{"id":"aa43db30.ce1298","type":"ui_group","z":"","name":"Influx Sensor","tab":"7605e0c6.2cdf9","order":1,"disp":true,"width":"12","collapse":false},{"id":"7605e0c6.2cdf9","type":"ui_tab","z":"","name":"Grafana","icon":"dashboard","order":37,"disabled":false,"hidden":false}]

Use the javascript console tool in the browser to see if there are any errors

You should use
"src=http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1"+
not
"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1"+

Hi @edje11, thanks for answer

That's the finaly code :

panelid=2
msg.template= "<iframe "+
"style=\"width:600px; height:300px; overflow:hidden;  margin:auto; border:0px solid green;\" "+ 

"src=http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1"+
"&amp;refresh=1m"+
"&amp;theme=dark"+
"&amp;from="+ msg.fromdate +
"&amp;to="+ msg.enddate +
"&amp;panelId="+panelid+"> </iframe>"

return msg;

And the result:

This is the Debug message after the Function Node:

object
payload: 24
socketid: "XuQkg3qIPhYY9E69AAAO"
_msgid: "a6fda227.9b892"
fromdate: "now-24h"
enddate: "now"
template: "<iframe style="width:600px; height:300px; overflow:hidden; margin:auto; border:0px solid green;" src=http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1&amp;refresh=1m&amp;theme=dark&amp;from=now-24h&amp;to=now&amp;panelId=2> </iframe>"

Caused by security.
Read more how to disable it.

Don't you need src="http://...." in the template?