Embed Grafana dashboard in web application

The HTML response I get from Java, I am passing to html via JavaScript to render the page in browser.

How can I access the page in iframe or via jQuery load?

Not sure you can access it

Even in iframe , we can’t load the dashboard with API token ?

No, but you can enable anonymous access, it’s about the same in terms of security

But with anonymous access ,anyone can access the dashboard . How it is secure

The same is true if you use api key in url with iframe, anyone can then use the api key to access any dashboard or make any query against your data sources.

Ya, true that’s why I used Java HTTP connection to get html source and pass that HTML source to HTML div via JavaScript. But the page was not rendering properly due to Js error. Using http connection I was getting alert page only. I could see it got authenticated and was able to get the page except Ajax call to render the grafana app tag.i was getting JavaScript error .

Why would that work hand how would that make any difference in terms of security? Grafana fronten will still query its backend and expect data back, second you can possible think you can proxy granfana html into a div and think that will work??

If you need a simple non-interactive graph , please try the render API
http://docs.grafana.org/reference/sharing/
Should provide a png

OR
For full dashboard,
Add a reverse proxy just infrontof Grafana ,
Add grafana inside an iframe in your html page , with a relative path,
Configure reverse proxy , so that the requests with that configured context path pass to grafana , with appropriate rewrites (only needed if there is difference in grafana.ini , the field root_url have a different context path configuration.)
And configure the reverse proxy with the API token , so that no login is needed.

4 Likes

Can you give an example of using Grafana in an iframe with a relative path?

3 Likes

Hi, have you managed to get an example ? This feature seams to be a “must-have” but only few examples. Thanks,

2 Likes

Hi hema, what did you do to display the dashboard on your external website?

Using iframe , embedded the dashboard url

Hi. I am facing the same issue here. I have generated the API key and called from my server side. I would like to embed the grafana dashboard in my website without enabling anonymous access. Anyone got this working? Appreciate your help. I am in this situation for 3 weeks plus

This page is blank (header & footer & nav are there) for me on Safari. On Chrome there seems to be proper content.

hey iam using react to display grafana using iframe i send auth token in query params to by backend which display the basic grafana dashboard but all other api call which iframe made shows un authorize can you help me how to solve this issue?