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.
Continue reading more on Grafana here:
- Grafana and Telegram IntegrationSending Alerts from Grafana to Telegram is very popular method. Let’s learn the integration by …
- Installing InfluxDb and TelegrafIn this article I will show you steps for Installing InfluxDb and Telegraf. If there …
- Upgrading from Grafana 6 to Grafana 7In this article I am going to show you steps for Upgrading from Grafana 6 …
- Changing Grafana Database to MySQLIn this article you are going to learn steps for changing Grafana Database To Mysql. …
- Installing Grafana on WindowsIn this article I will show you all the steps required for Installing Grafana on …