Grafana chart will not appear in MM

sdetweil

@peterkatana also, please put any config.js entries in a code block,

paste text
select text pasted
hit the button above editor that looks like </>

makes it easier for us all to read

PeterKatana

@sdetweil

I will do. Thanks for the recommendation how to make my content more readable.

Cheers Peter

cowboysdude

@peterkatana this is for you and anyone else having issues.

It’s a pretty good guide!

https://www.planet4.se/grafana-in-magic-mirror/

raymondjspigot

Hi - there haven’t been any updates on this lately but I thought I’d add some notes from when I tried out Grafana recently.

I’ve been using Grafana v8.4.6 installed on Ubuntu (so this might not help if your trouble is related to running it in a Docker container). I wanted to show a grafana-gauge on my Magicmirror. After changing some configuration and making some adjustments to the MMM-GrafanaGauges module I can confirm I’ve got it to show my gauge on the mirror, although I still have a couple of issues with it.

Anyway, notes on how I got to this point:

Logged into my Ubuntu machine (the Grafana-host) and made some updates to the grafana.ini file (as noted in one of the guides linked above)

In v8.4.6 the grafana.ini file is at /etc/grafana so in a terminal I could go

sudo nano /etc/grafana/grafana.ini

in order to edit the file. I needed to allow anonymous viewing of shared dashboards (i.e. without needing to log in as a Grafana user) and allow embedding. I set

[auth.anonymous]
enabled = true

[security]
allow_embedding = true

Note that I think the ; character shows a comment in the .ini file, so I needed to uncomment these entries as well as update them to = true

I needed to restart the grafana-server for these changes to take effect.

sudo system-ctl restart grafana-server

Logged into Grafana on the grafana-host, and viewed the graph that I wanted to show on my mirror. There’s a Share option, with an Embed tab available. It provides some HTML to use to embed the graph in another page. In my case this looked like

<iframe src="http://localhost:3000/d-solo/kJ03KuhMk/power-gauge?orgId=1&panelId=5" width="450" height="200" frameborder="0"></iframe>

I’d updated the parameters for the module in my MagicMirror config.js but when I checked the dev console on my MagicMirror I could see that MMM-GrafanaGauges was writing the URL it was trying to use to the log, and it looked like

<iframe src="http://grafanahost:3000/dashboard-solo/db/power-gauge?orgId=1&panelId=5" ...

The log also included a 404 Not found message just after. So possibly the URL-format has changed since the module was written, or my grafana configuration is different.

I updated the MMMGrafana-Gauges.js file to build the URL to match the one provided on the Share/Embed page anyway, i.e. using /d-solo/kJ03KuhMk instead of the dashboard-solo/db literal, and now I can see the graph on my mirror.

Issues I still have with it:

When the graph is refreshed, it fades out (which is neat) but then fades back before the graph is ready to be displayed. It shows a bouncing grafana logo followed by some white text (Loading and initializing dashboard, or something) which looks pretty ugly. It would be neater if it would fade back in only once the graph has finished loading.
I haven’t been able to get the background-transparency on the graph to work. There is a Transparent background setting when editing graphs in grafana, but the frame still shows up as a dark-grey rectangle around the graph on my mirror, which doesn’t look so good.

Hope this is helpful to someone anyway

Fips

Hey guys,

I’m running into the same issue. But I have an error code: electron failed to load URL, and it is error ERR_BLOCKED_BY_RESPONSE.

I get the same issue with an iframe module in MM2.

I read, that electron would block unsafe sides and as the grafana I want to show is running on an external device I do not own and can’t configure, cause it is part of my solar panel, I can’t change anything about it. The side is registered as insecure in the browser.

Any idea? I already tried to modify the electron.js with a phrase to allow unsafe URLs, but it didn’t work.

Greetz