Azure Managed Grafana - embedding a graph on a webapp

mtijb 0

I am trying to embed a Grafana graph (or dashboard) on a web app that I am currently developing using the share->Embed option on the graph panel.

If it was a Grafana on a standalone installation on a PC (not on Azure) this can be done by changing grafana.ini to allow embedding and to allow anonymous access. This ini file does not appear visible or accessible when the graph is on Azure Managed Grafana.

Is there a way to embed a graph on an web app?

1 answer

Rahul Podila 510 Reputation points Microsoft Vendor

2024-11-05T09:53:13.7566667+00:00

Hi @mtijb
Welcome to the Microsoft Q&A Platform! Thank you for asking your question here.

To embed a Grafana graph or dashboard on a web app, you can use the Embed panel feature in Grafana. This feature generates an iframe code that you can copy and paste into your web app.

To enable embedding in Azure Managed Grafana, you can follow these steps:

Open the Azure portal and navigate to your Grafana instance.

Click on the Configuration tab.

Under General, set the Allow anonymous access option to Enabled.

Under Security, set the Allow embedding option to Enabled.

Click Save to save the changes.

Once you have enabled embedding, you can generate the iframe code for your graph or dashboard by following these steps:

Open the Grafana dashboard or graph that you want to embed.

Click on the Share button in the top-right corner of the screen.

Click on the Embed tab.

Configure the options for your embedded graph or dashboard, such as the time range and the size of the iframe.

Copy the generated iframe code.

Paste the iframe code into your web app.
If you have any further queries, do let us know.

If the answer is helpful, please click "Accept Answer" and "Upvote it"
Please sign in to rate this answer.
Rahul Podila 510 Reputation points Microsoft Vendor

2024-11-06T00:52:56.5366667+00:00

Hi @mtijb
If you had a chance to see my comment to your question. If it was helpful, please click "Upvote" on my post let us know Thank you...!

Rahul Podila 510 Reputation points Microsoft Vendor

2024-11-07T01:00:14.64+00:00

Hi @mtijb
If you had a chance to see my comment to your question. If it was helpful, please click "Upvote" on my post let us know Thank you...!

mtijb 0 Reputation points

2024-11-12T00:37:37.2033333+00:00

Hi @Rahul Podila ,

Apologies for the delay in getting back to you and thank you for your response. The email notification ended in a hidden folder and I just saw the update on this.

Open the Azure portal and navigate to your Grafana instance. Click on the Configuration tab.

Did you mean Configuration tab in Grafana?

That is where I expect to see the settings (at least in the standalone implementation you will see it there) but in Azure, unfortunately, these settings are not visible.

Under the Default preferences, only organisation profile details are there.

Rahul Podila 510 Reputation points Microsoft Vendor

2024-11-12T07:17:04.75+00:00

Hi @mtijb
Since you're using Azure Managed Grafana, you can't change the settings like in a self-hosted setup, but you can still embed a Grafana dashboard in your web app.
If you want secure access, you can set up Azure AD authentication, so users will need to log in before viewing the dashboard. If you’re okay with public access, you can use the iframe embed option by sharing the dashboard and copying the embed code. Lastly, if you want more control over the data display, you can use the Grafana API to pull the data and create custom visualizations in your app.
If you have any further queries, do let us know.

If the answer is helpful, please click "Accept Answer" and "Upvote it"

mtijb 0 Reputation points

2024-11-12T07:35:59.6033333+00:00

@Rahul Podila

Thanks for your response.

If you want secure access, you can set up Azure AD authentication, so users will need to log in before viewing the dashboard. If you’re okay with public access, you can use the iframe embed option by sharing the dashboard and copying the embed code. Lastly, if you want more control over the data display, you can use the Grafana API to pull the data and create custom visualizations in your app.

We have looked into all these possibilities and couldn't get this working, hence this post was created. We have in fact decided to leave the embed solution due to this difficulity. Having said that it would have been good to know a solution for our future update.

mtijb 0 Reputation points

2024-11-12T07:47:26.41+00:00

Hello @Rahul Podila

If you want secure access, you can set up Azure AD authentication, so users will need to log in before viewing the dashboard. If you’re okay with public access, you can use the iframe embed option by sharing the dashboard and copying the embed code. Lastly, if you want more control over the data display, you can use the Grafana API to pull the data and create custom visualizations in your app.

We have looked into and tried these points but we could not find a working solution, and that is why I created this post.

In fact, we had to drop the idea of embedding the graph in our web app for now. Having said that, it would have been useful to know a solution for our future update.

Rahul Podila 510 Reputation points Microsoft Vendor

2024-11-12T09:18:33.4433333+00:00

Hi @mtijb
I'm sorry to hear that you were not able to find a working solution for embedding the Grafana graph in your web app. It can be a bit tricky to set up, but it is definitely possible.

For secure access, using Azure AD authentication is a good option. You can configure Azure AD authentication for your Azure Managed Grafana instance by following the steps in the "Set up Azure AD authentication for Azure Managed Grafana" document in the Azure documentation.

For public access, using the iframe embed option is a good option. To use this option, you need to share the dashboard and copy the embed code. Then, you can paste the embed code into your web app's HTML code where you want the graph or dashboard to appear. Note that you may need to adjust the size of the iframe to fit your web app's layout.

If you want more control over the data display, you can use the Grafana API to pull the data and create custom visualizations in your app. The Grafana API allows you to retrieve data from your Grafana instance and use it to create custom visualizations in your app. You can find more information about the Grafana API in the "Grafana HTTP API" document in the Grafana documentation.

Ferdi van de Kamp 5 Reputation points

2024-11-13T13:25:35.8466667+00:00

Hi, you mention in the Azure Portal for the Azure Managed Grafana
Under Security, set the Allow embedding option to Enabled.

I do not see this option. I chose the 'Standard' & v10. Should I choose something different?
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Azure Managed Grafana - embedding a graph on a webapp

1 answer

Your answer