Skip to content
  • Home
  • 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

Community Forum

  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.4k

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

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

Test Adapter flexcharts - Stapeldiagramme und mehr

Geplant Angeheftet Gesperrt Verschoben Tester
chartchartsdiagrammeechartsvisualisierungvisualization
271 Beiträge 20 Kommentatoren 48.8k 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.
  • jrbwhJ jrbwh

    @sigi234 Danke fürs Ausprobieren! Mit V0.1.x habe ich den Adapter auf WebExtension umgestellt, deshalb läuft das nun alles über web.0

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

    @jrbwh Problem nach Update.

    
    web.1
    2024-10-15 23:16:24.879	warn	setTimeout called, but adapter is shutting down
    
    web.0
    2024-10-15 23:16:24.878	warn	setTimeout called, but adapter is shutting down
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	info	Rebuild for adapter system.adapter.flexcharts.0 not successful in 3 tries. Adapter will not be restarted again. Please execute "npm install --production" in adapter directory manually.
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	instance system.adapter.flexcharts.0 terminated with code 1 (JS_CONTROLLER_STOPPED)
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: Node.js v20.17.0
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: }
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: requireStack: []
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: code: 'MODULE_NOT_FOUND',
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: at node:internal/main/run_main_module:28:49 {
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: at Module._load (node:internal/modules/cjs/loader:1051:27)
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: Error: Cannot find module '/opt/iobroker/node_modules/iobroker.flexcharts'
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: ^
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: throw err;
    
    host.iobrokerProd
    2024-10-15 23:16:24.645	error	Caught by controller[0]: node:internal/modules/cjs/loader:1228
    
    host.iobrokerProd
    2024-10-15 23:16:24.610	info	iobroker upload [0] flexcharts.admin /opt/iobroker/node_modules/iobroker.flexcharts/admin/flexcharts.png flexcharts.png image/png
    
    host.iobrokerProd
    2024-10-15 23:16:24.609	info	iobroker upload [1] flexcharts.admin /opt/iobroker/node_modules/iobroker.flexcharts/admin/flexcharts-icon.png flexcharts-icon.png image/png
    
    host.iobrokerProd
    2024-10-15 23:16:24.607	info	iobroker upload [2] flexcharts.admin /opt/iobroker/node_modules/iobroker.flexcharts/admin/flexcharts-icon-small.png flexcharts-icon-small.png image/png
    
    host.iobrokerProd
    2024-10-15 23:16:24.598	info	instance system.adapter.flexcharts.0 in version "0.1.5" started with pid 213243
    

    30f988b7-9e32-417e-a11b-2786c18ca39a-image.png

    NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
    Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

    jrbwhJ 1 Antwort Letzte Antwort
    0
    • M MCU

      @jrbwh Problem nach Update.

      
      web.1
      2024-10-15 23:16:24.879	warn	setTimeout called, but adapter is shutting down
      
      web.0
      2024-10-15 23:16:24.878	warn	setTimeout called, but adapter is shutting down
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	info	Rebuild for adapter system.adapter.flexcharts.0 not successful in 3 tries. Adapter will not be restarted again. Please execute "npm install --production" in adapter directory manually.
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	instance system.adapter.flexcharts.0 terminated with code 1 (JS_CONTROLLER_STOPPED)
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: Node.js v20.17.0
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: }
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: requireStack: []
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: code: 'MODULE_NOT_FOUND',
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: at node:internal/main/run_main_module:28:49 {
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: at Module._load (node:internal/modules/cjs/loader:1051:27)
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: Error: Cannot find module '/opt/iobroker/node_modules/iobroker.flexcharts'
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: ^
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: throw err;
      
      host.iobrokerProd
      2024-10-15 23:16:24.645	error	Caught by controller[0]: node:internal/modules/cjs/loader:1228
      
      host.iobrokerProd
      2024-10-15 23:16:24.610	info	iobroker upload [0] flexcharts.admin /opt/iobroker/node_modules/iobroker.flexcharts/admin/flexcharts.png flexcharts.png image/png
      
      host.iobrokerProd
      2024-10-15 23:16:24.609	info	iobroker upload [1] flexcharts.admin /opt/iobroker/node_modules/iobroker.flexcharts/admin/flexcharts-icon.png flexcharts-icon.png image/png
      
      host.iobrokerProd
      2024-10-15 23:16:24.607	info	iobroker upload [2] flexcharts.admin /opt/iobroker/node_modules/iobroker.flexcharts/admin/flexcharts-icon-small.png flexcharts-icon-small.png image/png
      
      host.iobrokerProd
      2024-10-15 23:16:24.598	info	instance system.adapter.flexcharts.0 in version "0.1.5" started with pid 213243
      

      30f988b7-9e32-417e-a11b-2786c18ca39a-image.png

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

      @mcu Habe eben mit 2 Web-Adapter-Instanzen probiert, flexcharts zu deinstallieren und dann neu zu installieren. Das hat problemlos funktioniert. flexcharts ist auf beiden Ports erreichbar.

      Kann mir die Meldungen grade nicht erklären.
      Von welcher Version hast Du aktualisiert und auf wie (Adapter-GUI, NPM-GUI, ...)?

      Bitte mal probieren komplett deinstallieren und neu installieren.

      M 1 Antwort Letzte Antwort
      0
      • jrbwhJ jrbwh

        @mcu Habe eben mit 2 Web-Adapter-Instanzen probiert, flexcharts zu deinstallieren und dann neu zu installieren. Das hat problemlos funktioniert. flexcharts ist auf beiden Ports erreichbar.

        Kann mir die Meldungen grade nicht erklären.
        Von welcher Version hast Du aktualisiert und auf wie (Adapter-GUI, NPM-GUI, ...)?

        Bitte mal probieren komplett deinstallieren und neu installieren.

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

        @jrbwh Das hat geholfen, Danke.

        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

        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

          N Offline
          N Offline
          Neopholus
          schrieb am zuletzt editiert von
          #88

          Hallo @jrbwh,

          danke für den tollen Adapter! Bin bei eCharts schon verzweifelt, weil gerade die Balkendiagramme recht schlecht unterstützt wurden. Das klappt mit deinem Adapter sehr gut. Ich würde mir die Charts gerne per Telegram zusenden lassen, im eCharts-Adapter kann man dafür einen JPG Renderer definieren und das Bild im Dateisystem speichern und das dann verschicken. Eine entsprechende Möglichkeit habe ich in flexcharts nicht gefunden.

          Ist es irgendwie möglich, ein JPG-Bild von einem Chart zu erzeugen?

          Danke,
          Neopholus

          jrbwhJ 2 Antworten Letzte Antwort
          0
          • mcm1957M mcm1957

            @sigi234 said in Test Adapter flexcharts 0.0.1 - Stapeldiagramme und mehr:

            @jrbwh
            Hi, wie ist der genaue Installations Vorgang?

            Cli oder via Admin

            Der Adapter ist im LATEST repository und wie jeder andere Adapetr via UI oder iobroker cli installier und upgradebar.

            Wenn eine der Versionen nicht funktioniert ist das ein Bug und bitte ein Issue erstellen.

            D Offline
            D Offline
            Delphinis
            schrieb am zuletzt editiert von Delphinis
            #89

            @mcm1957
            Hab gerade versucht, den (neuen) Adapter zu installieren. Vorgehen:

            1. npm uninstall iobroker.flexcharts -> OK
            2. installieren in iob via Adapter
              Fehlermeldung:
            $ iobroker add flexcharts auto --host MiniPC --debug
            host.MiniPC Adapter "system.adapter.flexcharts.0" is stopped.
            host.MiniPC Unknown packetName flexcharts. Please install packages from outside the repository using npm!
            ERROR: Process exited with code 12
            

            log:

            host.MiniPC	2024-10-29 08:08:00.313	info	iobroker exit 12
            host.MiniPC	2024-10-29 08:07:59.820	info	Restart adapter system.adapter.web.0 because enabled
            host.MiniPC	2024-10-29 08:07:59.819	error	instance system.adapter.web.0 terminated with code 4294967196 ()
            host.MiniPC	2024-10-29 08:07:59.257	error	iobroker host.MiniPC Unknown packetName flexcharts. Please install packages from outside the repository using npm!
            web.0	2024-10-29 08:07:59.239	warn	Terminated (-100): Without reason
            host.MiniPC	2024-10-29 08:07:59.219	info	"system.adapter.flexcharts.0" disabled
            host.MiniPC	2024-10-29 08:07:59.212	info	iobroker host.MiniPC Adapter "system.adapter.flexcharts.0" is stopped.
            host.MiniPC	2024-10-29 08:07:55.276	info	iobroker add flexcharts auto --host MiniPC --debug
            

            Der Flexadapter erscheint nun in den Instanzen funktioniert aber nicht, auch wenn ich ihn starte.
            Ausserdem finde ich den Flexadapter nicht mehr unter den Adaptern.
            Windows-System.

            mcm1957M 1 Antwort Letzte Antwort
            0
            • N Neopholus

              Hallo @jrbwh,

              danke für den tollen Adapter! Bin bei eCharts schon verzweifelt, weil gerade die Balkendiagramme recht schlecht unterstützt wurden. Das klappt mit deinem Adapter sehr gut. Ich würde mir die Charts gerne per Telegram zusenden lassen, im eCharts-Adapter kann man dafür einen JPG Renderer definieren und das Bild im Dateisystem speichern und das dann verschicken. Eine entsprechende Möglichkeit habe ich in flexcharts nicht gefunden.

              Ist es irgendwie möglich, ein JPG-Bild von einem Chart zu erzeugen?

              Danke,
              Neopholus

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

              @neopholus Freut mich, dass Dir der Adapter gefällt!
              JPG Export ist eine gute Idee, wird aber im Moment nicht unterstützt. Schaue ich mir am WE an, bin grade ohne Laptop unterwegs.
              Grüße aus der Schweiz
              Jürgen

              1 Antwort Letzte Antwort
              0
              • D Delphinis

                @mcm1957
                Hab gerade versucht, den (neuen) Adapter zu installieren. Vorgehen:

                1. npm uninstall iobroker.flexcharts -> OK
                2. installieren in iob via Adapter
                  Fehlermeldung:
                $ iobroker add flexcharts auto --host MiniPC --debug
                host.MiniPC Adapter "system.adapter.flexcharts.0" is stopped.
                host.MiniPC Unknown packetName flexcharts. Please install packages from outside the repository using npm!
                ERROR: Process exited with code 12
                

                log:

                host.MiniPC	2024-10-29 08:08:00.313	info	iobroker exit 12
                host.MiniPC	2024-10-29 08:07:59.820	info	Restart adapter system.adapter.web.0 because enabled
                host.MiniPC	2024-10-29 08:07:59.819	error	instance system.adapter.web.0 terminated with code 4294967196 ()
                host.MiniPC	2024-10-29 08:07:59.257	error	iobroker host.MiniPC Unknown packetName flexcharts. Please install packages from outside the repository using npm!
                web.0	2024-10-29 08:07:59.239	warn	Terminated (-100): Without reason
                host.MiniPC	2024-10-29 08:07:59.219	info	"system.adapter.flexcharts.0" disabled
                host.MiniPC	2024-10-29 08:07:59.212	info	iobroker host.MiniPC Adapter "system.adapter.flexcharts.0" is stopped.
                host.MiniPC	2024-10-29 08:07:55.276	info	iobroker add flexcharts auto --host MiniPC --debug
                

                Der Flexadapter erscheint nun in den Instanzen funktioniert aber nicht, auch wenn ich ihn starte.
                Ausserdem finde ich den Flexadapter nicht mehr unter den Adaptern.
                Windows-System.

                mcm1957M Online
                mcm1957M Online
                mcm1957
                schrieb am zuletzt editiert von mcm1957
                #91

                @delphinis said in Test Adapter flexcharts - Stapeldiagramme und mehr:

                @mcm1957
                Hab gerade versucht, den (neuen) Adapter zu installieren. Vorgehen:

                1. npm uninstall iobroker.flexcharts -> OK

                NIEMALS Installationen oder Deinstallationsn von ioBroker Komponenten mittels npm ausführen. Es gibt für alles iobroker ... Befehle wenn du auf der Commandline arbeiten willst.

                Da ich aber nicht ausschließen kann, dass du diese Antwort wieder als total OT ansiehst (siehe https://forum.iobroker.net/topic/62239/iobroker-unter-windows-eine-anleitung-und-ein-rückblick/61) werde ich von weiteren Antworten auf deine Fragen Abstand nehmen. Bitte lass dich von anderen über die sinnvolle Anwendung der iobroker commandline Befehle aufklären.

                Entwicklung u Betreuung: envertech-pv, hoymiles-ms, ns-client, pid, snmp Adapter;
                Support Repositoryverwaltung.

                Wer Danke sagen will, kann nen Kaffee spendieren: https://paypal.me/mcm1957atiobroker

                LESEN - gute Forenbeitrage

                D 1 Antwort Letzte Antwort
                1
                • mcm1957M mcm1957

                  @delphinis said in Test Adapter flexcharts - Stapeldiagramme und mehr:

                  @mcm1957
                  Hab gerade versucht, den (neuen) Adapter zu installieren. Vorgehen:

                  1. npm uninstall iobroker.flexcharts -> OK

                  NIEMALS Installationen oder Deinstallationsn von ioBroker Komponenten mittels npm ausführen. Es gibt für alles iobroker ... Befehle wenn du auf der Commandline arbeiten willst.

                  Da ich aber nicht ausschließen kann, dass du diese Antwort wieder als total OT ansiehst (siehe https://forum.iobroker.net/topic/62239/iobroker-unter-windows-eine-anleitung-und-ein-rückblick/61) werde ich von weiteren Antworten auf deine Fragen Abstand nehmen. Bitte lass dich von anderen über die sinnvolle Anwendung der iobroker commandline Befehle aufklären.

                  D Offline
                  D Offline
                  Delphinis
                  schrieb am zuletzt editiert von
                  #92

                  @mcm1957
                  sorry, diese Frage sollte nicht an dich, sondern an @jrbwh.

                  jrbwhJ 1 Antwort Letzte Antwort
                  0
                  • D Delphinis

                    @mcm1957
                    sorry, diese Frage sollte nicht an dich, sondern an @jrbwh.

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

                    @delphinis Ich fürchte, da bin ich überfragt. npm in der ioBroker-Umgebung zu nutzen ist keine gute Idee und kann das System beschädigen. Das musste ich auch schon lernen.

                    @mcm1957 ist hier schon der richtige Ansprechpartner.

                    Gruß, Jürgen

                    D 1 Antwort Letzte Antwort
                    0
                    • jrbwhJ jrbwh

                      @delphinis Ich fürchte, da bin ich überfragt. npm in der ioBroker-Umgebung zu nutzen ist keine gute Idee und kann das System beschädigen. Das musste ich auch schon lernen.

                      @mcm1957 ist hier schon der richtige Ansprechpartner.

                      Gruß, Jürgen

                      D Offline
                      D Offline
                      Delphinis
                      schrieb am zuletzt editiert von
                      #94

                      @jrbwh
                      Ok, werde npm in zukunft meiden.
                      Hab's jetzt hingekriegt, ihn wieder mittels iob Adapter zu installieren.

                      L 1 Antwort Letzte Antwort
                      -1
                      • D Delphinis

                        @jrbwh
                        Ok, werde npm in zukunft meiden.
                        Hab's jetzt hingekriegt, ihn wieder mittels iob Adapter zu installieren.

                        L Offline
                        L Offline
                        legro
                        schrieb am zuletzt editiert von legro
                        #95

                        @Alle

                        Nachdem ich die doch recht hohen Hürden beim Einstieg überwunden hatte, machte das Ganze richtig Spaß.

                        Was ich damit so alles schon habe umsetzen können, habe ich hier dokumentiert. Resultat: Was ich zuvor in einem halben Dutzend Diagrammen verpackt hatte, kann ich nunmehr mit nur zwei Charts erzeugen, da deren Ansichten über die sog. Legende (mit den darin referenzierten Datenreihen) dynamisch verändert werden können.

                        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

                        1 Antwort Letzte Antwort
                        0
                        • Merlin123M Offline
                          Merlin123M Offline
                          Merlin123
                          schrieb am zuletzt editiert von Merlin123
                          #96

                          Bräuchte mal Hilfe für den Einstieg.
                          Vorab: Meine Javascript Kenntnisse sind höchstens rudimentär vorhanden.... Bestehende Scripte ändern geht teilweise, neu schreiben krieg ich nicht wirklich hin.

                          Was will ich umsetzen?
                          Ich habe einen dynamischen Stromtarif von Tibber. Ich möchte ein Diagramm, wo für jede Stunde des Tages ein vertikaler Balken ist, dessen Höhe vom Preis für diese Stunde abhängt.
                          Die Balken sollen in Abhängigkeit einer Schwelle eine von zwei Farben haben. Die Schwelle ist ein Preis, der in einem DP abgelegt ist. Kleiner Gleich dieser Schwelle ist das Schnellladen der Wallbox aktiv.
                          Die Preise pro Stunde liegen in eigenen DPs in der Form:
                          tibberlink.0.Homes.xxx.PricesToday.0.total
                          tibberlink.0.Homes.xxx.PricesToday.1.total
                          ....
                          tibberlink.0.Homes.x.PricesToday.23.total

                          Zusatzwunsch:
                          Wir planen die Anschaffung eines Speichers für unsere PV Anlage, den wir auch Steuern wollen.
                          Dafür gibt es zwei Grenzen: Laden ab x ct, entladen ab y ct
                          Wäre cool, wenn man diese Spanne in den Hintergrund des Charts legen könnte. (Im Beispiel der dunkelgraue Bereich hinter den Balken)

                          Ich habe dafür eine Lösung mit dem Material Design Barchart gefunden, was grundsätzlich geht. Leider sind die Material Design Widgets nicht VIS2 kompatibel. Das Chart aktualisiert z.B. die Farben nicht, wenn die Schwelle geändert wird. Man muss die View neu laden. In Vis1 geht es.

                          Kann mir da jemand mal nen Schubs geben, wie ich das am Besten anfange?

                          Rein die Balken würde ich mit nem State als Quelle hinbekommen. Da würde ich mit nem Blockly halt das JSON basteln (wobei ich noch keine Idee habe, wie ich die Balken unterschiedlich einfärben könnte. Eventuell mit 2 "name:" und halt nur den einen oder anderen einbauen). Aber keine Idee, wie ich da für den Speicher noch was in den Hintergrund bekommen könnte.

                          Screenshot 2024-11-19 165729.png

                          Beta-Tester

                          Merlin123M 1 Antwort Letzte Antwort
                          0
                          • Merlin123M Merlin123

                            Bräuchte mal Hilfe für den Einstieg.
                            Vorab: Meine Javascript Kenntnisse sind höchstens rudimentär vorhanden.... Bestehende Scripte ändern geht teilweise, neu schreiben krieg ich nicht wirklich hin.

                            Was will ich umsetzen?
                            Ich habe einen dynamischen Stromtarif von Tibber. Ich möchte ein Diagramm, wo für jede Stunde des Tages ein vertikaler Balken ist, dessen Höhe vom Preis für diese Stunde abhängt.
                            Die Balken sollen in Abhängigkeit einer Schwelle eine von zwei Farben haben. Die Schwelle ist ein Preis, der in einem DP abgelegt ist. Kleiner Gleich dieser Schwelle ist das Schnellladen der Wallbox aktiv.
                            Die Preise pro Stunde liegen in eigenen DPs in der Form:
                            tibberlink.0.Homes.xxx.PricesToday.0.total
                            tibberlink.0.Homes.xxx.PricesToday.1.total
                            ....
                            tibberlink.0.Homes.x.PricesToday.23.total

                            Zusatzwunsch:
                            Wir planen die Anschaffung eines Speichers für unsere PV Anlage, den wir auch Steuern wollen.
                            Dafür gibt es zwei Grenzen: Laden ab x ct, entladen ab y ct
                            Wäre cool, wenn man diese Spanne in den Hintergrund des Charts legen könnte. (Im Beispiel der dunkelgraue Bereich hinter den Balken)

                            Ich habe dafür eine Lösung mit dem Material Design Barchart gefunden, was grundsätzlich geht. Leider sind die Material Design Widgets nicht VIS2 kompatibel. Das Chart aktualisiert z.B. die Farben nicht, wenn die Schwelle geändert wird. Man muss die View neu laden. In Vis1 geht es.

                            Kann mir da jemand mal nen Schubs geben, wie ich das am Besten anfange?

                            Rein die Balken würde ich mit nem State als Quelle hinbekommen. Da würde ich mit nem Blockly halt das JSON basteln (wobei ich noch keine Idee habe, wie ich die Balken unterschiedlich einfärben könnte. Eventuell mit 2 "name:" und halt nur den einen oder anderen einbauen). Aber keine Idee, wie ich da für den Speicher noch was in den Hintergrund bekommen könnte.

                            Screenshot 2024-11-19 165729.png

                            Merlin123M Offline
                            Merlin123M Offline
                            Merlin123
                            schrieb am zuletzt editiert von
                            #97

                            Hab hier das mal als JSON probiert.... Wie kann ich denn das alles auf eine Seite bringen? Skalieren in einem iFrame?

                            Screenshot 2024-11-19 181058.png

                            Beta-Tester

                            jrbwhJ 1 Antwort Letzte Antwort
                            0
                            • Merlin123M Merlin123

                              Hab hier das mal als JSON probiert.... Wie kann ich denn das alles auf eine Seite bringen? Skalieren in einem iFrame?

                              Screenshot 2024-11-19 181058.png

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

                              @merlin123 Das Diagramm sollte sich automatisch auf die Seite bzw. ins iFrame einpassen. Tut es das nicht? Auf was für einem System arbeitest Du, welchen Browser verwendest Du?

                              Bitte mal das JSON posten.

                              Zum "Zusatzwunsch": Ich habe in Apache ECharts keine Möglichkeit gefunden, den Hintergrund pro Balken zu variieren. Vielleicht kannst Du eine zusätzliche Serie mit gestapelten Balken (evtl. als 100%-Darstellung) erzeugen und die hinter die Preis-Balken legen.

                              Merlin123M 1 Antwort Letzte Antwort
                              0
                              • jrbwhJ jrbwh

                                @merlin123 Das Diagramm sollte sich automatisch auf die Seite bzw. ins iFrame einpassen. Tut es das nicht? Auf was für einem System arbeitest Du, welchen Browser verwendest Du?

                                Bitte mal das JSON posten.

                                Zum "Zusatzwunsch": Ich habe in Apache ECharts keine Möglichkeit gefunden, den Hintergrund pro Balken zu variieren. Vielleicht kannst Du eine zusätzliche Serie mit gestapelten Balken (evtl. als 100%-Darstellung) erzeugen und die hinter die Preis-Balken legen.

                                Merlin123M Offline
                                Merlin123M Offline
                                Merlin123
                                schrieb am zuletzt editiert von Merlin123
                                #99

                                @jrbwh Hab das einfach in nem Tab in Chrome unter Windows aufgerufen.
                                Hab das JSON aus dem Beispiel genommen und angepasst. Hab aber keine Ahnung, ob ich das richtig gemacht habe :P
                                Das JSON lasse ich in nem Blockly zusammenbauen

                                { "tooltip": {"trigger": "axis","axisPointer": {"type": "shadow"}},   "legend": {},   "xAxis": [{"type": "category","data": ["0","","2","","4","","6","","8","","10","","12","","14","","16","","18","","20","","22",""]}],   "yAxis": [{"type": "value"}],   "dataZoom": [{"show": true,"start": 0, "end": 50}],   "series": [{ "name": "Load", "type": "bar", "color": "#4CAF50", "stack": "Tibber",       "data": [0,0,0,28.09,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,27.86]},{ "name": "NoLoad", "type": "bar", "color": "#2196F3", "stack": "Tibber",       "data": [29.91,29.24,28.55,0,28.51,28.92,31.01,32.83,35.63,35.92,35.77,35.36,34.81,34.33,33.85,32.5,32.99,33.86,33.2,32.16,31.11,30.19,29.7,0]}   ] }
                                

                                Wie kann ich denn Balken hinter Balken legen bzw. die Breite von Balken variieren?

                                Beta-Tester

                                jrbwhJ 1 Antwort Letzte Antwort
                                0
                                • Merlin123M Merlin123

                                  @jrbwh Hab das einfach in nem Tab in Chrome unter Windows aufgerufen.
                                  Hab das JSON aus dem Beispiel genommen und angepasst. Hab aber keine Ahnung, ob ich das richtig gemacht habe :P
                                  Das JSON lasse ich in nem Blockly zusammenbauen

                                  { "tooltip": {"trigger": "axis","axisPointer": {"type": "shadow"}},   "legend": {},   "xAxis": [{"type": "category","data": ["0","","2","","4","","6","","8","","10","","12","","14","","16","","18","","20","","22",""]}],   "yAxis": [{"type": "value"}],   "dataZoom": [{"show": true,"start": 0, "end": 50}],   "series": [{ "name": "Load", "type": "bar", "color": "#4CAF50", "stack": "Tibber",       "data": [0,0,0,28.09,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,27.86]},{ "name": "NoLoad", "type": "bar", "color": "#2196F3", "stack": "Tibber",       "data": [29.91,29.24,28.55,0,28.51,28.92,31.01,32.83,35.63,35.92,35.77,35.36,34.81,34.33,33.85,32.5,32.99,33.86,33.2,32.16,31.11,30.19,29.7,0]}   ] }
                                  

                                  Wie kann ich denn Balken hinter Balken legen bzw. die Breite von Balken variieren?

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

                                  @merlin123 Bei mir passt sich das Diagramm ins Fenster ein, auch bei Größenänderungen. Bitte einen Screenshot machen, so dass man das Problem sieht.

                                  Übereinanderlegen geht mit barGap: https://echarts.apache.org/en/option.html#series-bar.barGap

                                  Merlin123M 1 Antwort Letzte Antwort
                                  0
                                  • jrbwhJ jrbwh

                                    @merlin123 Bei mir passt sich das Diagramm ins Fenster ein, auch bei Größenänderungen. Bitte einen Screenshot machen, so dass man das Problem sieht.

                                    Übereinanderlegen geht mit barGap: https://echarts.apache.org/en/option.html#series-bar.barGap

                                    Merlin123M Offline
                                    Merlin123M Offline
                                    Merlin123
                                    schrieb am zuletzt editiert von
                                    #101

                                    @jrbwh

                                    So sieht das Browserfenster aus. Hab unterhalb der Bookmarks und unten in der Taskleiste abgeschnitten, volle Bildschirmbreite.

                                    Screenshot 2024-11-19 203404.png

                                    Das mit barGap schau ich mir an. Danke!

                                    Beta-Tester

                                    M jrbwhJ 2 Antworten Letzte Antwort
                                    0
                                    • Merlin123M Merlin123

                                      @jrbwh

                                      So sieht das Browserfenster aus. Hab unterhalb der Bookmarks und unten in der Taskleiste abgeschnitten, volle Bildschirmbreite.

                                      Screenshot 2024-11-19 203404.png

                                      Das mit barGap schau ich mir an. Danke!

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

                                      @merlin123 Bin mir nicht sicher was du erreichen willst, aber du musst schon den Anzeige-Bereich auf 100% stellen, wenn du alles sehen möchtest.
                                      43425900-8ba3-4c5b-90ec-21c3b230d167-image.png
                                      -> rechten Slider nach rechts ziehen

                                      NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                      Merlin123M 1 Antwort Letzte Antwort
                                      0
                                      • Merlin123M Merlin123

                                        @jrbwh

                                        So sieht das Browserfenster aus. Hab unterhalb der Bookmarks und unten in der Taskleiste abgeschnitten, volle Bildschirmbreite.

                                        Screenshot 2024-11-19 203404.png

                                        Das mit barGap schau ich mir an. Danke!

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

                                        @merlin123 Dich stören die Abstände links und rechts? Oder was ist das Problem?

                                        1 Antwort Letzte Antwort
                                        0
                                        • M MCU

                                          @merlin123 Bin mir nicht sicher was du erreichen willst, aber du musst schon den Anzeige-Bereich auf 100% stellen, wenn du alles sehen möchtest.
                                          43425900-8ba3-4c5b-90ec-21c3b230d167-image.png
                                          -> rechten Slider nach rechts ziehen

                                          Merlin123M Offline
                                          Merlin123M Offline
                                          Merlin123
                                          schrieb am zuletzt editiert von
                                          #104

                                          @mcu @jrbwh

                                          Wie man an dem Screenshot in meinem ersten Beispiel sieht (von dem Material Design Barchart), sind es eigentlich 24 Balken. Die sollen direkt alle angezeigt werden.

                                          Beta-Tester

                                          jrbwhJ 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

                                          270

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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