Alle Möglichkeiten von eCharts nutzen

Flexcharts-Adapter für ioBroker

Nutzen Sie die volle Leistungsfähigkeit von Apache ECharts für ioBroker – ohne die Einschränkungen einer grafischen Konfigurationsoberfläche.

Dieser Adapter richtet sich an erfahrene Benutzer. Es gibt keine Benutzeroberfläche zur Konfiguration von Diagrammen. Diagramme werden vollständig im Code (JavaScript oder Blockly) oder als JSON-Daten definiert, die in einem ioBroker-Status gespeichert sind.

Werfen Sie einen Blick in die ECharts-Demogalerie , um sich einen Eindruck von den Möglichkeiten zu verschaffen.

Anmerkung: Der Adapter wurde noch nicht unter MacOS getestet.

Was ist neu in Version 0.7.3?

Konfigurierbares Timeout fürsource=script Widgets – vermeidet fälschliche Timeout-Fehler bei rechenintensiven oder koordinierten/seriellen Diagrammkonfigurationen:

• Neu optional&requestTimeout=<ms> Dieser Parameter überschreibt die standardmäßige Wartezeit von 2000 ms für das Skript.onMessage() Antwort
• Das Standardverhalten bleibt unverändert – relevant nur, wenn tatsächlich ein Timeout auftritt.

Was ist neu in Version 0.7.2?

Anfängerfreundliche Vorlagen und ein Schritt-für-Schritt-Kochbuch – so werden Flexcharts auch für ECharts-Neulinge zugänglicher:

• Zwei neue, anfängerfreundliche Vorlagen: Vorlage 6 (Energie-Stacked-Bar-Chart mit History-Adapter-Daten) und Vorlage 7 (reaktives Gauge-Chart mit SSE-Auto-Update).
• Verbesserte Kommentare und STEP-Markierungen in allen bestehenden Vorlagen (1–5)
• Neues Wiki mit Kochbuch : Schritt-für-Schritt-Anleitungen zum Erstellen von Live-Diagrammen von Grund auf – siehe Weitere Beispiele und Ressourcen

Was ist neu in Version 0.7.1?

SSE-Chartaktualisierungen ohne Seitenneuladen – bei Verwendung&sse Das Diagramm wird nun direkt aktualisiert, anstatt die gesamte Seite neu zu laden:

• ECharts-Animationen laufen bei jeder Datenaktualisierung reibungslos.
• Kein Flackern oder Diagrammneuaufbau beim Aktualisieren
• Funktioniert transparent für alle bestehenden&sse URLs – keine Änderungen erforderlich

So funktioniert es

Andere ioBroker-Chartadapter verwenden eine Benutzeroberfläche zur Konfiguration von Chartinhalten und -optionen – was die Ausdrucksmöglichkeiten in der Regel einschränkt. flexcharts verfolgt einen anderen Ansatz:

1. Sie definieren das Diagramm als JSON-Objekt (das ECharts).option Variable) — entweder im ioBroker-Status gespeichert oder von einem JavaScript-Skript zurückgegeben.
2. Flexcharts übergibt diese Definition an Apache ECharts im Browser und rendert sie.

Beispiel – ein als Zustandswert gespeichertes gestapeltes Balkendiagramm:

{ "tooltip": {"trigger": "axis","axisPointer": {"type": "shadow"}},
  "legend": {},
  "xAxis": [{"type": "category","data": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],
  "yAxis": [{"type": "value"}],
  "dataZoom": [{"show": true,"start": 0, "end": 100}],
  "series": [
    { "name": "Grid",      "type": "bar", "color": "#a30000", "stack": "Supply",      "data": [8,19,21,50,26,0,36]},
    { "name": "PV",        "type": "bar", "color": "#00a300", "stack": "Supply",      "data": [30,32,20,8,33,21,36]},
    { "name": "Household", "type": "bar", "color": "#0000a3", "stack": "Consumption", "data": [16,12,11,13,14,9,12]},
    { "name": "Heat pump", "type": "bar", "color": "#0000ff", "stack": "Consumption", "data": [22,24,30,20,22,12,25]},
    { "name": "Wallbox",   "type": "bar", "color": "#00a3a3", "stack": "Consumption", "data": [0,15,0,25,23,0,35]}
  ]
}

Ergebnis:

Voraussetzungen

Flexcharts läuft als Web-Erweiterung. Der Webadapter (web.0 ) muss installiert sein und ausgeführt werden. Die folgenden Beispiele gehen vom Standardport 8082 aus.

Erste Schritte

Installation überprüfen

Öffnen Sie diese URL in einem Browser (ersetzen Sielocalhost (mit Ihrer ioBroker-Serveradresse):

http://localhost:8082/flexcharts/echarts.html?source=state&id=flexcharts.0.info.chart1

Es sollte ein Demo-Diagramm erscheinen. Wenn dies der Fall ist, funktioniert der Adapter ordnungsgemäß.

Quelloption 1 – ioBroker-Status

http://localhost:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.echarts.chart1

flexcharts liest den Zustand0_userdata.0.echarts.chart1 und stellt es als EChart dar. Erstellen Sie diesen Zustand, fügen Sie das obige JSON-Beispiel als Wert ein und öffnen Sie dann die URL.

Hinweis: Diese Zeichen sind in Staatskennungen nicht zulässig:: / ? # [ ] @ ! $ & ' ( ) * + , ; = %

Quelloption 2 – JavaScript-Skript

Dies bietet mehr Flexibilität. Flexcharts ruft Ihr Skript bei jeder Anfrage auf, und Ihr Skript gibt die Diagrammdefinition zurück. Zusätzliche URL-Parameter werden an das Skript weitergeleitet.

Es wird ausschließlich javascript.0 (die erste JS-Adapterinstanz) unterstützt.

Erstelle ein Skript:

onMessage('flexcharts', (httpParams, callback) => {
    const myJsonParams = (httpParams.myjsonparams ? JSON.parse(httpParams.myjsonparams) : {});
    console.log(`httpParams = ${JSON.stringify(httpParams)}`);
    chart1(result => callback(result));
});

function chart1(callback) {
    const option = {
        tooltip: {trigger: "axis", axisPointer: {type: "shadow"}},
        legend: {},
        xAxis: [{type: "category", data: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]}],
        yAxis: [{type: "value"}],
        dataZoom: [{show: true, start: 0, end: 100}],
        series: [
            {name: "Grid",      type: "bar", color: "#a30000", stack: "Supply",      data: [8,19,21,50,26,0,36]},
            {name: "PV",        type: "bar", color: "#00a300", stack: "Supply",      data: [30,32,20,8,33,21,36]},
            {name: "Household", type: "bar", color: "#0000a3", stack: "Consumption", data: [16,12,11,13,14,9,12]},
            {name: "Heat pump", type: "bar", color: "#0000ff", stack: "Consumption", data: [22,24,30,20,22,12,25]},
            {name: "Wallbox",   type: "bar", color: "#00a3a3", stack: "Consumption", data: [0,15,0,25,23,0,35]}
        ]
    };
    callback(option);
}

Starten Sie das Skript und öffnen Sie anschließend Folgendes:http://localhost:8082/flexcharts/echarts.html?source=script

Der Standardnachrichtenname lautet:flexcharts Um einen anderen Namen zu verwenden, fügen Sie hinzu&message=mycharts und anpassenonMessage('mycharts', ...) entsprechend.

Zusätzliche URL-Parameter werden an das Skript übergeben.httpParams :

http://localhost:8082/flexcharts/echarts.html?source=script&chart=chart1&myjsonparams={"period":"daily"}

Erweiterte Funktionen

JavaScript-Funktionen innerhalb von Diagrammdefinitionen

StandardJSON.stringify() Entfernt Funktionen aus Diagrammdefinitionen. Um Funktionen (z. B. benutzerdefinierte Formatierer) einzubinden, verwenden Sie das npm-Modul.javascript-stringify :

1. Hinzufügenjavascript-stringify zu „Zusätzliche npm-Module“ in der JavaScript-Adapterkonfiguration:
2. In Ihrem Skript:var strify = require('javascript-stringify');
3. Ersetzencallback(option) mitcallback(strify.stringify(option)) — oder für einen Bundesstaat:setState('my_chart_id', strify.stringify(option), true)

Siehe Vorlage 3 für ein funktionierendes Beispiel mit einem Tooltip-Formatter.

Sicherheitshinweis:javascript-stringify Ermöglicht das Übergeben beliebigen Codes an den Browser. Achten Sie darauf, ioBroker bei Verwendung dieses Moduls nicht über das Internet zugänglich zu machen.

Ereignisgesteuerte dynamische Diagramme

ECharts unterstützt interaktive Diagramme, die sich als Reaktion auf Benutzeraktionen aktualisieren. Sehen Sie sich dieses ECharts-Beispiel und eine Bildschirmaufnahme mit flexcharts an.

Verwenden Sie ein Skript als Quelle und übergeben Sie die Diagrammdefinition und die Ereignisbehandler als Array. Vorlage 4 veranschaulicht dies. Wichtige Regeln:

• Ereignisbehandler müssen verwendenmyChart.on("event", function(e){ ... })
• Der Handler muss ein JavaScript-String sein (verwenden Sie konsistente Anführungszeichen oder minimieren Sie ihn mit einem JS-Minifier ).
• Übergeben Sie alles als Array:callback([strify.stringify(option), onEvent1, onEvent2])

Bei Verwendung eines Zustands als Quelle muss der Zustand ein JSON-Array von Zeichenketten sein. Sowohl die Diagrammdefinition als auch die Handler-Zeichenketten müssen gültige JSON-Zeichenketten sein (keine Zeilenumbrüche, nur maskierte Anführungszeichen innerhalb). Beispiel:flexcharts.0.info.chart3 Die

Hinweis für Benutzer, die von Version 0.4.x aktualisieren: Die Variable für die Diagrammoptionen wurde umbenannt vonjsopts Zuoption in Version 0.5.0. Aktualisieren Sie Ihre Ereignisbehandlungsfunktionen entsprechend.

Sicherheitshinweis: Wie oben – ioBroker darf bei der Verwendung nicht mit dem Internet verbunden werden.javascript-stringify Die

Ereignisgesteuerte Diagrammaktualisierung (SSE)

Hinzufügen&sse Um automatische Diagrammaktualisierungen per Server-Sent Events zu aktivieren, kann eine beliebige Diagramm-URL hinzugefügt werden. Der Browser hält eine permanente Verbindung zum Server aufrecht und aktualisiert das Diagramm bei jeder Änderung der Quelldaten – ein Neuladen der Seite oder ein Abfrageintervall sind nicht erforderlich. ECharts-Animationen laufen bei jeder Aktualisierung flüssig.

Mitsource=state :

Das Diagramm aktualisiert sich automatisch, sobald der angegebene Zustand erreicht ist.&id= Änderungen.

http://localhost:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.echarts.chart1&sse

Mitsource=script :

Das Skript steuert den Diagramminhalt, daher kann Flexcharts nicht erkennen, welcher Zustand eine Aktualisierung auslöst. Geben Sie dies explizit an mit&triggerid=<state_id> :

http://localhost:8082/flexcharts/echarts.html?source=script&message=mycharts&triggerid=0_userdata.0.echarts.trigger&sse

Das Diagramm wird immer dann aktualisiert, wenn0_userdata.0.echarts.trigger Änderungen. Ihr ioBroker-Skript kann diesen Status aktualisieren, um Chart-Aktualisierungen an den Browser zu senden.

Drossel- und Bestätigungsfilter:

Standardmäßig (&sse Ohne Wert wird das Diagramm höchstens einmal alle 5 Sekunden aktualisiert (Minimum). Geben Sie eine Zahl an, um ein längeres Mindestintervall festzulegen:

...&sse=30    → update at most once every 30 seconds

Für eine detaillierte Steuerung verwenden Sie ein JSON-Objekt (URL-codiert):

...&sse={"refresh":10,"ack":true}   → update only on acknowledged state changes, at most every 10 s
...&sse={"ack":false}               → update only on unacknowledged changes (set by script), default interval

Zustandsänderungen während des Drosselungsintervalls gehen nicht verloren – die Aktualisierung wird auf den nächsten zulässigen Zeitpunkt verschoben.

Notiz:&sse Und&refresh kann kombiniert werden — SSE löst bei Zustandsänderung eine Aktualisierung direkt vor Ort aus.&refresh bietet eine Ausweichlösung mit regelmäßigem Seitenneuladen.

Designs (ECharts v6)

Verwenden Sie den Apache ECharts Theme Builder , um Designs zu erstellen oder zu ändern.

Verwendung eines Skripts als Quelle:

1. Design aus dem Theme Builder herunterladen → Registerkarte „JSON-Version“ → Kopieren
2. In Ihrem Skript:const myThemeDefault = <paste here>
3. Übergeben Sie es als Teil des Callback-Arrays:callback([JSON.stringify(option), ['default', JSON.stringify(myThemeDefault)]])

Vorlage 5 zeigt den kompletten Designwechsel inklusive Dunkelmodus.

Verwendung eines Bundesstaates als Quelle:

Der Statuswert muss ein Array sein:[<stringified chart>, ['default', <stringified theme>]] . Sehenflexcharts.0.info.chart4 für ein praktisches Beispiel.

Andere Themen alsdefault Unddark erfordern eine explizite Aktivierung übermyChart.setTheme(<name>) innerhalb einer ereignisgesteuerten Funktion.

Schnell ausprobieren:

callback([JSON.stringify(option), ['default', '{"title":{"left":"left"},"color":["#ff715e","#ffaf51","#ffee51","#8c6ac4","#715c87"],"backgroundColor":"rgba(64,64,64,0.5)"}']]);

Vorlagen

Weitere Beispiele und Ressourcen

Kochbuch (Schritt-für-Schritt-Anleitungen)

Neu bei Flexcharts oder ECharts? Das Flexcharts-Wiki bietet Ihnen Schritt-für-Schritt-Anleitungen, die Sie von einem statischen Diagramm zu einem vollständig interaktiven Dashboard führen:

Weitere Kochbuchartikel sind geplant.

Beispiele für Adapter von Drittanbietern

• tibberLink-Adapter: Siehe Diskussionen hier und hier – tibberLink verwendet außerdem flexcharts nativ, siehe die zugehörige Dokumentation.
• sun2000-Adapter: Native Integration von Flexcharts verfügbar
• Viessmann E3-Serie (z. B. Wärmepumpe Vitocal 250): Diskussion auf ioBroker.e3oncan

Referenz

Basis-URL:http://localhost:8082/flexcharts/echarts.html

Spenden

Wenn dir dieses Projekt gefallen hat – oder du einfach nur großzügig sein möchtest –, spendiere mir doch ein Bier. Prost! 😉

Changelog

0.7.3 (2026-08-24)

• (MyHomeMyData) Added optional requestTimeout parameter for source=script widgets to configure the timeout waiting on the script's response (default 2000 ms, unchanged). Ref. issue #205

0.7.2 (2026-05-07)

• (MyHomeMyData) Added beginner-friendly templates 6 (energy stacked bar chart with history adapter) and 7 (reactive gauge chart with SSE auto-update)
• (MyHomeMyData) Improved comments and STEP markers in templates 1–5
• (MyHomeMyData) Added Wiki with Cookbook articles A1–A3 (step-by-step guides for building live charts)

0.7.1 (2026-05-05)

• (MyHomeMyData) Adapter requires node.js >= 22 now
• (MyHomeMyData) SSE now updates chart in place via setOption instead of reloading the page — ECharts animations work correctly on data updates

0.7.0 (2026-04-15)

• (MyHomeMyData) Implemented SSE (Server-Sent Events) to support event driven updating of chart

0.6.2 (2026-04-13)

• (MyHomeMyData) Restructuring of code for better readability and improved performance.
• (MyHomeMyData) Restructuring of Readme for better readability.

Older versions

Older changelog entries are available in CHANGELOG_OLD.md.

License

MIT License

Copyright (c) 2024-2026 MyHomeMyData juergen.bonfert@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Additional remark: Source code of Apache ECharts is used according to Apache License, Version 2.0