Best way to get Grafana chart into Lovelace card

pcwii · November 23, 2019, 1:27pm

@darkd,
Glad you like it, this is my first contribution to the community
Here is my command line sensor…

- platform: command_line
  name: "Download Grafana SpeedTest 48h"
  command: "curl -s -H 'Authorization: Bearer tHiS_sHoUlD_cOnTaIn_ThE_bEaReR_Id' 'http://192.168.0.43:3003/render/d-solo/y1AqU7pWk/ecobee?orgId=1&refresh=10s&from=now-48h&to=now%20&panelId=4&width=1000&height=500&tz=America%2FToronto' > /home/homeassistant/.homeassistant/downloads/speed_test_48h.png"

Here is my Camera sensor…

camera 5:
    - platform: local_file
      name: Grafana Speed Test 48h
      file_path: /home/homeassistant/.homeassistant/downloads/speed_test_48h.png

Here is my Lovelace Config

          - type: entities
            title: 'Network'
            show_header_toggle: false
            entities:
            - entity: sensor.myip
            - entity: sensor.speedtest_ping
            - entity: sensor.speedtest_download
            - entity: sensor.speedtest_upload
              icon: mdi:ip-network
            - type: weblink
              name: Internet Speed Trends
              url: http://192.168.0.43:3003/d/y1AqU7pWk/home-assistant-dashboard?orgId=1&now-2d&to=now&refresh=10s&fullscreen&panelId=4&from=now-2d
              icon: mdi:cloud-download-outline
            - type: custom:card-modder
              style:
                background: transparent
              card:
                type: picture-glance
                camera_image: camera.grafana_speed_test_48h
                entities:
                  - camera.grafana_speed_test_48h
                style: |
                  ha-card {
                    text-align: center;
                    background-color: '#3D758B'; 
                    color: '#FFAA00';
                    border-radius: 10px;
                    border: solid 2px rgba(100,100,100,0.3);
                    box-shadow: 4px 4px rgba(0,0,0,0.4);
                  }

Let me know how it goes.

darkd · November 23, 2019, 2:53pm

Thanks a lot !
The http request does not generate a png but an html file. I read that Grafana need the image rendering plugin (https://grafana.com/docs/administration/image_rendering/) but this plugin is not compatible with the Rasperry pi… Do your Grafana instance run on a Rpi ?

pcwii · November 23, 2019, 4:26pm

I do not run it on a Rpi. not sure if this is possible or not. The url I use i obtained from here…
2019-11-23%2008_39_36-Home%20Assistant%20Dashboard%20-%20Grafana
Then here…

Right Click “Copy link address”

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.