Embedding Grafana in a website

Grafana / 10/04/2022 / 1 Comment

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

  1. Making configuration changes in Grafana configuration file. Also known as grafana.ini file.
  2. Configuration changes allows Grafana panels to be accessibly publicly as an anonymous user.
  3. Copy embed panel code from Grafana Panel. We will use this in the website’s where we want to integrate Grafana Panel.
  4. Paste the copied embed code and save the changes.
  5. 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

Copying Grafana Embed Code

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.

Pasting Grafana Embedded Code to Your website

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.

Result of integration of Grafana with Your website

You can watch more on Grafana Tutorial Here on my Youtube Channel.

Continue reading more on Grafana here:

 

1 thought on “Embedding Grafana in a website”

  1. Arabinda Sahoo

    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.

%d bloggers like this:

Privacy Policy - Terms and Conditions