Using Grafana graphs in Lovelace UI

Configuration Frontend
1

Hi, I’ve seen quite some tutorials in which Grafana is being used for producing the most fantastic graphs. So far I understood there are two ways of including these charts in Lovelace (running Hassio on rPi 3):

  • using an iFrame
  • using camera sensor

In case of iFrame i noticed that, when copying the URL for a specific chart I can still browse the entire Grafana front-end (e.g. hamburger menu is shown in the iFrame). This is something I want to avoid because of obvious reasons :slight_smile: Also the iFrame required a login when viewed from outside the local network.

In case of camera sensor you need Grafana to export the chart as image which requires the phantomJS plugin. This is however no longer supported for the ARM (e.g. rPI) platform and seems therefore not to be an option. In addition I expect that, since this results in an image, one can not hover over the chart and see it’s values (which is possible in the iFrame).

How can one embed a single chart in HASSIO which is viewable from outside the network but does not allow for changes to be made in Grafana?

2

Did you solve this ? I cannot even get a dashboard visible.
What should the url be when using duckdns ?
Mine is https://XXXXXX.duckdns.org:60215/sources/0/dashboards/1?lower=now()%20-%2015m

when I use the local ip I do not get results either.

3

Nope, at this point I’m not using Grafana because of the above. Sorry

4

Did you find any alteratives to Grafana? I’m having the same issue and was looking at ChartJS but you need some PHP to pull the values out of the database.

Grafana definately seems like the easier option if phantomJS can be added.

5

I kinda gave up on this. I’m now only using influxdb and it’s dashboard to check on some things every now and then. Nothing fancy that can be integrated in Lovelace for now :frowning:

6

Well I guess that’s better than nothing. I did actually manage to fix the PhantomJS issue in the end, but it will only work if you’re running Raspbian Stretch, and even then it takes a while to generate the image, and you can’t hover over and see values but you can add it to homeassistant easily enough.

7

I also went through the hoops trying to get this working with hassos+add-ons. This won’t work even if you enable anonymous login for grafana. The Iframe cards supposedly won’t work because there is no guarantee of authentication for ingress (was told this by a dev). Interestingly though, one can still access the grafana link using a browser if anon login is enabled. This way at least the graphs can be accessed from a browser without having to use grafana creds.

It still begs for development though, because ultimately folks are want to get rid of recorder/history and replace graphs with the more efficient and usefull influxdb+grafana or similar. Until the hassio ingress issue is worked out with graphana, it can’t really serve as a suitable replacement.

1 Like
8

Hi, @truglodite isn’t there yet a solution for this issue?? I’ve just discovered grafana and I think it’s really awesome :star_struck: and, at the same time, I cannot believe there’s no way to display it on lovelace. :grimacing:

9

I simply used an iframe :

image
image574×546 23.7 KB

10

HI, @francisp I’ve tried an iframe but then I get a ‘401: unauthorized’ error. How can you avoid that?

11

That did the trick :

image

And a restart after.

1 Like
12

So this will work with the add-on as well? If so I’ve got to give this a try! :slight_smile:

13

Hi, thank you @francisp ! I had already tried that but it was only working for my PC and not for my FireOS panel and mobiles. But now, I’ve realized that just accesing Grafana from these devices and then going back to its lovelace dashboards solved the problem, as I was already logged in for each device.

14

Hi Francis, would you mind sharing how your iframe code looks like in the Raw Configuration Editor. Sofar, I’m not very succesfull with embedding Grafana chart in the HA front end.

15

By sheer coincidence I just finished writing up a lot of findings on this topic…

Here’s an example of the charts built in the second link:

Screen Shot 2020-03-23 at 9.09.40 PM
Screen Shot 2020-03-23 at 9.09.40 PM2616×1504 570 KB

The right side is a replacement for the climate “History” (where you see the target/mode/etc. for climate entity). You’re looking at a tri-zone heating system, actually an Arduino sensor & zone heating system I built from scratch. You can see the yellow (HVAC target), green (current temp) and red (heating?)

Hope it helps!

4 Likes
16 
      - aspect_ratio: 65%
        type: iframe
        url: >-
          https://grafana.mydomain.com/api/hassio_ingress/7Juc5fyqIuHvPH_0k4DmgMllLQoD-Q_9K2JqKa125g4/d-solo/7lwqddXZk/temperatuur?orgId=1&from=1584081845683&to=1584168245683&panelId=2"
          width="450" height="200"
          frameborder="0"&refresh=5m&theme=light&from=now-24h&to=
1 Like