Best way to get Grafana chart into Lovelace card

Glad you like it, this is my first contribution to the community :blush:
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' '' > /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
            - 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
              icon: mdi:cloud-download-outline
            - type: custom:card-modder
                background: transparent
                type: picture-glance
                camera_image: camera.grafana_speed_test_48h
                  - 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.


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

I do not run it on a Rpi. not sure if this is possible or not. The url I use i obtained from here…
Then here…

Right Click “Copy link address”

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

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.

1 Like

Thanks a lot, I will try that !

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

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 :slight_smile:

I use as camera directly from grafana:

  - platform: generic
    name: Grafana_nevera_consumo
    still_image_url: ''
    username: !secret grafana_user
    password: !secret grafana_password

And rendered as Picture Entity Card:



Are you using raspberry pi and hassio?

all my platform runs inside dockers

What does your picture entity card config look like ?

I cannot get mine to show the image.

Br Morten

This is the picture entity card code:

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

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

1 Like

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

More info here:


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.


  - platform: generic
    name: grafana_current_power
    still_image_url: ''
    username: !secret grafana_user
    password: !secret grafana_password
  - platform: generic
    name: weather_oslo
    content_type: 'image/svg+xml'


  - title: Stroom & Gas
      - type: picture-entity
        entity: camera.grafana_current_power
      - type: picture-entity
        entity: camera.weather_oslo
      - type: iframe
        id: grafana_iframe
        aspect_ratio: 65%

This results in 2 out of 3 cards working:

  1. The generic camera with the Grafana still image is not working (camera.grafana_current_power)
  2. The weather image is working (camera.weather_oslo)
  3. 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 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 (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 (auth: False)

Hopefully someone can help me out.

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.

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="" 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.

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


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

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


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

1 Like