Introduction of Embedding Grafana in a website
Embedding grafana in a website is pretty simple if you want to embed Grafana Panels using Iframe. Often there are times when you want one of the existing Grafana panels to be used in your website for various reasons. Grafana makes it so much easy for you to achieve embedding grafana in a website. So follow along this article and by the time this article finishes, you will be knowing the steps required to successfully integrate Grafana to any website or HTML page.
Here is the Video for video lovers
High Level Steps of Embedding Grafana in a Website
- Making configuration changes in Grafana configuration file. Also known as grafana.ini file.
- Configuration changes allows Grafana panels to be accessibly publicly as an anonymous user.
- Copy embed panel code from Grafana Panel. We will use this in the website’s where we want to integrate Grafana Panel.
- Paste the copied embed code and save the changes.
- Eureka ! Now when you open your website, you can see Grafana Dashboards embedded.
Make changes in /etc/grafana/grafana.ini
Below are the changes which you need to make in grafana.ini file. Make sure you remove semicolon from the beginning of each line which will be present by default in grafana.ini configuration file. This semicolon acts as comments. So any configuration starting with semicolon is comments for Grafana and Grafana will ignore these lines.
allow_embedding = true auth.anonymous enabled = true org_name = <<org name>> org_role = Viewer
Copying embed code from Grafana panel
Steps to copy embed code from Grafana panel is pretty easy. We have to click on the Title of Grafana Panel->Share-> Embed
Adding embedded code in your website as shown below
Paste the code which you have just copied from Grafana Panel. This code should be placed anywhere between <body> </body> section of your HTML code. Don’t worry, you can get in touch with website owner to know where to place the code. You can refer to the code below to see where the code is copied.
Final Result – Embedding Grafana to a Website
Now you can see that the my webpage has Grafana panel embedded in my website. Of-course this is just a sample website so you don’t see much going on here. But once you have your real website, it is going to look so much fun.
You can watch more on Grafana Tutorial Here on my Youtube Channel.
Continue reading more on Grafana here:
- Embedding Grafana in a websiteIntroduction of Embedding Grafana in a website Embedding grafana in a website is pretty simple …
- Monitor Docker Using Telegraf and GrafanaIn this article I am going to show you how you can Monitor Docker Using …
- Grafana Email Alerts and Change Default TemplateIn this article I am going to show you how you can configure Grafana Email …
Grafana Email Alerts and Change Default Template Read More »
- Grafana and Telegram IntegrationIf you want to integrate Grafana and Telegram so that Grafana alerts can be received …
- Installing InfluxDb and TelegrafIn this article I will show you steps for Installing InfluxDb and Telegraf. If there …
1 thought on “Embedding Grafana in a website”
Thanks for the post.
I tried to follow all the steps you mentioned.
However, my IFrame comes as blank. There is nothing.
My Grafana host is a AWS EC2 Instance.
My Website, where I am embedding the Grafana chart is another EC2 instance.
Please guide, what needs to be done.
Comments are closed.