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=886986514f15a81bf4fbf917d991f1ed]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.
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
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
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.