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: {
				version: "6", // Only add this line if you are using Grafana verison 6 or greater
				id: "as8fA8na", // Only Mandartory if you are using Grafana verison 6 or greater found after /d/ in the url
				host: "grafana_host", //Mandatory. See url when displaying within grafana
				port: 3000, // Mandatory.
				dashboardname: "weatherforecast", // Mandatory.
				orgId: 1, // Mandatory.
				panelId: 2, // Mandatory.
				width: "100%", // Optional. Default: 100%
				height: "100%", // Optional. Default: 100%
				scrolling: "yes", // Optional. Default: no
				refreshInterval: 900 //Optional. Default: 900 = 1/4 hour
			}
	},
]

Everything needed is extractable from the url when you're viewing your chart using grafana in your browser.

Grafana version 6.x

Grafana version 5 or older

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)