Magic Mirror Module: MMM-GrafanaChart

This MagicMirror² module allows you to display a chart generated by grafana.

Important Note: This module requires a running grafana installation. To install Grafana, follow the official installation instructions.

This blogpost describes how to install and use grafana and build a weatherchart.

Installation of the module

In your terminal, go to your MagicMirror's Module folder:

cd ~/MagicMirror/modules

Clone this repository:

git clone https://github.com/SvenSommer/MMM-GrafanaChart

Configure the module in your config.js file.

Configuration

Configuration of the Grafana

Change the grafana.ini to have the following settings

[auth.anonymous]

# enable anonymous access
enabled = true

# specify role for unauthenticated users
org_role = Viewer

[security]
# https://grafana.com/docs/grafana/latest/installation/configuration/#allow-embedding
allow_embedding = true

Configuration of the MagicMirror config-file

To use this module, you have to specify where your grafana installation is hosted and which chart you'd like to display.

Add the module to the modules array in the config/config.js file:

modules: [
	{
		module: 'MMM-GrafanaChart',
		position: 'top_right',   // This can be any of the regions.
		config: {
				url: "https://localhost:5000/....", // see below on how to get the URL from Grafana
				width: "100%", // Optional. Default: 100%
				height: "100%", // Optional. Default: 100%
				scrolling: "no", // Optional. Default: no
				refreshInterval: 900 //Optional. Default: 900 = 1/4 hour
		}
	},
]

Grafana has a nice dialog that allows you to generate the embed URL you need.

For this make sure that your current view of the graph represents the time range and autorefresh interval you want on your mirror.

Then click the graph's header, go to "Share", then into the "Embed" tab.

Deselect the "Current time range" option, which would turn your "last three hours" query into the actual last three hours in absolute time.

Afterwards you can copy the URL from the iframe's src attribute. Open it in a tab to check that everything looks and behaves as you would like.

If everything is as you like, you can copy the URL and paste it in the url config option.

Here is the process in a short animated form:

Optional configuration options

The following properties can be configured:

Option	Description
width	Width of the displayed chart. '150 px' or '50 %' are valid options. Default value:"100%"
height	Height of the displayed chart. '150 px' or '50 %' are valid options. Default value:"100%"
refreshInterval	Update interval of the diagram in seconds. Default value: 900 = 15 \* 60 (four times every hour)
scrolling	if set to yes it enables the iframe content to be scrollable. Default value: no