6

I run Grafana 7.2.0 Open Source Edition and need to embed a website into the dashboard itself. That is, I need a row or two of the usual panels of graphs, and below them embed an external web site that needs to be periodically reloaded.

How can I achieve this? There do not seem to be any relevant plugins at https://grafana.com/grafana/plugins. Is it possible to write a custom panel just for my instance? If so, any pointers about how to start would be appreciated.

jstarek
  • 1,522
  • 1
  • 12
  • 23

2 Answers2

7

You can use Grafana's standard "Text" panel. Set Display->Mode->HTML in panel settings and add <iframe src="http://your.external.web.page.url"></iframe> in panel content editor.

Yuri Lachin
  • 1,470
  • 7
  • 7
  • might need to set `allow_embedding = true` in the config file. – Brett Nov 01 '21 at 18:13
  • 1
    The `allow_embedding` configuration setting controls whether grafana can be embedded on other pages (via the X-Frame-Options header). To get the iframes to show in a text panel, you need to set `disable_sanitize_html` to true. – Ian Belcher Jan 10 '22 at 18:59
0
if you want to dynamically change the height of iframe base on panel within 
Grafana using JavaScript, you can achieve this by this:

 <iframe id="embeddedFrame" src="http://your.external.web.page.url" width="100%"> </iframe>
<script>
var iframe = document.getElementById("embeddedFrame");

    function setIframeHeight() {
        iframe.style.height = iframe.parentElement.offsetHeight-5 + "px";
    }

    // Call setIframeHeight when the iframe content is loaded
    iframe.onload = setIframeHeight;

    // Also, call setIframeHeight when the window is resized
    window.addEventListener("resize", setIframeHeight);
</script>
Javadirad
  • 19
  • 4