diff --git a/EmbedURL_from_Grafana.gif b/EmbedURL_from_Grafana.gif
new file mode 100644
index 0000000..76a4023
Binary files /dev/null and b/EmbedURL_from_Grafana.gif differ
diff --git a/MMM-GrafanaChart.js b/MMM-GrafanaChart.js
index c7160d9..d507f6d 100755
--- a/MMM-GrafanaChart.js
+++ b/MMM-GrafanaChart.js
@@ -9,7 +9,8 @@
Module.register("MMM-GrafanaChart", {
// Default module config.
defaults: {
- protocol: "http",
+ protocol: "http", // this is needed, so it can be overwritten in the old-style config
+ url: "invalid",
height:"100%",
width:"100%",
scrolling:"no",
@@ -19,6 +20,10 @@ Module.register("MMM-GrafanaChart", {
// Define start sequence.
start: function() {
Log.info("Starting module: " + this.name);
+ // if the user did not provide a URL property, try to assemble one from the older config style, that stored everything in parts
+ if( this.config.url === "invalid" ){
+ this.config.url = this.buildUrl();
+ }
this.scheduleUpdate();
},
@@ -46,14 +51,19 @@ Module.register("MMM-GrafanaChart", {
return URL;
},
+
// Override dom generator.
getDom: function() {
+ if( ! this.config.url.match(/^https?:/i) ){
+ return document.createTextNode(this.name+" found no usable URL configured. Please check your config!");
+ }
+
var iframe = document.createElement("IFRAME");
iframe.style = "border:0"
iframe.width = this.config.width;
iframe.height = this.config.height;
iframe.scrolling = this.config.scrolling;
- iframe.src = this.buildUrl();
+ iframe.src = this.config.url;
// this attribute is used to ensure MagicMirror doesn't throw away our updateDom(), because the DOM object is identical to the previous one
iframe.setAttribute("timestamp", new Date().getTime());
return iframe;
diff --git a/README.md b/README.md
index 3543621..b13c1df 100755
--- a/README.md
+++ b/README.md
@@ -49,15 +49,7 @@ 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.
- from: "now-1d" // use any of grafanas time-range-controls
- to: "now" //
+ 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: "yes", // Optional. Default: no
@@ -67,15 +59,21 @@ modules: [
]
````
-Everything needed is extractable from the url
when you're viewing your chart using grafana in your browser.
+Grafana has a nice dialog that allows you to generate the embed URL you need.
-Grafana version 6.x
+For this make sure that your current view of the graph represents the time range and autorefresh interval you want on your mirror.
-![url provides needed information](grafana_version_6_explanations_image.png)
+Then click the graph's header, go to "Share", then into the "Embed" tab.
-Grafana version 5 or older
+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](EmbedURL_from_Grafana.gif)
-![url provides needed information](https://github.com/SvenSommer/MMM-GrafanaChart/blob/master/config_url.png?raw=true)
## Optional configuration options
The following properties can be configured:
@@ -90,10 +88,6 @@ The following properties can be configured:
protocol
'http'
or 'https'
are valid options. "http"
width
'150 px'
or '50 %'
are valid options. "100%"