Skip to content

Latest commit

 

History

History
executable file
·
112 lines (87 loc) · 3.73 KB

README.md

File metadata and controls

executable file
·
112 lines (87 loc) · 3.73 KB
Raw

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.
example of a grafana weather chart

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: How to get the URL

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