Skip to content
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. Test Adapter flexcharts - Stapeldiagramme und mehr

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.9k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.1k

Test Adapter flexcharts - Stapeldiagramme und mehr

Geplant Angeheftet Gesperrt Verschoben Tester
chartchartsdiagrammeechartsvisualisierungvisualization
266 Beiträge 19 Kommentatoren 48.3k Aufrufe 22 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • D darkiop

    @jrbwh

    Ich hab jetzt endlich mal die Zeit gefunden deinen Adapter kurz anzuschauen (ein 12 Wochen altes Baby verschiebt dann halt berechtigterweise doch die Prioritäten 🙂 )

    Daumen Hoch - das ist mal ne sehr mächtige und flexible Implementiering von Charts. Jetzt muss ich nur noch die Zeit finden aus meinen teils einmal am Tag ebenfalls via Skript befüllten DPs das passende JSON via Skript für das Chart zu erstellen.

    In der Readme schreibst du, "I'm working on a more elaborated javascript template to simplify usage of the adapter. Stay tuned.", d.h. du arbeitest an einer generischen Lösung?

    jrbwhJ Offline
    jrbwhJ Offline
    jrbwh
    schrieb am zuletzt editiert von
    #3

    @darkiop Danke für das positive Feedback. Für eine recht spezifische Anwendung für Nutzer der Viessmann Wärmepumpe Vitocal habe ich eine konkrete Umsetzung geschrieben - das nutze ich auch selbst. Die Anleitung findest Du hier.
    Das funktioniert natürlich nur mit dem spezifischen Datenformat, das die Wärmepumpe liefert. Das sieht für die monatlichen Werte so aus:
    {"CurrentMonth":{"10":9,"11":4.6,"12":10.1,"13":4.5,"14":5.5,"15":5.3,"16":5.6,"17":10,"18":4.2,"19":10.4,"20":9.2,"21":4.9,"22":10.2,"23":9.2,"24":8.4,"25":4.6,"26":10.5,"27":4.6,"28":9.9,"29":4.7,"30":6.4,"31":0,"01":4.5,"02":5.9,"03":6,"04":9.9,"05":4.7,"06":10.7,"07":4.9,"08":5.6,"09":10.3},"LastMonth":{"10":9.4,"11":5.3,"12":9.6,"13":8.9,"14":9.7,"15":9.2,"16":9.4,"17":9.6,"18":9.4,"19":4.6,"20":9.4,"21":5.2,"22":9.5,"23":4.4,"24":10,"25":4.5,"26":9.8,"27":4.6,"28":10.3,"29":4.8,"30":5.6,"31":10,"01":0,"02":0,"03":0,"04":9.8,"05":11.4,"06":9,"07":10.1,"08":9.6,"09":9.2}}

    An einem Skript für z.B. täglich gespeicherte Daten bin ich dran. Wie sieht denn Dein Datenformat konkret aus?

    Gruß, Jürgen

    P.S.: Glückwunsch zum Baby. Die Zeiten liegen bei mir schon lange zurück, ich kann mich aber noch lebhaft daran erinnern 😊 Wir durften uns vor 2 Wochen über die Geburt unseres ersten Enkelkindes freuen 😀

    1 Antwort Letzte Antwort
    0
    • D darkiop

      @jrbwh

      Ich hab jetzt endlich mal die Zeit gefunden deinen Adapter kurz anzuschauen (ein 12 Wochen altes Baby verschiebt dann halt berechtigterweise doch die Prioritäten 🙂 )

      Daumen Hoch - das ist mal ne sehr mächtige und flexible Implementiering von Charts. Jetzt muss ich nur noch die Zeit finden aus meinen teils einmal am Tag ebenfalls via Skript befüllten DPs das passende JSON via Skript für das Chart zu erstellen.

      In der Readme schreibst du, "I'm working on a more elaborated javascript template to simplify usage of the adapter. Stay tuned.", d.h. du arbeitest an einer generischen Lösung?

      jrbwhJ Offline
      jrbwhJ Offline
      jrbwh
      schrieb am zuletzt editiert von
      #4

      @darkiop Habe jetzt ein erstes Javascript-Template erstellt. Damit können kombinierte Stapel-/Linien-Diagramme erstellt werden, wenn die Daten als Tages-, Monats- oder Jahres-Werte im History-Adapter vorliegen. Das Template liegt hier.

      Wichtig: Die History-Daten müssen "sauber" sein, d.h. in jeder Datenreihe muss zu jedem Tag/Monat/Jahr genau ein Wert vorhanden sein. Sowohl mehrfach vorhandene, als auch fehlende Werte führen meist zu seltsamen Effekten in den Charts.

      Um das Template zu benutzen, müssen einige Werte im Skript angepasst werden. das ist alles in den Kommentaren im Skript beschrieben. Wenn alles klappt, sieht ein typisches Ergebnis dann so aus:

      dacd2909-1e8b-4dc3-8ea0-7a76823944a6-image.png

      D 2 Antworten Letzte Antwort
      -1
      • jrbwhJ jrbwh

        @darkiop Habe jetzt ein erstes Javascript-Template erstellt. Damit können kombinierte Stapel-/Linien-Diagramme erstellt werden, wenn die Daten als Tages-, Monats- oder Jahres-Werte im History-Adapter vorliegen. Das Template liegt hier.

        Wichtig: Die History-Daten müssen "sauber" sein, d.h. in jeder Datenreihe muss zu jedem Tag/Monat/Jahr genau ein Wert vorhanden sein. Sowohl mehrfach vorhandene, als auch fehlende Werte führen meist zu seltsamen Effekten in den Charts.

        Um das Template zu benutzen, müssen einige Werte im Skript angepasst werden. das ist alles in den Kommentaren im Skript beschrieben. Wenn alles klappt, sieht ein typisches Ergebnis dann so aus:

        dacd2909-1e8b-4dc3-8ea0-7a76823944a6-image.png

        D Offline
        D Offline
        darkiop
        Most Active
        schrieb am zuletzt editiert von
        #5

        @jrbwh Super. Vorab schonmal danke dafür. Ich werde morgen mal versuchen es mir anzuschauen und dir dann auch mal ein Beispiel für meinen ersten usecase geben.

        Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

        1 Antwort Letzte Antwort
        0
        • jrbwhJ jrbwh

          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:
          flexcharts_stacked1.png

          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.

          260cac24-4665-4b00-b98d-dda131fa3fe9-image.png

          da_WoodyD Offline
          da_WoodyD Offline
          da_Woody
          schrieb am zuletzt editiert von
          #6

          @jrbwh "sondern muss es per Javascript oder Blockly erstellen."
          sorry, das ist für mich kein adapter.

          gruß vom Woody
          HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

          jrbwhJ sigi234S 2 Antworten Letzte Antwort
          0
          • da_WoodyD da_Woody

            @jrbwh "sondern muss es per Javascript oder Blockly erstellen."
            sorry, das ist für mich kein adapter.

            jrbwhJ Offline
            jrbwhJ Offline
            jrbwh
            schrieb am zuletzt editiert von
            #7

            @da_woody Danke für Deine Rückmeldung. Aus meiner Sicht stellt dieser Ansatz Funktionalität für ioBroker bereit, die bisher nicht verfügbar ist. Es wird das volle Potenzial von Apache ECharts erschlossen.

            Z.B. ist es mir bisher nicht gelungen, Stapeldiagramme in ioBroker zu erzeugen. Auch im Forum konnte mir niemand eine Lösung zeigen. Mit Grafana mag das gehen, aber das funktioniert weitgehend außerhalb ioBroker und ich wollte bei ECharts bleiben.

            Mit flexcharts ist das nun innerhalb von ioBroker möglich. Und sehr viele weitere Arten von Darstellungen sind ebenfalls nutzbar, ECharts hat da ja eine große Bandbreite.

            Die Schnittstelle von flexcharts ist zwar etwas ungewöhnlich, eröffnet aber auch sehr viele Möglichkeiten. Deshalb sehe ich das schon als Adapter.

            Wenn Du eine einfachere Möglichkeit siehst, das volle Potenzial von Apache ECharts für ioBroker verfügbar zur machen, bin ich daran sehr interessiert.

            1 Antwort Letzte Antwort
            0
            • da_WoodyD da_Woody

              @jrbwh "sondern muss es per Javascript oder Blockly erstellen."
              sorry, das ist für mich kein adapter.

              sigi234S Online
              sigi234S Online
              sigi234
              Forum Testing Most Active
              schrieb am zuletzt editiert von
              #8

              @da_woody sagte in Test Adapter flexcharts 0.0.1 - Stapeldiagramme und mehr:

              @jrbwh "sondern muss es per Javascript oder Blockly erstellen."
              sorry, das ist für mich kein adapter.

              Sehe ich auch so. Blicke da nicht durch.
              Gibt es ein Blockly Beispiel? Wie bekomme ich die History Daten da rein?

              Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
              Immer Daten sichern!

              jrbwhJ 1 Antwort Letzte Antwort
              0
              • sigi234S sigi234

                @da_woody sagte in Test Adapter flexcharts 0.0.1 - Stapeldiagramme und mehr:

                @jrbwh "sondern muss es per Javascript oder Blockly erstellen."
                sorry, das ist für mich kein adapter.

                Sehe ich auch so. Blicke da nicht durch.
                Gibt es ein Blockly Beispiel? Wie bekomme ich die History Daten da rein?

                jrbwhJ Offline
                jrbwhJ Offline
                jrbwh
                schrieb am zuletzt editiert von
                #9

                @sigi234 Danke für Deine Rückmeldung.
                Leider arbeite ich selbst nicht mit Blockly, deshalb gibt es da noch kein Beispiel.

                Grundsätzlich geht es so:

                • Darzustellende Daten beschaffen, z.B. aus der History lesen
                • Ein Objekt erstellen, das eine für ECharts passende Struktur hat. Beispiel für ein einfaches Balkendiagramm s.u. Deine einzelnen Datenreihen musst Du jeweils im Key "data" speichern.
                • Das Objekt im JSON-Format in einem State speichern, z.B. unter der ID 0_userdata.0.flexcharts.chart1
                • In einem Browser-Tab oder in einem iFrame die ID des States an flexcharts übergeben. Also mit http://localhost:8200/echarts.html?source=state&id=0_userdata.0.flexcharts.chart1

                Mir ist schon klar, dass das ein bisschen kompliziert ist und sich nicht direkt erschließt. Das ist für Fälle gedacht, wenn man mit den GUI-basierten Ansätzen nicht weiter kommt und man bereit ist, mehr Zeit in das Thema zu investieren.

                Template für ein einfaches Balkendiagramm mit einer Datenreihe:

                {"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":"Meine Datenreihe 1","type":"bar","color":"#a30000","data":[8,19,21,50,26,1,36]}
                ]}
                
                M 1 Antwort Letzte Antwort
                0
                • jrbwhJ jrbwh

                  @sigi234 Danke für Deine Rückmeldung.
                  Leider arbeite ich selbst nicht mit Blockly, deshalb gibt es da noch kein Beispiel.

                  Grundsätzlich geht es so:

                  • Darzustellende Daten beschaffen, z.B. aus der History lesen
                  • Ein Objekt erstellen, das eine für ECharts passende Struktur hat. Beispiel für ein einfaches Balkendiagramm s.u. Deine einzelnen Datenreihen musst Du jeweils im Key "data" speichern.
                  • Das Objekt im JSON-Format in einem State speichern, z.B. unter der ID 0_userdata.0.flexcharts.chart1
                  • In einem Browser-Tab oder in einem iFrame die ID des States an flexcharts übergeben. Also mit http://localhost:8200/echarts.html?source=state&id=0_userdata.0.flexcharts.chart1

                  Mir ist schon klar, dass das ein bisschen kompliziert ist und sich nicht direkt erschließt. Das ist für Fälle gedacht, wenn man mit den GUI-basierten Ansätzen nicht weiter kommt und man bereit ist, mehr Zeit in das Thema zu investieren.

                  Template für ein einfaches Balkendiagramm mit einer Datenreihe:

                  {"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":"Meine Datenreihe 1","type":"bar","color":"#a30000","data":[8,19,21,50,26,1,36]}
                  ]}
                  
                  M Online
                  M Online
                  MCU
                  schrieb am zuletzt editiert von
                  #10

                  @jrbwh
                  Kannst du einen Fehler bzgl. Port abfangen? In meinem Fall ist es der cameras-Adapter, der nutzt auch 8200.
                  Oder evtl. direkt einen anderen Port verwenden?
                  7aa0dde0-d6f4-4d8f-99e9-82949d774327-image.png

                  error: flexcharts.0 (458177) Exception-Code: EADDRINUSE: listen EADDRINUSE: address already in use :::8200
                  

                  NUC i7 64GB mit Proxmox ---- https://mcuiobroker.gitbook.io/jarvis-infos/ Aktualisierungen der Doku auf Instagram verfolgen -> https://www.instagram.com/mcuiobroker
                  Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                  jrbwhJ 1 Antwort Letzte Antwort
                  0
                  • M MCU

                    @jrbwh
                    Kannst du einen Fehler bzgl. Port abfangen? In meinem Fall ist es der cameras-Adapter, der nutzt auch 8200.
                    Oder evtl. direkt einen anderen Port verwenden?
                    7aa0dde0-d6f4-4d8f-99e9-82949d774327-image.png

                    error: flexcharts.0 (458177) Exception-Code: EADDRINUSE: listen EADDRINUSE: address already in use :::8200
                    
                    jrbwhJ Offline
                    jrbwhJ Offline
                    jrbwh
                    schrieb am zuletzt editiert von
                    #11

                    @mcu Danke für den Hinweis. Nein, habe ich nicht abgefangen. Werde ich einbauen.

                    Den Default ändere ich dann auch gleich. Gibt es eine Liste der bereits verwendeten Ports?

                    M 1 Antwort Letzte Antwort
                    0
                    • jrbwhJ jrbwh

                      @mcu Danke für den Hinweis. Nein, habe ich nicht abgefangen. Werde ich einbauen.

                      Den Default ändere ich dann auch gleich. Gibt es eine Liste der bereits verwendeten Ports?

                      M Online
                      M Online
                      MCU
                      schrieb am zuletzt editiert von
                      #12

                      @jrbwh
                      https://mcuiobroker.gitbook.io/iobroker-tipps/tipps/allgemein/iobroker/ubersicht-ports

                      NUC i7 64GB mit Proxmox ---- https://mcuiobroker.gitbook.io/jarvis-infos/ Aktualisierungen der Doku auf Instagram verfolgen -> https://www.instagram.com/mcuiobroker
                      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                      jrbwhJ 2 Antworten Letzte Antwort
                      0
                      • M MCU

                        @jrbwh
                        https://mcuiobroker.gitbook.io/iobroker-tipps/tipps/allgemein/iobroker/ubersicht-ports

                        jrbwhJ Offline
                        jrbwhJ Offline
                        jrbwh
                        schrieb am zuletzt editiert von
                        #13

                        @mcu Super. Danke!

                        1 Antwort Letzte Antwort
                        0
                        • M MCU

                          @jrbwh
                          https://mcuiobroker.gitbook.io/iobroker-tipps/tipps/allgemein/iobroker/ubersicht-ports

                          jrbwhJ Offline
                          jrbwhJ Offline
                          jrbwh
                          schrieb am zuletzt editiert von
                          #14

                          @mcu Habe den Default-Port jetzt auf 3100 geändert. Da grafana auf 3000 liegt, scheint mir das passend.
                          Mein Versuch, einen Port-Konflikt abzufangen, funktioniert aber bisher nicht. Ich habe den Start des http-Servers in ein try-catch gepackt, trotzdem stürzt der Adapter im Konfliktfall ab und meldet für die Zeile von this.webServer.listen diesen Fehler: uncaught exception: listen EADDRINUSE: address already in use. Der Code sieht so aus:

                          		try {
                          			this.webServer.listen({port: this.config.port}, () => {
                          				this.log.info(`Server started on localhost:${this.config.port}`);
                          				this.setState('info.connection', true, true);
                          			});
                          		} catch (e) {
                          			this.log.error(`Start of http server failed on localhost:${this.config.port} - err=${e.message}`);
                          			this.setState('info.connection', false, true);
                          		}
                          

                          Verstehe ich nicht. Wie hast Du das gelöst?

                          L 1 Antwort Letzte Antwort
                          0
                          • jrbwhJ jrbwh

                            @mcu Habe den Default-Port jetzt auf 3100 geändert. Da grafana auf 3000 liegt, scheint mir das passend.
                            Mein Versuch, einen Port-Konflikt abzufangen, funktioniert aber bisher nicht. Ich habe den Start des http-Servers in ein try-catch gepackt, trotzdem stürzt der Adapter im Konfliktfall ab und meldet für die Zeile von this.webServer.listen diesen Fehler: uncaught exception: listen EADDRINUSE: address already in use. Der Code sieht so aus:

                            		try {
                            			this.webServer.listen({port: this.config.port}, () => {
                            				this.log.info(`Server started on localhost:${this.config.port}`);
                            				this.setState('info.connection', true, true);
                            			});
                            		} catch (e) {
                            			this.log.error(`Start of http server failed on localhost:${this.config.port} - err=${e.message}`);
                            			this.setState('info.connection', false, true);
                            		}
                            

                            Verstehe ich nicht. Wie hast Du das gelöst?

                            L Online
                            L Online
                            Lucky_ESA
                            Developer Most Active
                            schrieb am zuletzt editiert von
                            #15

                            @jrbwh Nimm die Funktion.

                            const check_port = await this.getPortAsync(this.config.port);
                            

                            Ist der Prot belegt gibt check_port den nächsten freien wieder.

                            Gruß//Lucky

                            jrbwhJ 1 Antwort Letzte Antwort
                            0
                            • L Lucky_ESA

                              @jrbwh Nimm die Funktion.

                              const check_port = await this.getPortAsync(this.config.port);
                              

                              Ist der Prot belegt gibt check_port den nächsten freien wieder.

                              Gruß//Lucky

                              jrbwhJ Offline
                              jrbwhJ Offline
                              jrbwh
                              schrieb am zuletzt editiert von
                              #16

                              @lucky_esa Wow, kaum macht man es richtig, funktioniert's.

                              Vielen Dank für die super schnelle Hilfe!

                              1 Antwort Letzte Antwort
                              0
                              • jrbwhJ jrbwh

                                @darkiop Habe jetzt ein erstes Javascript-Template erstellt. Damit können kombinierte Stapel-/Linien-Diagramme erstellt werden, wenn die Daten als Tages-, Monats- oder Jahres-Werte im History-Adapter vorliegen. Das Template liegt hier.

                                Wichtig: Die History-Daten müssen "sauber" sein, d.h. in jeder Datenreihe muss zu jedem Tag/Monat/Jahr genau ein Wert vorhanden sein. Sowohl mehrfach vorhandene, als auch fehlende Werte führen meist zu seltsamen Effekten in den Charts.

                                Um das Template zu benutzen, müssen einige Werte im Skript angepasst werden. das ist alles in den Kommentaren im Skript beschrieben. Wenn alles klappt, sieht ein typisches Ergebnis dann so aus:

                                dacd2909-1e8b-4dc3-8ea0-7a76823944a6-image.png

                                D Offline
                                D Offline
                                darkiop
                                Most Active
                                schrieb am zuletzt editiert von
                                #17

                                @jrbwh sagte in Test Adapter flexcharts 0.0.1 - Stapeldiagramme und mehr:

                                An einem Skript für z.B. täglich gespeicherte Daten bin ich dran. Wie sieht denn Dein Datenformat konkret aus?

                                Ich bin leider immer noch nicht dazugekommen mich damit zu beschäftigen ... 😉 Aber der Winter ist ja lange 😄

                                Hier mal ein einfaches Beispiel wofür ich deine Charts verwenden würde:

                                160df428-d88c-4023-845d-08a329ef21cc-image.png

                                Die 3 Werte werden täglich um 23:59 ermittelt und in eine MariaDB mit dem SQL-Adapter geschrieben. Für das Chart stelle ich mir ein Balkendiagram mit den 3 Werten pro Tag und vielleicht 7 Tage zurück vor. In etwa so, nur eben xAxis.data ausgehende vom heutigen Tag -7d.

                                option = {
                                  xAxis: {
                                    type: 'category',
                                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                  },
                                  yAxis: {
                                    type: 'value'
                                  },
                                  series: [
                                    {
                                      data: [120, 200, 150, 80, 70, 110, 130],
                                      type: 'bar'
                                    },
                                    {
                                      data: [120, 200, 150, 80, 70, 110, 130],
                                      type: 'bar'
                                    },
                                    {
                                      data: [120, 200, 150, 80, 70, 110, 130],
                                      type: 'bar'
                                    }
                                  ]
                                };
                                

                                Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

                                jrbwhJ 1 Antwort Letzte Antwort
                                0
                                • D darkiop

                                  @jrbwh sagte in Test Adapter flexcharts 0.0.1 - Stapeldiagramme und mehr:

                                  An einem Skript für z.B. täglich gespeicherte Daten bin ich dran. Wie sieht denn Dein Datenformat konkret aus?

                                  Ich bin leider immer noch nicht dazugekommen mich damit zu beschäftigen ... 😉 Aber der Winter ist ja lange 😄

                                  Hier mal ein einfaches Beispiel wofür ich deine Charts verwenden würde:

                                  160df428-d88c-4023-845d-08a329ef21cc-image.png

                                  Die 3 Werte werden täglich um 23:59 ermittelt und in eine MariaDB mit dem SQL-Adapter geschrieben. Für das Chart stelle ich mir ein Balkendiagram mit den 3 Werten pro Tag und vielleicht 7 Tage zurück vor. In etwa so, nur eben xAxis.data ausgehende vom heutigen Tag -7d.

                                  option = {
                                    xAxis: {
                                      type: 'category',
                                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                                    },
                                    yAxis: {
                                      type: 'value'
                                    },
                                    series: [
                                      {
                                        data: [120, 200, 150, 80, 70, 110, 130],
                                        type: 'bar'
                                      },
                                      {
                                        data: [120, 200, 150, 80, 70, 110, 130],
                                        type: 'bar'
                                      },
                                      {
                                        data: [120, 200, 150, 80, 70, 110, 130],
                                        type: 'bar'
                                      }
                                    ]
                                  };
                                  
                                  jrbwhJ Offline
                                  jrbwhJ Offline
                                  jrbwh
                                  schrieb am zuletzt editiert von
                                  #18

                                  @darkiop Das sollte mit dem Skript-Template direkt möglich sein, wie in meinem Post vom 31. Aug. 2024, 11:54 beschrieben. Folgendes musst Du anpassen:
                                  "instanceHistory": Deine History-Instanz eintragen
                                  "yAxis": Die 2te y-Achse entfernen
                                  "mySeries.daily": Für die ersten 3 Zeilen Deine Datenpunkte eintragen, alles "stack_a" zuordnen (sofern es ein Stapeldiagramm mit einem Balken werden soll). Die restlichen Zeilen löschen.
                                  "mySeries.monthly" und "mySeries.yearly": Alle Zeilen löschen, also nur [] übrig lassen
                                  Aufrufen mit " ...params={"period":"daily", "start":7}

                                  D 1 Antwort Letzte Antwort
                                  0
                                  • jrbwhJ jrbwh

                                    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:
                                    flexcharts_stacked1.png

                                    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.

                                    260cac24-4665-4b00-b98d-dda131fa3fe9-image.png

                                    L Abwesend
                                    L Abwesend
                                    legro
                                    schrieb am zuletzt editiert von legro
                                    #19

                                    @jrbwh

                                    Mir fehlte der direkte Link zur Installation. Dieser ist hier zu finden.

                                    Nach über vier Jahren Leidenszeit unter Qivicon/MSH vor den Telekomikern zu ioBroker geflüchtet.
                                    Raspberry Pi 4 mit 8GB + ArgonOneM.2 + 120GB SSD + Coordinator CC26X2R1 + ioBroker + piVCCU3

                                    jrbwhJ 1 Antwort Letzte Antwort
                                    0
                                    • L legro

                                      @jrbwh

                                      Mir fehlte der direkte Link zur Installation. Dieser ist hier zu finden.

                                      jrbwhJ Offline
                                      jrbwhJ Offline
                                      jrbwh
                                      schrieb am zuletzt editiert von
                                      #20

                                      @legro Danke für den Hinweis. Habe den Link in der Beschreibung ergänzt.

                                      L 1 Antwort Letzte Antwort
                                      0
                                      • jrbwhJ jrbwh

                                        @darkiop Das sollte mit dem Skript-Template direkt möglich sein, wie in meinem Post vom 31. Aug. 2024, 11:54 beschrieben. Folgendes musst Du anpassen:
                                        "instanceHistory": Deine History-Instanz eintragen
                                        "yAxis": Die 2te y-Achse entfernen
                                        "mySeries.daily": Für die ersten 3 Zeilen Deine Datenpunkte eintragen, alles "stack_a" zuordnen (sofern es ein Stapeldiagramm mit einem Balken werden soll). Die restlichen Zeilen löschen.
                                        "mySeries.monthly" und "mySeries.yearly": Alle Zeilen löschen, also nur [] übrig lassen
                                        Aufrufen mit " ...params={"period":"daily", "start":7}

                                        D Offline
                                        D Offline
                                        darkiop
                                        Most Active
                                        schrieb am zuletzt editiert von
                                        #21

                                        @jrbwh Ja, kann ich bestätigen ... mit etwas selber code lesen hätt ich das auch hinbekommen ... aber wie gesagt, die Prios haben sich gerade verändert. Danke dir - ich werd mal schauen wie ich die Charts nutzen kann.

                                        Hast du auch vorgesehen den Dark-Mode der echarts zu implementieren?

                                        Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

                                        jrbwhJ 1 Antwort Letzte Antwort
                                        0
                                        • D darkiop

                                          @jrbwh Ja, kann ich bestätigen ... mit etwas selber code lesen hätt ich das auch hinbekommen ... aber wie gesagt, die Prios haben sich gerade verändert. Danke dir - ich werd mal schauen wie ich die Charts nutzen kann.

                                          Hast du auch vorgesehen den Dark-Mode der echarts zu implementieren?

                                          jrbwhJ Offline
                                          jrbwhJ Offline
                                          jrbwh
                                          schrieb am zuletzt editiert von
                                          #22

                                          @darkiop Dark Mode war noch nicht drin. Habe ich eben mit V0.0.4 ergänzt. Aktivieren mit &darkmode im HTML-Aufruf.

                                          1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          332

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe