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)
Perfect, thank you @edje11 . That was a #googlefail because "show grafana in node red dashboard" did not bring that result up!
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.
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&refresh=1m\n&panelId=2\" \n\n \n></iframe>\n<!-- \n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\n&refresh=1m\n&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\"&refresh=1m\"+\n\"&theme=dark\"+\n\"&from=\"+ msg.fromdate +\n\"&to=\"+ msg.enddate +\n\"&panelId=\"+panelid+\"> </iframe>\"\n\n\n\nreturn msg;\n\n/* ORIGINAL\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"&refresh=1m\"+\n\"&theme=dark\"+\n\"&from=\"+ msg.fromdate +\n\"&to=\"+ msg.enddate +\n\"&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&refresh=1m\n&theme=dark\n&from=now-24h\n&to=now\n&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\"&refresh=1m\"+\n\"&theme=dark\"+\n\"&from=\"+ msg.fromdate +\n\"&to=\"+ msg.enddate +\n\"&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& 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"&". With HTML, the browser translates"&"to"&"so the Web server would only see"&"and not"&"in the query string of the request. from forms - What is & used for - Stack Overflow
thank you for the explanation.
Ok, the & all alone is for an address to type directly in a browser, and & to include it in a html code.
But why, chrome can not display it ? Why the Template node, can not display my Grafana curve?
[{"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\"&refresh=1m\"+\n\"&theme=dark\"+\n\"&from=\"+ msg.fromdate +\n\"&to=\"+ msg.enddate +\n\"&panelId=\"+panelid+\"> </iframe>\"\n\n\n\nreturn msg;\n\n/* ORIGINAL\n\"http://localhost:3000/d-solo/GQ47zhIZk/chri-dashboard?orgId=1\"+\n\"&refresh=1m\"+\n\"&theme=dark\"+\n\"&from=\"+ msg.fromdate +\n\"&to=\"+ msg.enddate +\n\"&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&refresh=1m\n&theme=dark\n&from=now-24h\n&to=now\n&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\"&refresh=1m\"+\n\"&theme=dark\"+\n\"&from=\"+ msg.fromdate +\n\"&to=\"+ msg.enddate +\n\"&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"+
"&refresh=1m"+
"&theme=dark"+
"&from="+ msg.fromdate +
"&to="+ msg.enddate +
"&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&refresh=1m&theme=dark&from=now-24h&to=now&panelId=2> </iframe>"
Don't you need src="http://...." in the template?
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy