How can I embed grafana dashboards in web application?

I am new to Grafana, I created grafana dashboard in grafana cloud and now I want to show those dashboards in my website. how can I embed grafana dashboards in web application?

@srikanthg doesnt matter you run self-hosted or cloud; method looks the same:

  • open desired dashboard,
  • click Share button near the dashboard name ( upper-left corner of the page ) ,
  • set options you like/need,
  • Copy the generated link
  • paste it as <img> on the website

I followed below steps but not worked

  • I clicked on share button and copy the link.
  • then included in html page like
  • when I open the file in the browser nothing showed.
    could you help me solving this?

sure :slight_smile: could you please show me html code of your web? The part where you pasted copied code.

below is th html code

<!doctype html>
<html lang="en">
<img src="https://srikanthg.grafana.net/d/v6zqp4f7k/brilliantpet-dashboard?orgId=1&from=1645666732065&to=1645677532065">
</html>

thank you

2 Likes

You forgot to close IMG tag. Should be:
<img src="https://srikanthg.grafana.net/d/v6zqp4f7k/brilliantpet-dashboard?orgId=1&from=1645666732065&to=1645677532065"></img>


it’ giving cors issue
thanks

@srikanthg excuse me for not writing sooner…

within your HTML, add <meta> section and add the following:
Set-Cookie: Value=_ga, Site=.grafana.net/; SameSite=None; Secure;

within <head> section of your html file. Whole HTML file will look ( moreless ) like this:

<html>
	<head>
		<!-- Cookie #1 -->
		<meta http-equiv="set-cookie" content="Value=_ga, Site=.grafana.net/; SameSite=None; Secure;"/>
		<!-- Cookie #2 -->
		<meta http-equiv="set-cookie" content="Value=_gid, Site=.grafana.net/; SameSite=None; Secure;"/>
		<!-- Other things like title etc -->
	</head>
	<body>
		<img src="https://srikanthg.grafana.net/d/v6zqp4f7k/brilliantpet-dashboard?orgId=1&from=1645666732065&to=1645677532065"></img>
	</body>
</html>

He. is it possible to use embedded frame with authorisation? Cause when i didn’t allow anonymous access in grafana ini i can only see grafana login window into frame?
I’ve tried to use something like this

 axios
      .get(
        "http://localhost/d-solo/ko0s111nk/new-dashboard-copy?orgId=1&from=1642269053361&to=1642290653361&panelId=4",
        {
          headers: {
            Authorization: "Basic YW50aG9ueTpPwf4Nzd29yZA==",
          },
        }
      )
      .then((response) => {
        console.log(response);
      });

but without success, still got a login window