Best way to get Grafana chart into Lovelace card

ntompson · July 29, 2019, 5:22am

Hi,

I’m hoping someone has experience with getting Grafana panels into the Lovelace front end. I’ve been able to make it work, but it’s not very pretty. I get the best results using an iframe card and a link to the panel from the Grafana share option.

For example:

This comes from an iframe card configured as:

type: iframe
url: >-
  https://<mydomain>/grafana/d/8p8pTz4iz/weather?orgId=1&refresh=10s&panelId=6&fullscreen&kiosk=1
aspect_ratio: 50%

But there are a couple of problems:

There is a big grey border between the iframe card edge and the chart
There is a strange scroll bar on the right

It would be great to hear from anyone who has experience with making these work better.

Thanks,

Nick

tom_l · July 29, 2019, 5:47am

Play with the aspect ratio. The graph itself is close to 43%. No idea about the window around it due to the scroll bar, but that would be a good place to start.

ntompson · July 29, 2019, 6:26am

Thanks for the suggestion @tom_l, certainly 50% aspect ratio isn’t great. With 80% it is a bit more legible, but it doesn’t address the big border - it actually made it worse along the bottom:

Oddly enough - the scroll bar doesn’t appear this time - although it does seem to come and go with different window sizes.

Any other suggestions would be very welcome!

andrewdolphin · July 29, 2019, 7:51am

I think this might be a grafana question not home assistant? My iframe cards don’t have a border but I’m not using grafana.

A quick google suggests the grafana iframe has a frameborder parameter - perhaps try setting that to zero?

LbDab · July 29, 2019, 3:47pm

Format link to graph like this:

http://IP:PORT/d-solo/8p8pTz4iz/weather?orgId=1&panelId=6

ntompson · July 30, 2019, 12:44am

Awesome - thanks @LbDab - that fixed the border problem nicely. Unfortunately, I still have the vertical scroll bar - any idea how to get rid of that?

tom_l · July 30, 2019, 1:40am

Set your aspect ratio correctly.

ntompson · July 30, 2019, 1:58am

Thanks @tom_l for the suggestion, but that doesn’t help. The Lovelace iframe card just adapts its vertical height for whatever aspect ratio I set, but there is always a scroll bar.

tom_l · July 30, 2019, 2:48am

Looking closely, the scroll bar actually appears to be part of the grafana graph not home assistant. Can you specify the legend be a list on the graph instead of under it?

andrewdolphin · July 30, 2019, 5:58am

The scrollbar does appear to be a grafana issue.

What version of grafana are you on?

ntompson · July 30, 2019, 11:36pm

Ah - very good point. My Grafana version is 5.1.3, which could be suffering the issue you’ve cited. Will update and see what happens.

ntompson · July 31, 2019, 12:06am

Awesome - thanks @andrewdolphin - that did the trick. Upgrading Grafana to the current version (6.2.5) fixed the scrollbar problem.

I did have to fix one thing: the new version must have introduced some new security features, one of which is to disable embedding Grafana panels in an iframe by default. Setting the environment variable GF_SECURITY_ALLOW_EMBEDDING=true in the docker container sorted this out.

Thanks all. Now I’m good to go nuts with Grafana charts in Lovelace cards!

klogg · August 2, 2019, 7:53am

On a similar point (or not? I’m just starting out with Grafana) how can I get rid of the scroll bars in Grafana itself. They are showing but there is nowhere to scroll so are a bit redundant.

friendodevil · September 6, 2019, 8:15pm

which grafana share option do you use (link, embed, snapshot)?

Both link and embedd render in lovelace via iframe but don’t update. I was unable to get snapshot to work.

Help appreciated

weado · November 5, 2019, 8:15pm

Hello,

I think your graph is beautiful. Could you give me your template or the way of working ?

friendodevil · November 6, 2019, 4:23pm

was this ever answered?
I also need help on which way to best share, especially w/v3.0

jhavens12 · November 10, 2019, 1:54pm

Does anyone have any additional info? I’m sharing but cannot get the iframe to render in HomeAssistant

vijaykbhatia · November 21, 2019, 8:48pm

Hi All, What settings did you use so that your grafana graph updates in the iframe. Mine only updates the data when I refresh the lovelace interface.

pcwii · November 23, 2019, 1:59am

I was never happy with the iframe as I could never get it to look or update the way I wanted. I opted instead to use mutliple Command Line Sensors to grab the most recent graph images. I then have those images as part of a Generic Camera. After this I populate the images in my lovelace as a Picture Glance Card.
I also provide a link to the actual Grafana app to access more details if I need.

darkd · November 23, 2019, 11:25am

Nice option ! Could you please share your command line ?
edit: You probably use the http api ? (https://grafana.com/docs/http_api/snapshot/)

Thanks