This MagicMirror² module allows you to display a diagram generated by grafana
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
MMM-GrafanaChart.js
README.md
config_url.png
weather_explained.gif

README.md

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

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: {
					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%
					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.

url provides needed information

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)