Grafana Panels anderswo einbetten

anleitung
howto
remix
embed
grafana

#1

Einleitung

Für das Einbetten von Panels muss ich mir immer irgendwo ein Beispiel hier im Forum suchen, daher wollte ichs mal hier dokumentieren.

Die Panel-ID findet man, wenn man in Grafana auf view oder edit geht, dann in der Adresszeile als URL-Parameter panelId=1.

Beispiel

<iframe 
    src="https://swarm.hiveeyes.org/grafana/dashboard-solo/db/muc-mh-b99?from=20170214T162500&to=now&theme=light&panelId=1" 
    width="100%" height="425" frameborder="0">
</iframe>

Ergebnis


Neues Dashboard für imkerliche Daten / New dashboard for beekeepers
#2

Es geht aber auch noch ein Stück komfortabler im Grafana selbst - direkt im jeweiligen Kontext des Panels:

  1. Im Kontextmenü des entsprechenden Panels “Share” auswählen.
    image

  2. Die zweite Karteikarte “Embed” auswählen.

  3. Unten den iframe code rauskopieren und ggf. vorher noch die angebotenen Optionen anpassen.


Wenn man damit dann interaktiv spielen will, lassen sich bei den “from” und “to” Parametern wieder die menschenlesbaren Formate einsetzen, wie im Beispiel von @clemens:

from=20170214T162500&to=now

Auch relative Zeitberechnungen sind möglich:

# Daten der letzen eindreiviertel Stunden
from=now-1h-45m&to=now

# Daten der vorletzten Woche
from=now-2w&to=now-1w

#3

Sehr cool, den dashboard-share-link hatte ich auf dem Schirm, den fürs panel nicht. Danke!

Die default-Werte sollte man noch etwas pimpen, können wir das generell bei Grafana ändern?

<iframe 
    src="https://swarm.hiveeyes.org/grafana/d-solo/rrJQQWiiz/open-hive-peter?refresh=15m&panelId=1&orgId=2&from=1519383253490&to=1520716481180&tab=general" 
    width="450" height="200" frameborder="0">
</iframe>

width=“100%” height=“425” wären als default besser.


#4

Ich hätte da jetzt nicht darauf gewettet, dass das klappt, aber man findet die Werte hier in den Quellen

/usr/share/grafana/public/app/features/dashboard/shareModalCtrl.ts

und hier im Kompilat

/usr/share/grafana/public/build/0.62c2e3e7aa607c7f2d09.js

Die Änderung (bisher nur auf swarm.hiveeyes.org) auf die gewünschten Werte hat scheinbar geklappt, beim nächsten Update würde sie aber natürlich wieder überschrieben werden.


P.S.: Hier wird noch in zwei Varianten beschrieben, wie man die iframes auch dynamisch per Javascript erzeugen kann. Das würde den Einbettungscode nochmals einfacher machen.


#5

Cool, Danke!


#6

Wenn ein statisches Bild eines Panelzustands gebraucht wird, dann kann man direkt an der gleichen Stelle einen modifizierbaren Link erzeugen, der ein image rendert:

image

https://weather.hiveeyes.org/grafana/render/d-solo/BHHuC_ziz/dwd-cdc-mosmix-mix-current-frickel?refresh=5m&panelId=17&orgId=1&from=1522187148681&to=1523483148682&var-CDC_STA_NAME=Berlin-Tegel&var-WMO_STA_NAME=BERLIN-TEGEL&var-RENDER_DATETIME=20180401%200200&var-TIME_DIFF=All&var-WMO_STA_HEIGHT=37.0&var-LAST_RENDER_UNIXTIME=1522598400000&theme=light&width=1000&height=500&tz=UTC%2B02%3A00

ergibt (noch! ;) ) dieses rendering; die annotation ist bei ‘now’:


(DWD-MOSMIX-Wettervorhersage, siehe https://weather.hiveeyes.org/grafana/d/BHHuC_ziz/dwd-mosmix-tests?refresh=5m)