In diesem Node-RED Tutorial zeige ich dir, wie du ein Shelly Dashboard erstellst und deine Energiedaten visualisierst.
Im ersten Teil dieser Reihe hast du bereits gesehen, wie du deine Energiedaten aus der Shelly Cloud exportierst und sauber in einer SQLite-Datenbank speicherst. Damit hast du die Grundlage geschaffen, um deine Daten unabhängig von der Cloud zu verwalten und langfristig auszuwerten.
Doch Daten allein sind noch nicht wirklich hilfreich – erst durch eine übersichtliche Visualisierung wird daraus ein echtes Energie-Dashboard.
In diesem zweiten Teil gehen wir genau diesen Schritt: Wir laden die gespeicherten Werte aus der SQLite-Datenbank und visualisieren sie in einem Node-RED Dashboard. Zusätzlich holen wir uns aktuelle Live-Daten direkt vom Shelly per RPC-Call, sodass du jederzeit den aktuellen Zustand im Blick hast.
Am Ende dieses Beitrags hast du dein eigenes, interaktives Shelly Energie-Dashboard, das nicht nur gut aussieht, sondern dir auch wirklich hilft, deinen Verbrauch besser zu verstehen.
Überblick: Was wir in diesem Beitrag bauen
Im letzten Beitrag Shelly Energie-Dashboard mit Node-RED – Teil 1: SQLite & Datenimport haben wir die Energiedaten aus der Shelly Cloud exportiert und in eine SQLite-Datenbank importiert. Damit ist die Grundlage geschaffen, um die Daten unabhängig von der Cloud weiterzuverarbeiten und auszuwerten.
In diesem Beitrag gehen wir nun den nächsten Schritt und machen die Daten sichtbar. Ziel ist es, ein übersichtliches Dashboard mit Node-RED zu erstellen, das dir sowohl historische Verläufe als auch aktuelle Messwerte anzeigt.
Die gespeicherten Daten aus der Datenbank werden dabei in einem Liniendiagramm visualisiert, sodass du Entwicklungen über die Zeit direkt erkennen kannst. Zusätzlich stellen wir die Werte in einer Tabelle dar, um auch einzelne Datensätze im Detail betrachten zu können.
Im oberen Bereich des Dashboards zeigen wir außerdem die aktuellen Messwerte deines Shelly Plus 1PM an – darunter Strom, Spannung, Leistung und die insgesamt gemessene Energie. Diese Daten holen wir uns live vom Gerät, sodass dein Dashboard immer auf dem neuesten Stand ist.
Das Beste daran: All das lässt sich mit Node-RED ohne großen Aufwand umsetzen – wie du im weiteren Verlauf sehen wirst.
Daten aus SQLite laden
Im ersten Schritt laden wir die zuvor gespeicherten Energiedaten aus der SQLite-Datenbank in Node-RED. Dafür nutzen wir eine Kombination aus einer Inject-Node und einer SQLite-Node.
Die Inject-Node dient dabei als Trigger und stößt die Abfrage manuell oder automatisiert an. Von dort aus wird die SQL-Abfrage an die SQLite-Node übergeben.
Das eigentliche SQL-Statement hinterlegen wir in der msg.topic:
SELECT
id,
timestamp,
ROUND(energy_wh / 1000.0, 3) AS energy_kwh
FROM shelly_energy_monthly;
Hier passiert bereits ein wichtiger Schritt:
Wir lesen nicht nur die Daten aus der Datenbank, sondern bereiten sie direkt auf. Der gespeicherte Energieverbrauch liegt in Wattstunden (Wh) vor und wird im selben Schritt in Kilowattstunden (kWh) umgerechnet. Zusätzlich runden wir den Wert auf drei Nachkommastellen, um eine saubere Darstellung im Dashboard zu gewährleisten.
Nach der Ausführung der Abfrage liefert die SQLite-Node ein Array mit den Ergebnissen zurück. Jeder Eintrag im Array entspricht dabei einem Datensatz aus der Datenbank und besteht aus Key-Value-Paaren.
Die Keys entsprechen den Spaltennamen der Abfrage:
idtimestampenergy_kwh
Diese Struktur ist ideal, um die Daten im nächsten Schritt weiterzuverarbeiten und für die Visualisierung im Dashboard aufzubereiten.
Diagramm erstellen
Nachdem wir die Daten erfolgreich aus der Datenbank geladen haben, können wir diese nun im Dashboard visualisieren. Dafür nutzen wir die Diagramm-Node im Node-RED Dashboard.
Zunächst platzierst du eine Chart-Node in deinem Flow und verbindest sie mit der SQLite-Node bzw. der zuvor aufbereiteten Datenquelle.
In den Einstellungen der Diagramm-Node nimmst du folgende Konfiguration vor:
Grundeinstellungen
- Gruppe:
Wähle eine bestehende Gruppe oder erstelle eine neue (z. B. „Energie Dashboard“) - Beschriftung:
Balkonkraftwerk - Verlauf - Typ:
Linie (Standard)
→ ideal, um zeitliche Verläufe darzustellen
Achsen konfigurieren
- X-Achsen-Typ:
Zeitachse (Standard) - Format:
{dd}.{M}.{yyyy}
→ sorgt für eine saubere Darstellung der Datumswerte - X-Achsen-Beschriftung:
Zeit - Y-Achsen-Beschriftung:
kWh
Datenzuordnung (sehr wichtig!)
Damit das Diagramm korrekt funktioniert, müssen die Datenfelder richtig zugeordnet werden:
- Serien:
String → kWh - X-Wert:
Schlüssel:timestamp - Y-Wert:
Schlüssel:energy_kwh
Hier greift die Diagramm-Node direkt auf die Struktur der Daten zu, die wir zuvor aus der SQLite-Datenbank geladen haben.
Ergebnis
Nach der Konfiguration wird der Energieverlauf als Liniendiagramm im Dashboard dargestellt. Du kannst nun auf einen Blick erkennen, wie sich dein Energieverbrauch bzw. deine Einspeisung über die Zeit entwickelt hat.
💡 Tipp: Falls im Diagramm keine Werte angezeigt werden, überprüfe mit einer Debug-Node, ob die Keys (timestamp, energy_kwh) korrekt gesetzt sind und die Daten im richtigen Format vorliegen.
Daten in einer Tabelle anzeigen
Neben dem Diagramm bietet es sich an, die Daten zusätzlich in Tabellenform darzustellen. So behältst du nicht nur den Verlauf im Blick, sondern kannst auch einzelne Werte direkt und übersichtlich ablesen.
In meinem Fall wird unter dem Diagramm eine Tabelle angezeigt, die die zuvor selektierten Daten aus der SQLite-Datenbank ausgibt. Dafür kannst du einfach eine Table-Node aus dem Dashboard verwenden und diese mit den gleichen Daten verbinden, die auch in das Diagramm fließen.
Der Vorteil dieser Kombination liegt auf der Hand:
Während das Liniendiagramm dir einen schnellen visuellen Überblick über den Verlauf gibt, ermöglicht die Tabelle einen genaueren Blick auf die einzelnen Datensätze – inklusive der jeweiligen Zeitstempel und Werte.
Zwar kannst du im Diagramm durch das Hover über die einzelnen Punkte ebenfalls Details einsehen, jedoch ist die tabellarische Darstellung deutlich komfortabler, wenn du gezielt Werte vergleichen oder nach bestimmten Zeitpunkten suchen möchtest.
Einstellungen für das Diagramm
Die Tabelle wird der Gruppe „[Shelly Dashboard] Shelly Dashboard“ hinzugefügt und hat eine Größe von „auto“.
Im unteren Bereich müssen wir nun die Spalten definieren, Standardmäßig würden sonst die Spaltenüberschriften aus der Datenbank übernommen.
Die erste Spalte ist die ID welche fortlaufend ist:
– Beschriftung: ID
– Typ: Row Number
Die zweite und dritte Spalte sind der Zeitstempel sowie die Werte in kWh:
– Beschriftung: Zeitstempel / Monatswerte (kWh)
– Typ: Text
Abrufen der Live-Daten vom Shelly
Über einen RPC-Call zum Shelly Plus 1PM kann man die aktuellen Daten vom angeschlossenen Verbraucher abrufen.
http://<IP-Adresse>/rpc/Shelly.GetStatusDas Datenformat ist JSON dieses lässt sich wie bereits mehrfach erwähnt in Node-RED sehr einfach verarbeiten.
Folgende Werte sind für uns interessant:
- apower: Leistungsaufnahme in Watt
- voltage: Netzspannung in Volt
- current: Spannungsaufnahme in Ampere
- aenergy.total: gesamt pro Monat
Zusätzlich können wir auch die letzten Werte der Leistungsaufnahme der letzten drei Minuten auslesen, diese sind im Array „by_minute“ abgelegt.
"switch:0": {
"id": 0,
"source": "HTTP_in",
"output": true,
"apower": 17.4,
"voltage": 227.6,
"current": 0.181,
"aenergy": {
"total": 91102.133,
"by_minute": [77.739, 298.57, 290.027],
"minute_ts": 1774425735
}
Flow zum abrufen der Daten
Der Flow zum abrufen der Daten startet erstmal manuell kann aber später mit wenigen klicks auf ein Intervall umgestellt werden.
extrahieren der Daten via JavaScript
Mit der Function-Node extrahieren wir die Daten aus dem JSON. Da uns wie erwähnt nur die Werte von apower, voltage, current und aenergy.total interessieren fassen wir diese in ein JSON zusammen.
const data = msg.payload;
const apower = data["switch:0"].apower;
const voltage = data["switch:0"].voltage;
const current = data["switch:0"].current;
const aenergy_total = data["switch:0"].aenergy.total / 1000;
msg.payload = {
apower: apower,
apower_total: aenergy_total.toFixed(3),
voltage: voltage,
current: current,
};
return msg;
darstellen der Daten in Kacheln
Die Daten möchte ich nicht einfach nur als Text anzeigen sondern grafisch in einer Kachel (deutlich ansehnlicher). Hier verwende ich die Node template in welche HTML, CSS und auch JavaScript ausführen/anzeigen kann.
<template>
<div class="energy-card">
<fieldset>
<legend>⚡ Aktuelle Werte</legend>
<div class="grid">
<div class="item">
<div class="label">Strom</div>
<div class="value">{{msg.payload.current}}</div>
<div class="unit">A</div>
</div>
<div class="item">
<div class="label">Spannung</div>
<div class="value">{{msg.payload.voltage}}</div>
<div class="unit">V</div>
</div>
<div class="item">
<div class="label">Leistung</div>
<div class="value">{{msg.payload.apower}}</div>
<div class="unit">W</div>
</div>
<div class="item">
<div class="label">Energie gesamt</div>
<div class="value">{{msg.payload.apower_total}}</div>
<div class="unit">kWh</div>
</div>
</div>
</fieldset>
</div>
</template>
<style>
.energy-card fieldset {
border: 1px solid #ccc;
border-radius: 8px;
padding: 15px;
}
.energy-card legend {
font-weight: bold;
padding: 0 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.item {
text-align: center;
background: #f5f5f5;
border-radius: 6px;
padding: 10px;
}
.label {
font-size: 12px;
color: #666;
}
.value {
font-size: 20px;
font-weight: bold;
}
.unit {
font-size: 12px;
color: #999;
}
</style>
Fazit
Mit Node-RED lässt sich mit wenigen Nodes ein leistungsfähiges und übersichtliches Energie-Dashboard für deine Shelly Geräte aufbauen. Durch die Kombination aus historischen Daten aus der SQLite-Datenbank und der Visualisierung im Dashboard erhältst du einen klaren Überblick über deinen Energieverbrauch bzw. deine Einspeisung.
Besonders praktisch ist dabei die grafische Darstellung im Liniendiagramm sowie die ergänzende Tabelle, die dir einen detaillierten Blick auf einzelne Zeitpunkte ermöglicht. So kannst du Trends erkennen, Werte vergleichen und deine Daten deutlich besser verstehen als in einer reinen CSV-Datei.
Ausblick
Im nächsten Teil der Reihe gehen wir noch einen Schritt weiter:
Wir erweitern unser Dashboard und kümmern uns darum, die aktuellen Daten direkt vom Shelly auszulesen und automatisch in der SQLite-Datenbank zu speichern.
Dafür passen wir die bestehende Struktur an, sodass die Daten korrekt berechnet und sinnvoll weiterverarbeitet werden können. Ziel ist es, ein vollständig automatisiertes System aufzubauen, das sowohl historische als auch aktuelle Werte kontinuierlich erfasst.
Letzte Aktualisierung am: 25. März 2026
