3.1 – Grafana – Visualisierung im Dashboard- Graph

In diesem Artikel werden wir uns die Visualisierung Graph genauer ansehen.

Nach dem wir die Installation der Datenbank und Grafana-Visualisierung abgeschlossen haben, können wir nun im nächsten Kapital mit den Visualisierungsmöglichkeiten beginnen. Ich habe das Kapitel daher zunächst in die einzelnen Visualisierungsarten unterteilt und wir werden am Ende des Kapitels dann gemeinsam eine komplette Visualisierung erstellen.

Im ersten Schritt haben wir ein neues Panel angelegt um dann ein Visualisierung hinzuzufügen. In der Auswahl links wählen wir dann die Graph Visualisierung.

Im nächsten Schritt wählen wir dann im Bereich FROM des Query-Editors den Datenpunkt aus, welchen wir über InfluxDB für die Visualisierung aktiviert haben. Als Ergebnis erhalten wir dann einen Graphen mit den einzelnen Sensorwerten in Form von Punkten.

Im nächsten Schritt müssen wir daher die Punkte zu einer sauberen Linie führen. Dazu können wir im Query-Editor im Bereich GROUP BY mit der Fill-Anweisung (linear) die Punkte miteinander verbinden. Im folgenden Graphen habe ich zudem im Bereich Panel – Display die Eigenschaft Area fill höher gesetzt um somit eine gefüllte Fläche zu erhalten.

Der Graph verfügt zudem über eine konfigurierbare Legende, welche die Bezeichnung der Datenreihe sowie weitere Werte darstellen kann. Für die bessere Darstellung habe ich daher zunächst unter Legend – Options – As Table aktiviert. Zudem habe ich dann die Schaltflächen für Min (minimaler Wert), Max (maximaler Wert) und Avg (Durchschnittswert) für die Anzeige innerhalb der Legende aktiviert.

Im nächsten Schritt habe ich zudem noch Achsebeschriftungen für die Y-Achse hinzugefügt. Dazu habe ich in der linken Y-Achse ein Label gesetzt. Alternativ kann das Label auch auf der rechten Seite dargestellt werden. In der Achskonfiguration kann zudem der Minimal-und Maximalwert der Achse definiert werden.

Im nächsten Schritt ändern wir zudem noch die Farbe der Datenreihe. Dazu klickst Du einfach in der Legende auf die grüne Linie der Achse. In der Farbauswahl kannst Du dann die Farbe entsprechend setzen.

Im folgenden Beispiel haben wir die Farbe von Grün zu Rot geändert.

Im nächsten Schritt fügen wir dem Graph noch eine weitere Datenreihe hinzu. In meinem Beispiel betrachten wir so die Außentemperatur sowie die Temperatur im Keller.

Im folgenden Screenshot zeige ich Dir die Darstellung von zwei Datenreihen innerhalb von einem Graph.

Ich hoffe Dir gefällt der Artikel. Über Kommentare, Anregungen oder Ideen freue ich mich wie immer 🙂