Grafana chart will not appear in MM

PeterKatana

Re: MMM-GrafanaCharts and MMM-GrafanaGauges: Display you data with Charts and Gauges. Beautifully.

Hi all,

I try to get the MMM-GrafanaCharts module running … not so easy:
I played now several days to show a grafana chart in my MM. I used this use case for creating a grafana chart:
https://github.com/geerlingguy/internet-pi. The grafana runs in docker with the following parms:

GF_USERS_ALLOW_SIGN_UP=false
GF_INSTALL_PLUGINS=flant-statusmap-panel,ae3e-plotly-panel
GF_ORG_ROLE=Viewer #to just view graphs without authentication
GF_ORG_NAME=Main Org
GF_AUTH_ANONYMOUS_ENABLED=true
GF_AUTH_ANONYMOUS=true
GF_ALLOW_EMBEDDING=true

I used the share function in the grafana dashboard to create an url:

http://pi-hole:3030/d/o9mIe_Aik/internet-connection?from=1624514783736&to=1624601183736&orgId=1&refresh=5m

and thats my config.js snippet:

{
disabled: false,
module: 'MMM-GrafanaChart',
position: 'top_left', // This can be any of the regions.
config: {
version: "6", // Only add this line if you are using Grafana verison 6 or greater
id: "o9mIe_Aik", // Only Mandartory if you are using Grafana verison 6 or greater found after /d/ in the url
host: "http://pi-hole:3030/d/o9mIe_Aik/internet-connection?from=1624514783736&to=1624601183736&orgId=1&refresh=5m", //Mandatory. See url when displaying within grafana
port: 3030, // Mandatory.
dashboardname: "internet-connection", // Mandatory.
orgId: 1, // Mandatory.
panelId: 2, // Mandatory.
width: "100%", // Optional. Default: 100%
height: "100%", // Optional. Default: 100%
refreshInterval: 900 //Optional. Default: 900 = 1/4 hour
}
},

Both raspberries are running the same network.
But there is nothing to see in the MM. Not even a empty frame.

Thanks for your comments !
Cheers Peter

evroom

Hi Peter,

@peterkatana said in Grafana chart will not appear in MM:

host: “http://pi-hole:3030/d/o9mIe_Aik/internet-connection?from=1624514783736&to=1624601183736&orgId=1&refresh=5m”, //Mandatory. See url when displaying within grafana

I would try:

host: "<grafana_host_ip>",

Nothing to be seen in the pm2 logs ?

I used both MMM-GrafanaChart and MMM-GrafanaGauges for a short time a while ago, but wasn’t really happy with it.
But perhaps it will suit your needs.

PeterKatana

@evroom
Thanks for your ideas. I will try.
Till now I didnt find something appropriate in comparison with the MMM-GrafanaCharts. Also the iFrame was not working for me. But I assume, after they changed some security features in the new version I need to configure the grafana server properly.
If you have an alternative - I am curious.
Thanks Peter

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