Major Update auf Apache ECharts 6.0.0

16.10.2025: Apache hat vor ein paar Wochen die Version 6.0.0 von ECharts veröffentlicht, hier sind die Neuerungen im Detail beschrieben. Das Standard-Thema, also das visuelle Erscheinungsbild, wurde deutlich verändert, es gibt einige neue Funktionen und Diagrammtypen und man kann nun dynamisch zwischen hellem und dunklem Design umschalten, getriggert durch die Systemeinstellung.

Ich habe Flexcharts entsprechend erweitert:

• mit &themev5 kann man dafür sorgen, dass das alte Erscheinungsbild (Version 5) bestehen bleibt
• mit &darkmode=auto aktiviert man die erwähnte dynamische Umschaltung
• es ist jetzt möglich, eigene Themen zu definieren und an Flexcharts zu übergeben
• zusätzliche Funktionsdefinitionen können nun in unbegrenzter Anzahl übergeben werden

Gerne mal ausprobieren, vor allem auch die Abwärtskompatibilität. Es sollte alles funktionieren wie bisher. Evtl. sehen die Chart visuell anders aus, dann sollte &themev5 das alte Erscheinungsbild zurück bringen. Die Version ist im Beta-Repo verfügbar.

Im Readme sind die neuen Möglichkeiten beschrieben. Auch ein einfaches Beispiel wie man die Themen nutzen kann, ist enthalten.

Freue mich auf euer Feedback.

=====================================================================================

Motivation für Flexcharts

Habt ihr auch schon mal die Möglichkeit vermisst, "richtige" Stapeldiagramme zu erzeugen? Oder andere spezielle Diagramme, die momentan mit ioBroker nicht möglich sind? Mit dem Adapter flexcharts ist das möglich. Ein Stapeldiagramm sieht dann z.B. so aus:

Der ECharts-Adapter ist klasse, hat aber durch das UI-Konzept Einschränkungen bzgl. der möglichen Diagramm-Typen.

Konzept

Mit dem flexcharts-Adapter ist es möglich, alle Diagrammtypen zu erzeugen, die Apache eCharts anbietet. Dazu übergibt man dem Adapter die komplette Definition des Charts (den Inhalt von options in den Beispielen als JSON-Objekt). Man kann das Chart also nicht per UI zusammen klicken (es gibt keine UI), sondern muss es per Javascript oder Blockly erstellen.

Der Adapter arbeitet als Web-Extension, benötigt also den Web-Adapter und ist per Default auf Port 8082 erreichbar. Das Verhalten steuert man über Parameter im http-Aufruf. Beispiel:

• Definition und Daten des Charts hat man im State 0_userdata.0.echarts.chart1 gespeichert
• Dann erzeugt der Aufruf http://localhost:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.echarts.chart1 das entsprechende eChart. Diese Adresse kann man als iFrame z.B. in der vis oder in jarvis eintragen. Oder direkt in einem Browser-Tab. Statt localhost ggf. die Adresse der ioBroker-Rechners verwenden.
• Statt die Chart-Daten in einem State zu speichern, kann man sie direkt per Skript erzeugen und mit callback() an den Adapter übergeben.
• Ein Demo-Chart ist im Adapter hinterlegt, das ruft man auf mit http://localhost:8082/flexcharts/echarts.html?source=state&id=flexcharts.0.info.chart1

Details zu Installation und Verwendung sind im README beschrieben:
https://github.com/MyHomeMyData/ioBroker.flexcharts

Bitte ausprobieren

Adapter ist im Beta-Repo verfügbar. Link zum npm-Paket.
Ich freue mich auf eure Rückmeldungen!

Hinweis zu Versionen kleiner als 0.1.4

Falls jemand eine Version vor 0.1.4 installiert hat: Bitte einmal den Adapter (nicht nur die Instanz) komplett deinstallieren und neu installieren. Dadurch wird das Zusammenspiel mit dem Admin-Adapter aufgeräumt. Da der Adapter keine eigene Konfigurationsparameter hat, kann dabei nichts verloren gehen.

Apache hat die Version 6.0.0 von ECharts veröffentlicht, hier sind die Neuerungen im Detail beschrieben. Das Standard-Thema, also das visuelle Erscheinungsbild, wurde deutlich verändert, es gibt einige neue Funktionen und Diagrammtypen und man kann nun dynamisch zwischen hellem und dunklem Design umschalten, getriggert durch die Systemeinstellung.

Ich habe Flexcharts entsprechend erweitert:

• mit &themev5 kann man dafür sorgen, dass das alte Erscheinungsbild (Version 5) bestehen bleibt
• mit &darkmode=auto aktiviert man die erwähnte dynamische Umschaltung
• es ist jetzt möglich, eigene Themen zu definieren und an Flexcharts zu übergeben
• zusätzliche Funktionsdefinitionen können nun in unbegrenzter Anzahl übergeben werden

Gerne mal ausprobieren, vor allem auch die Abwärtskompatibilität. Es sollte alles funktionieren wie bisher. Evtl. sehen die Chart visuell anders aus, dann sollte &themev5 das alte Erscheinungsbild zurück bringen. Die Version ist im Beta-Repo verfügbar.

Im Readme sind die neuen Möglichkeiten beschrieben. Auch ein einfaches Beispiel wie man die Themen nutzen kann, ist enthalten.

Freue mich auf euer Feedback.

Viele Grüße
Jürgen

Viessmann E3 Serie einbinden

Der Adapter bindet die aktuellen Geräte der Viessmann E3 Serie (One Base), z.B. die Wärmepumpe Vitocal 250, PV-Anlage Vitocharge VX3 oder Gas-Therme Vitodens in ioBroker ein. Die Verbindung wird über den CAN-Bus hergestellt, ist also lokal ohne Internetanbindung verfügbar.

Als Basis habe ich das Projekt open3e verwendet, das eine ähnliche Funktionalität per Kommandozeile oder MQTT bereitstellt und in Python realisiert ist. An open3e habe ich von Anfang an mitgearbeitet. Weiterführende Infos gibt es im Wiki.

Der Adapter beherrscht sowohl einen "Lausch-Modus" ("Collect"), bei dem auf dem CAN-Bus zugehört wird, als auch einen aktiven Modus, bei dem über das Protokoll UDSonCAN aktiv Daten abgefragt oder geschrieben werden.
Der "Lausch-Modus" funktioniert bei vernetzten Viessmann-Geräten. Diese tauschen sehr viele Informationen über den CAN-Bus aus. Der Adapter dekodiert diese Daten und speichert sie in den Objektbaum.
Beide Modi können parallel genutzt werden.

Features

• Lauschen auf dem internen und externen Bus (incl. Energy Meter E380).
• Lesen und Dekodieren aller Datenpunkte der gemeinsamen Datenpunkliste. Device spezifische Datenpunkte werden per RawCodec verarbeitet.
• Schreiben aller für Datenpunkte, die auf einer editierbaren White-List stehen. Auch komplexe Datenpunkte können geschrieben werden, z.B. kann nur die Anfangszeit für die Zirkulationspumpe eines bestimmten Zeitraumes geändert werden.
• Scan der Devices bei der ersten Einrichtung des Adapters.
• Optional Festlegen des Gerätenamens für den Objektbaum.
• Datenpunkt-Scan aller erkannten Devices (entspricht Depict-Funktion von open3E).
• Auflisten und filtern der gerätespezifischen Datenpunkte.
• Die Daten aus beiden Quellen (collect und UDS) werden pro Device in einem Objektbaum gesammelt.
• Für jeden Datenpunkt stehen die Formate json, raw und tree parallel zur Verfügung.
• Individuelle Definition und Konfiguration zur einmaligen oder regelmäßigen Abfrage von Datenpunktlisten.

Reale oder virtuelle Geräte zum Testen

Um den Adapter testen zu können, benötigt man passenden Geräte, mit denen per CAN-Bus kommuniziert wird. Das können reale Viessmann-Geräte sein oder eine Simulation. Im Rahmen von open3e ist auch eine Virtualisierung der Viessmann CAN-Kommunikation entstanden. Ich habe einen Fork erzeugt, der auf den Test des Adapters abgestimmt ist, siehe hier. Dort ist auch beschrieben, wie man das installiert und einrichtet.
Die Simulation unterstützt keine Collect-Daten. Der "Lausch-Modus" kann damit also nicht getestet werden.

Installation

Installation ist über Github oder das ioBroker Beta-Repo möglich. Nach "e3oncan" oder "Viessmann" suchen.

Feedback

Ich freue ich mich auf euer Feedback! Natürlich beantworte ich auch gerne eure Fragen.

Ein paar Screenshots

• Die Positionierung center des Diagrammtitels überschreibt mir Elemente des Diagramms.

Man kann die Position der Legende verschieben mit legend: { top: '10%' }

Dann funktioniert 'center' für den Titel ohne Überschneidung.

Gruß, Jürgen

@delphinis Der adapter ist jetzt im Beta-Repo verfügbar. Funktioniert jetzt als Web-Extension, d.h. der Web-Adapter (web.0) muss installiert sein und flexcharts ist dann unter Port 8082 erreichbar. Außerdem muss ein flexcharts in der Adresse vorangestellt werden, also z.B.

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

Das Readme ist entsprechend angepasst.

Freue mich auf Deine Rückmeldung.

@merlin123 Ja, genau so. Ist in der Doku nur für komplexere Anwendungsfälle beschrieben.

@merlin123 Klasse! Danke fürs Blockly.

@ullij Ich habe eine Version im Branch develop erstellt, kann im Moment aber nur eingeschränkt testen. Bei mir sieht's gut aus. Falls Du es ausprobieren möchtest:

Im Expertenmodus im Adapter-Installationsdialog unter "Custom" folgende Adresse verwenden:
https://github.com/MyHomeMyData/ioBroker.flexcharts/tree/develop

@merlin123 sagte in Test Adapter flexcharts - Stapeldiagramme und mehr:

Farben für die einzelnen Sachen als Variable am Anfang deklarieren...

Ja, auch eine gute Idee. Man könnte auch in der Konstante IDS für jeden Chart-Typ eigene Farben vorsehen und im Skript passend zuweisen.

Es soll ja aber eigentlich eine Vorlage sein und auch zu eigenen Experimenten anregen. Deshalb werde ich es jetzt erstmal so lassen. Du kannst natürlich gerne Weiterentwicklungen in der Diskussion posten.

@maddm Es gibt beide Möglichkeiten. Einfacher ist vermutlich, 2 Skripte zu verwenden. Der Adapter ruft ein Skript mit einer bestimmten "Message" auf, die lautet per Default "flexcharts". Über die URL kann man aber eine eigene "Message" verwenden. Meine Empfehlung ist deshalb, zwei Skripte zu erstellen:

• im ersten Skript steht onMessage('my_script_1', ...) { ... }, im zweiten Skript steht onMessage('my_script_2', ...) { ... }
• Die beiden URLs lauten dann http://localhost:8082/flexcharts/echarts.html?source=script&message=my_script_1 und http://localhost:8082/flexcharts/echarts.html?source=script&message=my_script_2

Alternativ kannst Du ein einziges Skript verwenden, beide Charts implementierten und das gewünschte Chart über die Parameter in der URL auswählen:

• Für "chart1": http://localhost:8082/flexcharts/echarts.html?source=script&httpparams={"chart":"chart1"} bzw. für "chart2": http://localhost:8082/flexcharts/echarts.html?source=script&httpparams={"chart":"chart2"}
• Im Skript wertest Du die httpparams aus und generierst das gewünschte Chart. Ist aber vielleicht schwierigen nachzuvollziehen.

@icebear Ok, mit dem Skript erzeugst Du alle 5 Minuten die Diagrammdaten in den States neu. Aber wie wird bewerkstelligt, dass dann auch das Chart aktualisiert wird? Das hab ich noch nicht kapiert.

@legro Ein Button in der View führt zu einem erneuten Aufruf der HTML-Seite. Kann man das Aktualisieren der View durch eine Änderung der Quelldaten triggern, so dass die HMTL-Seite neu geladen wird?

@UlliJ In welchem Kontext soll das Chart dargestellt werden? vis, jarvis, ...?

@ullij Ich kann Deinen Wunsch gut verstehen und der Ansatz über sendTo() ist im Prinzip genau richtig, aber leider mit dem aktuellen Konzept nicht umsetzbar.

Flexcharts arbeitet als Web-Extension des Web-Adapters und hat gar keine eigene permanente Laufzeit-Routine. Der Flexcharts-Code wird vom Web-Adapter aufgerufen, liefert eine HTML-Seite zurück und beendet sich wieder. Der einzige Entry-Point ist also der HTML-Aufruf im Browser. Der Parameter refresh bewirkt, dass der Browser die Abfrage regelmäßig wiederholt.

Ich sehe im Moment keine Möglichkeit, im Rahmen dieses Konzepts einen externen Trigger zu realisieren.

Vielleicht hat jemand im Forum ein Idee?

@merlin123 @legro Danke für eure Rückmeldungen. Bei Apache ECharts gibt es knapp 1.800 offene Issues - das kann also ein wenig dauern, bis ein v5 Dark-Thema bereitgestellt wird. Ich habe deshalb selbst eins gebastelt, basierend auf dem Dark-Thema von ECharts V5.6.0. Mit dem Parameter &themev5 werden also Light- und Dark-Thema umgeschaltet.

Würdet ihr das bitte ausprobieren und eure Eindrücke und ggf. festgestellte Abweichungen hier zurück melden? Die Version liegt wieder im Branch develop: https://github.com/MyHomeMyData/ioBroker.flexcharts/tree/develop

Zurück zu Flexcharts 0.5.0 geht es bei Bedarf am besten durch komplette Deinstallation des Adapters und Neuinstallation aus dem Stable-Repository.

STOPP: Irgendwas ist beim letzten Push nach Github schief gegangen. Bitte noch warten, muss das zuerst klären!

OK: Branch develop auf Github ist bereinigt und kann genutzt werden.

@legro Stimmt.

Das liegt daran, dass Apache ECharts für den light Mode das Thema "default" und für den den dark Mode das Thema "dark" verwendet. Für das "default" Thema stellt Apache ein Thema "v5" bereit, das mit dem Flexchart-Parameter "themev5" aktiviert wird, aber nur das Thema "default" ersetzt. Schaltet man auf den dark Mode um, ist der Parameter wirkungslos.

Ich habe ein Issue bei ECharts erstellt, mit der Bitte, ein entsprechendes Thema "v5dark" bereitzustellen.

Workaround:
Neben der Farbgestaltung ist vor allem die Legende betroffen, die unten statt oben dargestellt wird. Wenn man das ändern möchte, kann man entsprechende Definitionen in die Chart-Definition aufnehmen oder das Thema "dark" modifizieren. Wie Definition und Übergabe eigener Themen funktioniert, ist in der Readme beschrieben.

Apache hat die Version 6.0.0 von ECharts veröffentlicht, hier sind die Neuerungen im Detail beschrieben. Das Standard-Thema, also das visuelle Erscheinungsbild, wurde deutlich verändert, es gibt einige neue Funktionen und Diagrammtypen und man kann nun dynamisch zwischen hellem und dunklem Design umschalten, getriggert durch die Systemeinstellung.

Ich habe Flexcharts entsprechend erweitert:

• mit &themev5 kann man dafür sorgen, dass das alte Erscheinungsbild (Version 5) bestehen bleibt
• mit &darkmode=auto aktiviert man die erwähnte dynamische Umschaltung
• es ist jetzt möglich, eigene Themen zu definieren und an Flexcharts zu übergeben
• zusätzliche Funktionsdefinitionen können nun in unbegrenzter Anzahl übergeben werden

Gerne mal ausprobieren, vor allem auch die Abwärtskompatibilität. Es sollte alles funktionieren wie bisher. Evtl. sehen die Chart visuell anders aus, dann sollte &themev5 das alte Erscheinungsbild zurück bringen. Die Version ist im Beta-Repo verfügbar.

Im Readme sind die neuen Möglichkeiten beschrieben. Auch ein einfaches Beispiel wie man die Themen nutzen kann, ist enthalten.

Freue mich auf euer Feedback.

Viele Grüße
Jürgen

@bertderkleine Freut mich, dass es wieder funktioniert. Die Meldungen von npm wundern mich aber auch. Muss mir das auf einem Test-System anschauen. Danke für die schnelle Rückmeldung.

Update:
Ich habe noch ein wenig nachgeforscht. Das Problem entsteht dadurch, dass sog. "native modules" (diese verwenden C-Code) für eine bestimmte Version von node.js compiliert werden. ioBroker.e3oncan verwendet das native module "socketcan". Deshalb muss nach einem Upgrade der Version von node.js ein Rebuild angestoßen werden. das geht am einfachsten mit dem Befehl (vorher Adapter stoppen)

iob rebuild

Wenn das Erfolg meldet, sollte der Adapter wieder ohne Fehler zu starten sein.

Einen entsprechenden Hinweis habe ich nun auch im Readme ergänzt.

@bertderkleine Das könnte an nicht korrekt aufgelösten Modul-Abhängigkeiten liegen. Bitte versuche mal folgendes:

• Adapter stoppen
• in einem Terminalfenster folgende Befehle ausführen:

cd /opt/iobroker/node_modules/iobroker.e3oncan/
npm rb
npm i

• Adapter starten

@iob69

Weisst du wie ich funktionen einbauen kann?

Schau mal ins Readme, da ist das beschrieben.

@iob69 Das scheint nicht so einfach zu sein. Auf die Schnelle fällt mir nur eine Quick-and-dirty-Lösung ein:
X-Achse als Kategorienachse, für jeden Tag so viele X-Werte wie es Daten gibt. Die sind alle leer, außer einem Wert in der Mitte, der das Datum enthält. Also im Prinzip so:

option = {
  legend: {},
  tooltip: {},
xAxis: {
    data: ['', '', '08.07.', '', '',
           '', '', '09.07.', '', ''
          ],
    type: 'category',
},
yAxis: {
  type: 'value'
},
series: [{
  type: 'line',
    data: [23,  24,  25,  26, 27,   // 08.07.
           29,  24,  23,  22, 24    // 09.07.
    ]
  }]
};

Problem dürften die x-Achsen-Ticks und die Grid-Lines sein.

Als Vorlage könnte auch dieses Beispiel dienen. Da muss man sich aber etwas ausführlicher mit beschäftigen. Spontan habe ich die Datenstruktur nicht kapiert.
Wenn ich Zeit habe, denke ich nochmal drüber nach.