How can I embed grafana dashboards in web application?

Grafana Authentication
1

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?

1 Like
2

@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
3

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?
4

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

5

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
6

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>

7

cors
cors1049×350 39.9 KB

it’ giving cors issue
thanks

8

@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>
9

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

10

Did you get a solution for this issue?

1 Like
11

Did you ever get a resolution to this? We are looking to embed some Grafana elements with authorization, can this be done with an API key or basic authentication? We are running Grafana v7.5.12 (NA) and I see that JWT has a method for versions 8+

12

Is it even possible to use iframe with authentification?