Best way to get Grafana chart into Lovelace card

darkd · November 23, 2019, 6:05pm

Well, on Rpi this option does not exists (i’m running Grafana 6.4.4)

pcwii · November 25, 2019, 2:39pm

I did a bit of digging and it looks like there may be an image renderer for RPI after all. I have not attempted this as I am not running on a Rpi but it may be worth a shot, It looks like the Github repo has been updated in the past week.

darkd · November 28, 2019, 1:39pm

Thanks a lot, I will try that !

darkd · November 29, 2019, 3:48pm

The install succed, everything looks fine but there is still no image export option…

pospik · November 29, 2019, 6:51pm

Hi,
I’m looking in this issue too. I would like to implement png’s, it’s best way I think. But have no free time for this now, but I found this link:

You can try it a let us know

revin · November 29, 2019, 11:40pm

I use as camera directly from grafana:

  - platform: generic
    name: Grafana_nevera_consumo
    still_image_url: 'http://10.10.10.100:3000/render/d-solo/qPgJF7cik/electricidad?panelId=7&orgId=1&width=500&height=250&tz=Europe%2FMadrid'
    username: !secret grafana_user
    password: !secret grafana_password

And rendered as Picture Entity Card:

pospik · November 30, 2019, 10:11am

Are you using raspberry pi and hassio?

revin · November 30, 2019, 10:30am

all my platform runs inside dockers

mortenrpetersen · December 4, 2019, 9:21am

What does your picture entity card config look like ?

I cannot get mine to show the image.

Br Morten

revin · December 4, 2019, 2:07pm

This is the picture entity card code:

entity: camera.grafana_termo_consumo
name: termo
type: picture-entity
aspect_ratio: 50%

friendodevil · December 4, 2019, 2:31pm

@revin re you running Grafana 3.x.x ingress in Hassio?

aukedejong · January 1, 2020, 12:32pm

I got Grafana Image Rendering working on my Raspberry Pi 4 with Docker.

More info here:

Neoc83 · January 3, 2020, 1:16pm

After a few days of trying and searching for possible solutions on the forum here, I would like to post the problem I’m having with getting Grafana charts in a lovelace card through the suggested ‘generic camera’ approach.

configuration.yaml:

camera:
  - platform: generic
    name: grafana_current_power
    still_image_url: 'http://192.168.1.250:8123/api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/render/d-solo/Wz8Wde8mz/energy-usage?orgId=1&panelId=4'
    username: !secret grafana_user
    password: !secret grafana_password
  - platform: generic
    name: weather_oslo
    still_image_url: https://www.yr.no/place/Norway/Oslo/Oslo/Oslo/meteogram.svg
    content_type: 'image/svg+xml'

ui-lovelace.yaml:

  - title: Stroom & Gas
    cards:
      - type: picture-entity
        entity: camera.grafana_current_power
      - type: picture-entity
        entity: camera.weather_oslo
      - type: iframe
        id: grafana_iframe
        url: http://192.168.1.250:8123/api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/d-solo/Wz8Wde8mz/energy-usage?orgId=1&theme=light&panelId=4
        aspect_ratio: 65%

This results in 2 out of 3 cards working:

The generic camera with the Grafana still image is not working (camera.grafana_current_power)
The weather image is working (camera.weather_oslo)
The iframe card with Grafana chart is working. However, this is not my preferred solution because it sometimes gives me a 401: Unauthorized error.

Clicking the picture-entity card opens a pop-up with an empty image:
Aantekening 2020-01-03 140619

Opening the still_image_url in the browser works fine.

The only related log entries I see (debug level):

2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.auth] Authenticated 192.168.1.210 for /api/camera_proxy/camera.grafana_current_power using signed request
2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.view] Serving /api/camera_proxy/camera.grafana_current_power to 192.168.1.210 (auth: True)
2020-01-03 14:13:21 DEBUG (MainThread) [homeassistant.components.http.view] Serving /api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/render/d-solo/Wz8Wde8mz/energy-usage to 192.168.1.250 (auth: False)

Hopefully someone can help me out.

Neoc83 · January 22, 2020, 9:00am

Can somebody push me in the right direction here? I tried to do the same configuration from scratch but I’m still running into the same issues. Any suggestion is appreciated.

joaofl · February 1, 2020, 9:20am

I spent quiet some time reading about the options, but did not see comments on using the iframe with the “embedded” export from Grafana, and it look very sharp!!

The link I used on the iFrame can be grabed from the “share->embedded” menu option. The url looks like this:

<iframe src="http://192.168.1.6:8123/api/hassio_ingress/JJV8Sjky1sZEcgdfgdfgdfgheXoEhIqRHaM8eII8A/d-solo/rf8EBfWRk/temperature?orgId=1&from=1579943642055&to=1580548442055&panelId=2" width="450" height="200" frameborder="0"

But you only want the URL, from http… to …frameborder=“0”
Then you get something like this:

I still could not find out how to update the time window on the iframe, since updating it back in the chart does not reflect on the iframe.

Edit:
As @darkd mentioned below, you can make the time window variable by removing the from=1579943642055&to=1580548442055&

darkd · February 1, 2020, 11:15am

If you remove this part : from=1579943642055&to=1580548442055

the graph will show the last period specified with grafana for this graph (auto update)

friendodevil · February 2, 2020, 7:56pm

Thank you @darkd, this solves it. Now we can easily map Grafana graphs/objects into Lovelace and have them auto update.

darkd · February 2, 2020, 8:07pm

You’re welcome

friendodevil · February 2, 2020, 8:32pm

btw, noticed it works well via chrome on the PC but via the mobile app I get 401: Unauthorized and no image

darkd · February 2, 2020, 10:30pm

It’s probably because grafana URL is http not https. Mobile browsers/app are less permissive about security.