Best way to get Grafana chart into Lovelace card

[john-arvid]

Amazed that it would be so difficult and cause so many different issues for people to get a graph from grafana into home assistant, are we doing this the wrong way?

I have found another quirk that I don’t quite understand.
In grafana the graph is smooth but in HA it is jumping up and down, and showing data that is not visible in grafana.

Anyone has an idea on what is wrong?
(Maybe it is the derivative that is not working?)

I have tried these card configurations:

type: iframe
url: >-
  http://10.0.100.151:8123/api/hassio_ingress/4pIrFUOPoNG5hprC1Ny4olqVbxJMtzZHPAw29_mehAo/d-solo/feh3ybuissv0gb/pfsense?orgId=1&timezone=browser&refresh=5s&panelId=1&__feature.dashboardSceneSolo"
  width="450" height="200" frameborder="0"
aspect_ratio: 100%

type: iframe
url: >-
  http://10.0.100.151:8123/api/hassio_ingress/4pIrFUOPoNG5hprC1Ny4olqVbxJMtzZHPAw29_mehAo/d/feh3ybuissv0gb/pfsense?orgId=1&from=now-15m&to=now&timezone=browser&refresh=5s&viewPanel=panel-1&kiosk
aspect_ratio: 100%

And this is the query in grafana:

SELECT derivative(first("bytes_recv"), 1s)  / 1000000 AS "MBytes_recv" FROM "net" WHERE ("interface"::tag = 'mvneta0.4090') AND $timeFilter GROUP BY time(10s) fill(null)

[talalal]

Hi,

Great guide, is there a chance you could please explain how you got Grafana to play nice with Nabu Casa? Particularly how you generated a Grafana link with your Nabu Casa address.

I’ve been experimenting and searching for guidance on how to access Grafana graphs on a lovelace dashboard but whenever connected remotely I get the following message:
“Unable to load iframes pointing at websites using http: if Home Assistant is served over https:.”

If I use my local home assistant IP (http) in the webpage card configuration.

or a “401: Unauthorized.”
If I use the Nabu Casa address

The graphs load fine on my local network with the local home assistant IP.

env_vars in grafana addon config in home assistant:

• name: GF_AUTH_ANONYMOUS_ENABLED
  value: “true”
• name: GF_AUTH_ANONYMOUS_ORG_NAME
  value: Main Org.
• name: GF_AUTH_ANONYMOUS_ORG_ROLE
  value: Admin
• name: GF_SECURITY_ALLOW_EMBEDDING
  value: “true”
• name: GF_AUTH_DISABLE_LOGIN_FORM
  value: “false”

SSL off

But I’ve tried adding env_vars for HTTPS with SSL on
and various other configurations

Thanks!

[Chykan (Andrew)]

When you get a 401: Unauthorised.
Open the Grafana Add-On via your side bar.
This refreshes the ingress token.
Then open your dashboard with the graphs and the graphs will work.

Unfortunately I have not found a work around for this behaviour.

[lovelylain (Lain)]

GitHub - lovelylain/ha-addon-iframe-card: HA webpage card with addon ingress support.

[talalal]

Thank you @Chykan @lovelylain
A great help.

Guess the ingress supporting card configured with Nabu will only work when connected through Nabu and the local network configuration will only work on the local network. If this is the case, I’ll get around it by having a variable URL or doubling up cards and having conditional visibility based on local/remote connection.

[talalal]

I may have missed a far simpler way of achieving this. Either this is useful to someone or you’ll pity me and reveal a simpler path. Used the following addon to template the custom iframe card with ingress support:

GitHub - brunosabot/streamline-card: Streamline your Lovelace configuration with with a...

Template as per addon…

streamline_templates:
  INSERTNAME_template:
    card:
      type: custom:addon-iframe-card
      aspect_ratio: 100%
      url_javascript: |
        const entitystate = states['sensor.YOURDEVICE_connection_type'].state;
        return `
          ${
            entitystate === 'Wi-Fi' ? 'http://LOCALURL/api/hassio_ingress/[[entity]]' :
            entitystate === 'Cellular' ? 'https://REMOTEURL/api/hassio_ingress/[[entity]]' :
            'http://LOCALURL/api/hassio_ingress/[[entity]]'
          }
        `;

Streamline Card configuration:

type: custom:streamline-card
template: INSERTNAME_template
variables:
  entity: >-
    INSERT REST OF URL FOR THE PARTICULAR GRAPH/DASHBOARD HERE

Next steps to figure out:

• if this works or how to make this work for multiple devices, ideally with simultaneous access (e.g. one device is remote, another local)

[Chykan (Andrew)]

I just log all my devices in via https: Nabu Casa even if they are wall mounted screens on the local network. Saves having to over complicate the setup.

[talalal]

Makes sense. Find some things perform better for me locally, but would consider your solution if remote performance matches up