Im letzten Beitrag habe ich gezeigt, wie man mit Node-RED Wetterdaten von einer offenen API abruft und in einer CSV-Datei speichert. Damit haben wir bereits eine einfache Möglichkeit geschaffen, Messwerte dauerhaft zu protokollieren.
Doch reine Daten in einer Datei sind oft schwer zu interpretieren. Viel übersichtlicher wird es, wenn man die Werte grafisch als Diagramm darstellt.
Genau hier kommt das Node-RED Dashboard ins Spiel. Damit lassen sich mit wenigen Klicks eigene Web-Dashboards erstellen, auf denen Daten aus Flows übersichtlich angezeigt werden können – zum Beispiel als Diagramme, Anzeigen oder Statusfelder.
In diesem Beitrag zeige ich dir Schritt für Schritt:
- wie du das Node-RED Dashboard installierst,
- wie du deine gespeicherten Daten aus der CSV-Datei einliest,
- und wie du daraus ein Diagramm im Dashboard erstellst.
Am Ende dieses Tutorials erhältst du ein kleines Dashboard, das den Temperaturverlauf aus einer gespeicherten CSV-Datei als Diagramm darstellt. Zusätzlich lassen sich die Daten später problemlos erweitern, etwa um Minimal- und Maximalwerte oder weitere Wetterparameter.
Installation des FlowFuse Dashboards
Für die Visualisierung von Daten in Node-RED gibt es verschiedene Dashboard-Lösungen. Lange Zeit war das Paket node-red-dashboard die Standardlösung. Dieses wird jedoch inzwischen nicht mehr aktiv weiterentwickelt und ist als deprecated markiert.
Stattdessen setzen wir in diesem Beitrag auf das FlowFuse Dashboard, den modernen Nachfolger des klassischen Dashboards. Dieses wird aktiv gepflegt und bietet eine deutlich modernere Oberfläche.
Die Installation erfolgt direkt über das Webfrontend von Node-RED.
Öffne dazu das Menü oben rechts und gehe anschließend wie folgt vor:
- Menü (≡) öffnen
- Palette verwalten auswählen
- Zum Tab „Installation“ wechseln
- Nach
@flowfuse/node-red-dashboardsuchen - Auf Installieren klicken
Nach der Installation erscheinen im Node-RED Editor neue Nodes für das Dashboard. Diese erkennst du an der Kategorie Dashboard 2.
Damit lassen sich verschiedene Elemente erstellen, zum Beispiel:
- Charts für Diagramme
- Textfelder zur Anzeige von Werten
- Buttons für Interaktionen
- Statusanzeigen
Im nächsten Schritt erstellen wir ein einfaches Dashboard und zeigen dort die gespeicherten Wetterdaten aus der CSV-Datei als Diagramm an.
CSV-Datei in Node-RED einlesen
Als erstes lesen wir die Daten aus der zuvor gespeicherten CSV-Datei ein.
Die CSV-Datei liegt in meinem Fall im Homeverzeichnis auf dem Raspberry Pi.
Wetterdaten aus der CSV-Datei laden
Wir haben die Daten zunächst im Debug-Tab ausgegeben, um zu prüfen, ob die CSV-Datei korrekt eingelesen wird. Für die weitere Verarbeitung reicht diese Darstellung jedoch nicht aus, da wir die Daten später als Array von Objekten benötigen, um sie im Diagramm darstellen zu können.
Im nächsten Schritt werden die Daten daher mit einem CSV-Node verarbeitet. Dabei definieren wir die Spaltenüberschriften der Datei. Diese werden kommagetrennt angegeben und dienen anschließend als Keys für die erzeugten Objekte.
Die Ausgabe im Debug-Tab ist nun ein Array (eine simple Liste) mit Objekten welche die Schlüssel-Werte Paare enthält.
Daten für das Diagramm formatieren
Die nun ermittelten Daten werden im nächsten Schritt mit einer Function-Node mithilfe von JavaScript aufbereitet. Zum einen benötigen wir aus den eingelesenen Datensätzen lediglich den Zeitstempel sowie die Temperatur. Zum anderen – und das ist der entscheidende Punkt – erwartet das Diagramm im Dashboard die Daten in einem bestimmten Format.
Damit das Diagramm den Temperaturverlauf korrekt darstellen kann, müssen die Werte als Objekte mit Zeit- und Messwert bereitgestellt werden. Zusätzlich wird der Zeitstempel in Millisekunden umgewandelt, da das Diagramm diese Form für die Darstellung der Zeitachse verwendet.
Die Function-Node übernimmt also zwei Aufgaben:
- Reduzieren der Daten auf die benötigten Werte
- Umwandeln der Daten in das passende Format für das Diagramm
let data = msg.payload;
if (!Array.isArray(data)) {
data = [data];
}
msg.payload = data
.map(row => {
let ts = row.zeitstempel;
let temp = parseFloat(row.temperatur);
return {
time: ts,
temperatur: temp
};
})
.filter(row => row !== null);
msg.action = "replace";
return msg;
Wir haben nun ein gefiltertes Array mit nur dem Zeitstempel und der Temperatur.
Temperaturverlauf im Dashboard visualisieren
Wir haben nun die Daten aufbereitet und können diese als nächstes im Diagramm visualisieren. Dazu wählen wir die Chart-Node und konfigurieren diese wie folgt:
Formatieren der Zeitachse
Für die Formatierung der Zeitachse stehen verschiedene Möglichkeiten zur Verfügung. Welche Werte dabei verwendet werden können, ist in der offiziellen Dokumentation von Apache ECharts beschrieben.
Eine Übersicht der verfügbaren Formatierungsoptionen findest du hier:
https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter
Über diese Einstellungen lässt sich beispielsweise festlegen, ob nur Stunden und Minuten, das vollständige Datum oder eine individuelle Darstellung der Zeitstempel auf der X-Achse angezeigt werden.
Starten des Flows und visualisieren der Daten
Damit die Daten im Diagramm angezeigt werden, starten wir den Flow über die Injection-Node damit wir das Diagramm mit den ausgelesenen Daten befüllt.
Minimale, maximale und durchschnittliche Temperatur berechnen
Neben der minimalen und maximalen Temperatur kann es interessant sein, zusätzlich die durchschnittliche Temperatur zu berechnen. Diese gibt einen schnellen Überblick über die allgemeine Temperaturentwicklung im betrachteten Zeitraum.
Da unsere Daten bereits als Array von Objekten vorliegen, können wir alle drei Werte in einem einzigen Durchlauf berechnen. Das ist effizienter als mehrere separate Berechnungen.
Dazu verwenden wir drei Variablen:
minTempfür die minimale TemperaturmaxTempfür die maximale TemperatursumTempfür die Summe aller Temperaturwerte
Während wir das Array durchlaufen, aktualisieren wir diese Werte entsprechend. Am Ende können wir aus der Summe und der Anzahl der Messwerte die durchschnittliche Temperatur berechnen.
Eine mögliche Implementierung in der Function-Node sieht wie folgt aus:
let data = msg.payload; let minTemp = Infinity;
let maxTemp = -Infinity;
let sumTemp = 0;
let count = 0;
for (const row of data) {
let temp = parseFloat(row.temperatur);
if (isNaN(temp)) {
continue;
}
if (temp < minTemp) minTemp = temp;
if (temp > maxTemp) maxTemp = temp;
sumTemp += temp;
count++;
}
let avgTemp = count > 0 ? sumTemp / count : 0;
msg.minTemp = "Min. Temperatur: " + minTemp.toFixed(2) + "°C";
msg.maxTemp = "Max. Temperatur: " + maxTemp.toFixed(2) + "°C";
msg.avgTemp = "Ø Temperatur: " + avgTemp.toFixed(2) + "°C";
return msg;
Nach der Ausführung stehen uns drei Werte im msg-Objekt zur Verfügung:
msg.minTemp– minimale Temperaturmsg.maxTemp– maximale Temperaturmsg.avgTemp– durchschnittliche Temperatur
Diese können anschließend beispielsweise mit Text-Widgets im Dashboard angezeigt werden.
Fazit
Mit wenigen Nodes lässt sich in Node-RED aus einfachen CSV-Daten ein übersichtliches Dashboard erstellen. Die gespeicherten Wetterdaten werden dabei nicht nur grafisch dargestellt, sondern können zusätzlich ausgewertet werden, etwa durch die Berechnung von Minimal-, Maximal- und Durchschnittswerten.
Das gezeigte Beispiel lässt sich leicht erweitern – etwa um weitere Wetterparameter wie Luftfeuchtigkeit, Windgeschwindigkeit oder Wettercodes. Ebenso können die Daten automatisch in regelmäßigen Abständen aktualisiert werden, sodass das Dashboard stets aktuelle Informationen liefert.
Letzte Aktualisierung am: 16. März 2026
1 thought on “Node-RED Tutorial: Daten im Dashboard visualisieren”