Thank you @darkd, this solves it. Now we can easily map Grafana graphs/objects into Lovelace and have them auto update.
1 Like
You’re welcome 
btw, noticed it works well via chrome on the PC but via the mobile app I get 401: Unauthorized and no image
It’s probably because grafana URL is http not https. Mobile browsers/app are less permissive about security.
Following @joaofl @darkd suggestion re embedded link from Grafana, using that url in an iFrame in lovelace.
However on other devices, it sends me to login page of grafana.
Any ideas how to pass the user / pass as part of the iFrame Grafaba https url?
Add this under config in Grafana addon:
“env_vars”: [
{
“name”: “GF_AUTH_ANONYMOUS_ENABLED”,
“value”: “true”
}
]
@realmadridsi Thanks, assume this is hassio.
Using separate docker containers here but adding GF_AUTH_ANONYMOUS_ENABLED means anyone with my https grafana address can gain access without login no?
this morning I’m getting 401 Unauthorized across all access methods. Images & updates are not getting through to Lovelace 
Yes, that is a problema that seems to affect the hassio due to the containers.
What you have to do to overcome that is:
- Make grafana available from a different port:
Then update your uri to the one corresponding to the new port.
In principle, the same chart with the same api would be available on the new port. However, in my case, I had to copy and paste my dashboard from the instance at port 8123 to that one on port 3000.
After that, I can access my charts from the mobile app as well.
Yes assuming Hassio, you can also just adjust the grafana.ini file by setting it to true.
I’ve seen a lot of posts about this and I’m not sure if I’m just missing some big caveat or something else, but all I had to do to get my Grafana graphs and gauges rendering (and refreshing) in Lovelace was add an iframe card and set the URL to my graph with refresh set and the view mode on Grafana’s “Kiosk” mode (fullscreen).
Step by step instructions are below, but if you want to shortcut them just make sure that you’ve added the following to the query string of your URL:
&refresh=10s&kiosk&fullscreen
Step 1: Open the Grafana dashboard that holds the chart you want to display on your Lovelace card
Step 2: Click the Refresh drop-down at the top right and select the desired refresh rate (this is required if you want your graphs to automatically update)
Step 3: Click the Time Range drop-down and select or specify the time range that you would like to display data from
Step 4: Click the “Cycle view mode” button at the top until you enter Kiosk mode (fullscreen-like view)
Once you enter Kiosk mode, you should see a green notification to let you know that you can press “ESC” to exit Kiosk mode:
Step 5: Click on the title for the chart you wish to display and choose "Share"
Step 6: Disable the “Current time range” toggle on the resulting window, then copy the URL into your Lovelace UI configuration (the “Current time range” toggle effectively converts your selected time range into an absolute time range, thus if this is selected your chart will never update)
The finished product: (note that I managed to take this screenshot while the “Brightness (%)” graph was refreshing, which is why you can see the spinner GIF at the top right of the chart)
28 Likes
I like the iFrame solution because of sharpness, load time and responsiveness but can’t get this working outside my private network and on the mobile app (authorization issues). So I tried once more to get it done with the camera and picture-entity solution.
Finally, I found a way to get the Grafana charts loaded as picture-entity (with Hass.io / Home Assistant). The steps I took:
Add-on configuration
In the Grafana add-on configuration set port mapping Host to 3333 (or any other free port).
configuration.yaml
Setup a camera entity for each chart you want to embed.
camera:
- platform: generic
name: grafana_current_power
still_image_url: https://192.168.1.250:3333/api/hassio_ingress/lGmlp2j2qtV08FUqcZm2E9EbjwB_huTnTnyGHS9ISDc/render/d-solo/Wz8Wde8mz/stroom-and-gas?orgId=1&theme=light&panelId=4&refresh=10s&width=700&height=500
username: !secret grafana_user
password: !secret grafana_password
verify_ssl: false
The still_image_url is important here:
- Get the URL from Grafana (chart dropdown menu > Share > Direct link rendered image)
- Substitute the public domain name with the private IP/hostname of the server
- Make sure the port number matches the port you set in the add-on config
The username and password is of a read-only user I created in Grafana.
Set verify_ssl to false (in my case this was needed).
To avoid the use of a Grafana user you should configure the Grafana add-on to allow anonymous access:
env_vars:
- name: GF_AUTH_ANONYMOUS_ENABLED
value: 'true'
ui-lovelace.yaml
In the Lovelace configuration add a picture-entity card for each chart.
cards:
- type: picture-entity
entity: camera.grafana_current_power
show_name: false
show_state: false
Result
With the steps above I got Grafana charts loaded into the Lovelace UI. I event got it working outside my private network and on the mobile app. I was a happy person at that moment…
Then I started to add more and more charts and found that the server load increased significantly (probably because of the many images that needed to be rendered). This had a major impact on the responsiveness of the whole setup. I even ended up with charts not being loaded anymore. Obviously, this was not the result I was hoping for.
Eventually, I decided to drop the whole camera and picture-entity solution and go with the standard gauge cards and custom mini-graph-card for the most important information I want in the Lovelace UI. An additional entity-button brings me to the Grafana add-on to show me detailed charts.
Hopefully, someone finds a way to get the iFrame solution working outside the privat network and on the mobile app. Grafana charts are too fancy to not embed them in the Lovelace UI!
7 Likes
I have a problem that sometimes when I open my lovelace tab with the Grafana iframe, it only shows blank page. Then I go to grafana URL to check the dashboard works, everything looks ok, then I try again the lovelace iframe and it works again. Why do I have to visit the grafana dashboard first?!
3 Likes
I think because Grafana uses OAuth, when you first load up Home Assistant, it hasn’t kicked off the OAuth authentication yet, so there’s no active session open with the Lovelace iframe. When you navigate, it sets up a session, therefore you’re all set to go auth-wise when you navigate back to a lovelace iframe. Not sure if there are any other solutions to get that working, but some of the ones above seem to be working for them.
2 Likes
This is just an amazing thing with these circadian rhythms. Could you please share this grafana dashboard to combine with your addon?
Hi guys,
so i tried get one of my grafana graphs into Lovelace as a website card. I use the url from the share/embedd menu and my website card seems to grab the diagramm.
Problem is, that i cannot save die dialog in HA. See the spinning circle in the lower right corner. Any hints?
whippie
1 Like
However, i solved it by myself 
Use the url:
http://192.168.178.73:8123/api/hassio_ingress/uXdb2VUDbDtJ2rMEBgJdvEXXU0ns_vQ87Lr4jZiZRHk/d/vXF89oWRk/dashboard?orgId=1&refresh=5m&viewPanel=2&kiosk=1
Works perfectly
4 Likes
Thank you so much, this worked perfect for me!
I have been trying to make this work, but my card defaults to a 5minute view each time instead of 12 hour. My link is set up just like yours. Any ideas of what I should change?
Unfortunately it doesn’t work when I use a camera sensor. The direct link works perfectly. I also tried curl and a token. That doesn’t work for me either. The picture is broken. With the iFrame version I can integrate the charts. Grafana is stored in the docker of a Synology NAS. HA runs on an RPI.
camera:
- platform: generic
name: Wetterdaten
still_image_url: 'http://192.xxx.xxx.xx:8123/api/hassio_ingress/95-0MHs2hqeoXPw26fsnoM4RJv0KuNQv8Q42h3A8voI/d/0vffb8JMz/wetterdaten?orgId=1&refresh=1m&from=1608281918052&to=1608303518052&viewPanel=2'
username: !secret grafana_user
password: !secret grafana_password
How do I get the data about the camera sensor imported into Lovelace? Does anyone here have any ideas?