Best way to get Grafana chart into Lovelace card

[friendodevil]

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]

Hello,

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

[friendodevil]

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

[jhavens12]

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

[vijaykbhatia (Vijay)]

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]

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]

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

Thanks

[pcwii]

@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]

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]

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”

[darkd]

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

[pcwii]

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.

Tutorial - Grafana rendering on Raspberry Pi

grafana/grafana-image-renderer

[darkd]

Thanks a lot, I will try that !

[darkd]

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

[pospik (pospa)]

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:

Tutorial - Grafana rendering on Raspberry Pi

You can try it a let us know

[revin]

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 (pospa)]

Are you using raspberry pi and hassio?

[revin]

all my platform runs inside dockers

[mortenrpetersen]

What does your picture entity card config look like ?

I cannot get mine to show the image.

Br Morten

[revin]

This is the picture entity card code:

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