ioBroker – Diagramme mit dem E-Charts Adapter erstellen

Zuletzt aktualisiert: 16. September 2026

Mit ioBroker E-Charts lassen sich historische Messwerte direkt im Browser als Diagramm darstellen. Damit können beispielsweise Temperatur, Luftfeuchtigkeit, Stromverbrauch, PV-Ertrag oder andere Smart-Home-Daten ausgewertet werden.

Ich nutze E-Charts bereits seit mehreren Jahren. Seit meiner ursprünglichen Anleitung aus dem Jahr 2020 hat sich der Adapter allerdings stark verändert. Die Oberfläche wurde modernisiert und es sind viele neue Funktionen hinzugekommen. Deshalb schauen wir uns die Einrichtung und die wichtigsten Einstellungen noch einmal komplett neu an.

Was ist ioBroker E-Charts?

E-Charts ist ein ioBroker-Adapter zur Visualisierung von Messwerten und historischen Daten. Grundlage ist die bekannte Apache-ECharts-Bibliothek.

Der Adapter greift auf Daten zurück, die beispielsweise mit dem History-, InfluxDB- oder einem anderen unterstützten History-Adapter gespeichert wurden.

Damit lässt sich beispielsweise aus den Temperaturwerten der vergangenen 24 Stunden ein Verlauf erstellen oder der Stromverbrauch mehrerer Geräte miteinander vergleichen.

Voraussetzung: Daten müssen gespeichert werden

E-Charts kann nur historische Werte anzeigen, wenn diese vorher gespeichert wurden. Ein Datenpunkt, der lediglich seinen aktuellen Wert enthält, liefert noch keinen Temperatur- oder Verbrauchsverlauf.

Für kleinere Installationen reicht häufig der ioBroker History Adapter aus. Eine ausführliche Anleitung dazu findest du hier:

ioBroker Datenpunkte mit dem History Adapter aufzeichnen

Typische Werte, die sich für Diagramme eignen, sind Temperatur, Luftfeuchtigkeit, Stromverbrauch, Leistung, Energieertrag, Batteriespannung oder Füllstände.

E-Charts Adapter installieren

Die Installation erfolgt direkt über die ioBroker-Adapterverwaltung.

1. ioBroker Admin öffnen.
2. Zum Bereich Adapter wechseln.
3. Nach E-Charts suchen.
4. Adapter installieren.
5. Nach der Installation beziehungsweise einem Neustart E-Charts öffnen.

In aktuellen Versionen steht E-Charts anschließend als eigener Bereich in der ioBroker-Oberfläche zur Verfügung.

Erstes Diagramm erstellen

Für unser Beispiel erstellen wir einen einfachen Temperaturverlauf.

Öffne E-Charts und lege ein neues Preset an. Ein Preset ist eine gespeicherte Diagramm-Konfiguration, die später jederzeit wieder geöffnet oder in einer Visualisierung verwendet werden kann.

Vergib zuerst einen eindeutigen Namen, beispielsweise:

Wohnzimmer Temperatur

Datenquelle auswählen

Im nächsten Schritt wird die eigentliche Datenreihe hinzugefügt.

1. History-Instanz auswählen.
2. Gewünschten Datenpunkt suchen.
3. Datenpunkt als neue Linie hinzufügen.
4. Name und Darstellung festlegen.

Wenn ein Datenpunkt nicht angezeigt wird, solltest du zuerst prüfen, ob für diesen Datenpunkt überhaupt eine historische Aufzeichnung aktiviert wurde.

Mehrere Werte in einem Diagramm darstellen

Ein großer Vorteil von E-Charts ist die Möglichkeit, mehrere Datenreihen miteinander zu vergleichen.

Du könntest beispielsweise gleichzeitig anzeigen:

• Temperatur Wohnzimmer
• Temperatur Schlafzimmer
• Außentemperatur

Jede Datenreihe bekommt einen eigenen Namen und kann individuell eingestellt werden.

Linien- oder Balkendiagramm?

Für kontinuierliche Messwerte wie Temperatur oder Luftfeuchtigkeit verwende ich meistens ein Liniendiagramm.

Balkendiagramme eignen sich dagegen gut für Verbrauchswerte, Tageswerte oder den Vergleich mehrerer Geräte.

Aktuelle E-Charts-Versionen bieten außerdem die Möglichkeit, pro Datenreihe einen einzelnen Balken mit dem letzten beziehungsweise aktuellen Wert anzuzeigen. Damit lässt sich beispielsweise der aktuelle Stromverbrauch mehrerer Geräte direkt vergleichen.

Zeitraum einstellen

Im Bereich für die Zeitspanne legst du fest, welcher Zeitraum dargestellt wird.

Typische Einstellungen sind:

• letzte Stunde
• letzte 24 Stunden
• letzte 7 Tage
• aktueller Tag
• aktueller Monat
• fester Zeitraum

Für ein dauerhaftes Dashboard verwende ich meistens einen relativen Zeitraum. So zeigt das Diagramm beispielsweise immer automatisch die letzten 24 Stunden.

Was bedeutet Aggregation?

Wenn viele Messwerte gespeichert werden, müssen nicht immer alle Einzelwerte angezeigt werden. E-Charts kann Werte deshalb zusammenfassen.

Je nach Datenquelle stehen verschiedene Aggregationen zur Verfügung. Typisch sind unter anderem Durchschnitt, Minimum, Maximum oder der tatsächliche Wert.

Für Temperaturkurven ist ein Durchschnitt häufig sinnvoll. Bei Zählerständen oder bestimmten Verbrauchswerten muss dagegen darauf geachtet werden, dass die passende Aggregation gewählt wird.

Aktuellen Wert anzeigen

Neben historischen Verläufen kann E-Charts auch aktuelle Werte darstellen. Dafür gibt es die Aggregation Actual value.

Das ist besonders praktisch für Balkendiagramme. So lässt sich beispielsweise auf einen Blick vergleichen, welches Gerät momentan am meisten Strom verbraucht.

Linien glätten

Bei stark schwankenden Sensorwerten kann ein Diagramm schnell unruhig aussehen. Aktuelle Versionen von E-Charts besitzen deshalb eine Glättungsfunktion.

Dabei wird für jeden Punkt der Durchschnitt aus mehreren vorherigen Werten gebildet. Kleine Schwankungen werden dadurch weniger dominant und langfristige Trends besser sichtbar.

Bei Rohdaten würde ich die Glättung allerdings nur zur Darstellung verwenden. Sie verändert die Anzeige, nicht die tatsächlich gespeicherten Werte.

Mehrere Y-Achsen verwenden

Wenn unterschiedliche Einheiten im gleichen Diagramm verwendet werden, sind mehrere Y-Achsen sinnvoll.

Ein Beispiel:

• Temperatur in °C
• Luftfeuchtigkeit in %

Beide Werte haben völlig unterschiedliche Skalen. Eine zweite Y-Achse sorgt dafür, dass beide Kurven trotzdem sinnvoll dargestellt werden können.

In aktuellen Versionen können die Achsen zusätzlich versetzt werden, wenn mehrere Y-Achsen gleichzeitig angezeigt werden.

Logarithmische Y-Achse

Für spezielle Messwerte kann E-Charts inzwischen auch eine logarithmische Skalierung verwenden.

Das ist interessant, wenn Werte über einen sehr großen Bereich schwanken. Für normale Temperaturen oder Luftfeuchtigkeit wird diese Einstellung in der Regel nicht benötigt.

Markierungen und Grenzbereiche

Bereiche eines Diagramms können optisch hervorgehoben werden. Das eignet sich beispielsweise gut für Temperaturgrenzen.

So könnte bei einem Gefrierschrank beispielsweise ein Bereich oberhalb einer bestimmten Temperatur markiert werden.

Auch bei Luftfeuchtigkeit, Batteriespannung oder Stromverbrauch können solche Markierungen hilfreich sein.

Diagramm speichern

Ist die Konfiguration fertig, wird sie als Preset gespeichert.

Das Preset kann später erneut bearbeitet oder in einer Visualisierung aufgerufen werden. Dadurch muss ein aufwendig konfiguriertes Diagramm nur einmal angelegt werden.

E-Charts in ioBroker VIS einbinden

Für ioBroker VIS stellt E-Charts ein eigenes Widget bereit. Dort kann das zuvor gespeicherte Preset ausgewählt werden.

Damit können beispielsweise Temperatur- oder Energieverläufe direkt auf einem Dashboard erscheinen.

Je nach eingesetzter VIS-Version kann sich die genaue Bedienung unterscheiden. Entscheidend ist, dass das Diagramm vorher als E-Charts-Preset gespeichert wurde.

E-Charts über den Web Adapter öffnen

Ein gespeichertes Preset kann außerdem über den ioBroker Web Adapter direkt aufgerufen werden.

http://IOBROKER-IP:8082/echarts/index.html?preset=echarts.0.PRESETID

IP-Adresse, Port und Preset-ID müssen natürlich an deine Installation angepasst werden.

Diese Variante ist praktisch, wenn das Diagramm in eine andere Oberfläche per iFrame eingebunden werden soll.

Diagramme per Telegram verschicken

E-Charts kann Diagramme auch serverseitig als Bild erzeugen. Dadurch lassen sich Charts beispielsweise über ein JavaScript-Skript an den Telegram Adapter übergeben.

Eine ausführliche Anleitung findest du hier:

ioBroker E-Charts Diagramme per Telegram versenden

Daten aus JSON darstellen

E-Charts ist nicht ausschließlich auf klassische History-Daten angewiesen. Der Adapter unterstützt auch Daten aus einem JSON-Datenpunkt.

Das kann interessant sein, wenn ein eigenes Skript Messwerte erzeugt oder Daten aus einer anderen Quelle bereits als JSON vorliegen.

[
  { "ts": 1675887847000, "val": 45 },
  { "ts": 1675887848000, "val": 77 },
  { "ts": 1675887849000, "val": 180 }
]

Datenpunkt wird in E-Charts nicht angezeigt

Wenn ein gewünschter Datenpunkt in E-Charts fehlt, würde ich zuerst die Historisierung prüfen.

• Ist ein History-Adapter installiert?
• Ist die Aufzeichnung für den Datenpunkt aktiviert?
• Existieren bereits historische Werte?
• Ist in E-Charts die richtige History-Instanz ausgewählt?
• Wurde der Datenpunkt erst vor wenigen Minuten aktiviert?

Aktuelle E-Charts-Versionen können einen State außerdem unter mehreren History-Instanzen anzeigen, wenn er in mehreren Datenquellen aufgezeichnet wird.

Diagramm bleibt leer

Ein leeres Diagramm bedeutet nicht automatisch, dass E-Charts defekt ist.

Häufig liegt der gewählte Zeitraum außerhalb der vorhandenen Messwerte oder die Aggregation passt nicht zum Datenpunkt.

Zum Test würde ich zunächst einen großen Zeitraum auswählen und prüfen, ob überhaupt Werte erscheinen.

E-Charts oder Grafana?

E-Charts eignet sich sehr gut, wenn Messwerte direkt innerhalb von ioBroker dargestellt werden sollen. Die Bedienung erfolgt über eine grafische Oberfläche und einfache Diagramme sind schnell angelegt.

Grafana wird interessant, wenn sehr umfangreiche Dashboards, komplexe Auswertungen oder große Datenmengen verarbeitet werden sollen.

Für einen normalen Temperatur-, Energie- oder Sensorverlauf würde ich deshalb häufig zuerst mit E-Charts anfangen.

E-Charts oder FlexCharts?

ioBroker bietet inzwischen zusätzlich den Adapter FlexCharts. Dieser gibt erfahrenen Nutzern deutlich mehr Zugriff auf die Möglichkeiten von Apache ECharts.

FlexCharts wird hauptsächlich über JavaScript, Blockly beziehungsweise JSON konfiguriert. Für einen schnellen Einstieg und normale Diagramme ist der klassische E-Charts Adapter deshalb meist einfacher.

Fazit

ioBroker E-Charts ist auch 2026 eine sehr praktische Lösung für Diagramme direkt innerhalb von ioBroker. Der Adapter hat sich seit den ersten Versionen deutlich weiterentwickelt und bietet inzwischen wesentlich mehr Möglichkeiten für Linien-, Balken- und Vergleichsdiagramme.

Für den Einstieg reicht bereits ein historisierter Datenpunkt. Danach kann ein Preset angelegt, die Datenquelle ausgewählt und der gewünschte Zeitraum eingestellt werden. Später lassen sich mehrere Datenreihen, unterschiedliche Achsen, Markierungen und weitere Optionen ergänzen.

Häufige Fragen zu ioBroker E-Charts

Brauche ich für E-Charts den History Adapter?

Für historische Diagramme wird eine Datenquelle benötigt, die Werte speichert. Das kann beispielsweise der History Adapter oder eine andere unterstützte History-Instanz sein.

Kann E-Charts Balkendiagramme erstellen?

Ja. Aktuelle Versionen unterstützen Balkendiagramme. Es kann unter anderem auch pro Datenreihe ein einzelner Balken mit dem aktuellen Wert dargestellt werden.

Kann ich mehrere Datenpunkte in einem Diagramm anzeigen?

Ja. Mehrere Datenreihen können gemeinsam dargestellt und individuell konfiguriert werden.

Kann ich E-Charts in VIS anzeigen?

Ja. Für VIS steht ein entsprechendes Widget zur Verfügung, über das gespeicherte E-Charts-Presets ausgewählt werden können.

Warum sehe ich meinen Datenpunkt nicht?

Meistens ist für den Datenpunkt noch keine historische Aufzeichnung aktiviert oder es sind noch keine Werte vorhanden. Prüfe zuerst die Einstellungen des verwendeten History-Adapters.