4.3.5 Einbinden in Webseiten, z.B. für eine Visualisierung

Beschreibung: Einbindung von statischen oder dynamischen Graphen in Webseiten etc.

Kategorie: Grafana

Link zu diesem Beitrag: Alles auswählen

[url=https://forum.timberwolf.io/app.php/kb/viewarticle?a=25&sid=67786986bc0ed0b8acf45008b9595dc6]Knowledge Base - 4.3.5 Einbinden in Webseiten, z.B. für eine Visualisierung[/url]

4.3.5 Einbinden in Webseiten, z.B. für eine Visualisierung
Zurück zum Inhaltsverzeichnis der Knowledge Base

Die einzelnen Panels lassen sich gut in externe Webseiten, z.B. eine Visualisierung einbinden. Voraussetzung ist natürlich, dass die Visualisierung Zugriff auf den Grafana Server hat, im einfachsten Fall wenn sich beide im gleichen Netz befinden.

Die Einbindung der Panels kann entweder statisch oder dynamisch erfolgen. Zur statischen Einbindung erzeugt Grafana eine PNG Datei, die in der Visualisierung verwendet werden kann aber keinerlei Interaktion erlaubt. Beim dynamischen Einbinden der Panels hat der Anwender der Vsiualisierung dagegen eingeschränkte Interaktionsmöglichkeiten, so kann er z.B. einzelne Datenreihen auswählen oder in die Grafik zoomen. Darüber hinaus werden dynamisch eingebundene Panels in besserer Qualität dargestellt und sie sind performanter.

Zum ermitteln des Links auf die einzelnen Panels wiederum das Menü im Titel aufrufen und dort den Punkt "share" auswählen. Anschließend wird ein Dialog angezeigt, in dem die verschiedenen Links zum Einbinden in einer Visualisierung angezeigt werden.

Bild

Bild


Links zum dynamischen Einbinden eines Panels haben z.B. die folgende Form:

Code: Alles auswählen

https://timberwolf145.local/proxy/grafana/d/L9hQXLhmz/demo?panelId=2&orgId=1&from=1536007710003&to=1536094110004&tab=display&fullscreen
Diese Links können per copy & paste direkt übernommen werden. Sinnvoller ist es aber, die Zeitangaben in dem von Grafana generierten Link in relative Zeiten zu ändern, damit der Graph beim Aufruf in der Visualisierung immer aktuell ist. Dazu können die Angaben hinter "from=" und "to=" geändert werden. Grafana akzeptiert den Begriff "now" für die jeweils aktuelle Zeit beim Aufruf des Links, sowie die folgende Einheiten: s (Sekunden), m (Minuten), h (Stunden), d (Tage), w (Wochen), M (Monate), y (Jahre)

Beispiele:
Darstellung der letzten 12 Stunden:

Code: Alles auswählen

https://timberwolf145.local/proxy/grafana/d/L9hQXLhmz/demo?panelId=2&orgId=1&from=now-12h&to=now&tab=display&fullscreen
Darstellung der letzten 2 Tage:

Code: Alles auswählen

https://timberwolf145.local/proxy/grafana/d/L9hQXLhmz/demo?panelId=2&orgId=1&from=now-2d&to=now&tab=display&fullscreen

Zum statischen Einbinden einer PNG Datei kann mit einem Klick auf "Direct link rendert image" eine von Grafana gerenderte Graphik aufgerufen oder, nach Rechtsklick, die Adresse direkt kopiert werden. Auch bei diesen Links können die Zeitangaben angepasst werden.

Zusätzlich erlaub der Dialog noch die Auswahl eines hellen oder dunklen Stils (Theme), je nachdem was besser zur Optik der Visualisierung passt. Diese Option wird als Parameter mit in den generierten Link übernommen.

Zum Testen könne alle Links direkt in die Adresszeile des Browsers eingegeben und aufgerufen werden.