Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Test Adapter flexcharts - Stapeldiagramme und mehr

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Test Adapter flexcharts - Stapeldiagramme und mehr

    This topic has been deleted. Only users with topic management privileges can see it.
    • SMS
      SMS last edited by

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

      @sms Dazu gibt es ja schon eine ausführliche Diskussion im Adapter tibberLink. Mir ist deshalb nicht ganz klar, was Dir an Info fehlt. Die Vorgehensweise, um per State ein Diagramm zu erzeugen ist im Readme beschrieben. Kurz zusammengefasst:

      • Du musst einen State im json-Format erzeugen, der das Format der cChart-Options hat und Deine Daten als "series" enthält

      Das verstehe ich nicht bzw. bekomme ich nicht hin. Denke du meinst einen DP erzeugen? Aber was für einen?
      hier?
      860393d4-5d4c-46d8-967c-da2a8dacddb4-grafik.png

      d8f036b1-18d4-4b18-bd87-d969c8f8dfa5-grafik.png

      Dann müsste ich doch hier was einfügen können?
      b526fc46-a416-4350-a5c5-ad6605fbb48b-grafik.png

      jrbwh 1 Reply Last reply Reply Quote 0
      • jrbwh
        jrbwh @SMS last edited by

        @sms Ja, ich meine einen DP. Ich nutze kein Tibber und kenne auch den tibberLink-Adapter nicht. Aber @ReblausGT hat ja hier die Vorgehensweise schön beschrieben.

        Wenn Du die Funktionsweise von flexcharts verstehen möchtest, empfehle ich, die Beispiele im Readme auszuprobieren.

        @ReblausGT @Merlin123 Falls ihr ein praktikables Verfahren für die Aufbereitung der tibberLink-Daten für flexcharts habt, wäre es super, ihr könntet das als Diskussionsbeitrag bei flexcharts teilen.

        Merlin123 1 Reply Last reply Reply Quote 0
        • Merlin123
          Merlin123 @jrbwh last edited by Merlin123

          @jrbwh Die Frage ist: Was verstehst Du unter praktikabel? Ich hab ein Blockly, das mit das visualisiert und einträgt, wann das Auto geladen würde und die Grenzen für Speicher laden/entladen.

          Kann das mal einstellen.

          Hier zu finden

          jrbwh 1 Reply Last reply Reply Quote 0
          • jrbwh
            jrbwh @Merlin123 last edited by jrbwh

            @merlin123 Ja, genau sowas meine ich mit praktikabel! Danke!

            Das kann - mindestens - als super Startpunkt für eine eigene Implementierung dienen.

            @sms Hoffe, das hilft Dir auch weiter.

            Merlin123 1 Reply Last reply Reply Quote 0
            • Merlin123
              Merlin123 @jrbwh last edited by

              @jrbwh Bei Fragen können sich die Leute gerne melden. Hab da auch genug Fragen gestellt, bis ich das halbwegs verstanden habe 🙂

              jrbwh 1 Reply Last reply Reply Quote 1
              • SMS
                SMS last edited by

                Mir geht es ja nicht um die Anzeige des tibber Strompreises, das war ja in einen anderen Thread erklärt und habe ich hinbekommen.

                Was ich jetzt nicht hinbekomme, ist das Anzeigen eines anderen json DP. Ich weiß nicht bzw. lese nicht heraus was für einen ich erstellen soll und dann wo eintragen. Das war ja meine Frage. 😞

                jrbwh 1 Reply Last reply Reply Quote 0
                • jrbwh
                  jrbwh @SMS last edited by

                  @sms Mit diesen Infos fällt mir eine Antwort schwer. Wenn Du einen Beispieldatensatz postest und Deine Vorstellung beschreibst, wie das Diagramm aussehen soll, kann ich mir ein paar Gedanken dazu machen.

                  SMS 1 Reply Last reply Reply Quote 0
                  • SMS
                    SMS @jrbwh last edited by

                    @jrbwh ich möchte ebenfalls eine von tibber bereitgestellte Datei in einem Balkendiagram darstellen.
                    Verstehe nicht wo ich die json Datei von tibber
                    89195eac-cd08-4a94-8ba0-b80e1e956562-grafik.png

                    Angezeigt werden sollen einmal die Gesamtkosten (totalcost) und der Gesamtverbrauch (consumption)

                    [{"from":"2025-01-06T00:00:00.000+01:00","to":"2025-01-06T00:00:00.000+01:00","cost":10.7284204741,"unitPrice":0.287942,"unitPriceVAT":0.045974,"consumption":37.259,"consumptionUnit":"kWh","totalCost":10.3727235241,"unitCost":10.7284204741,"currency":"EUR"},{"from":"2025-01-13T00:00:00.000+01:00","to":"2025-01-13T00:00:00.000+01:00","cost":14.5018410257,"unitPrice":0.298478,"unitPriceVAT":0.047656,"consumption":48.586,"consumptionUnit":"kWh","totalCost":14.0038652957,"unitCost":14.5018410257,"currency":"EUR"},{"from":"2025-01-20T00:00:00.000+01:00","to":"2025-01-20T00:00:00.000+01:00","cost":16.5644088827,"unitPrice":0.385434,"unitPriceVAT":0.06154,"consumption":42.976,"consumptionUnit":"kWh","totalCost":16.0664331527,"unitCost":16.5644088827,"currency":"EUR"},{"from":"2025-01-27T00:00:00.000+01:00","to":"2025-01-27T00:00:00.000+01:00","cost":13.6840366474,"unitPrice":0.360961,"unitPriceVAT":0.057632,"consumption":37.91,"consumptionUnit":"kWh","totalCost":13.1860609174,"unitCost":13.6840366474,"currency":"EUR"}]
                    

                    einfügen soll das mir das angezeigt wird. Irgendwo muss ja ein template rein, aber wo und wie?

                    Adresse ist ja dann: http://iobroker-ip:8082/flexcharts/echarts.html?source=state&id=...

                    Danke!

                    L jrbwh 2 Replies Last reply Reply Quote 0
                    • L
                      legro @SMS last edited by legro

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

                      .. Irgendwo muss ja ein template rein, aber wo und wie?

                      Die Daten müssen in dem Bereich series eingetragen werden. Dieses Feld ist ein Array aus Objekten, die ihrerseits wiederum Arrays enthalten, in welche die darzustellenden Werte einzutragen sind. In dem nachfolgenden Beispiel ab Zeile 23. Für jede Datenreihe muss ein solches Objekt in Array series angelegt werden.

                        "yAxis": [
                          {
                            "name": "Temperatur",
                            "nameLocation": "end",
                            "nameTextStyle": {
                              "color": "#ffffff",
                              "fontSize": 15
                            },
                            "type": "value",
                            "axisLabel": {
                              "formatter": "{value} °C",
                              "fontSize": 12,
                              "color": "#ffffff"
                            }
                          }
                        ],
                        "series": [
                          {
                            "name": "Min",
                            "type": "bar",
                            "barGap": "30%",
                            "color": "#5f5f5f",
                            "data": [
                              0.7,
                              0.7,
                              -0.1,
                      
                      1 Reply Last reply Reply Quote 0
                      • jrbwh
                        jrbwh @SMS last edited by

                        @sms Ich habe mal was gebastelt. Hoffe, das kommt Deinen Vorstellung nahe. Hier ist die Beschreibung.

                        SMS 1 Reply Last reply Reply Quote 0
                        • SMS
                          SMS @jrbwh last edited by SMS

                          @jrbwh Hi
                          Ja das sieht schon mal ganz gut aus. Danke! Ich habe es auf dem Tablet soweit hinbekommen, das es mir wie in deiner Beschreibung angezeigt wird.
                          Das würde ich jetzt gerne mit daily genauso haben. Leider kann ich auf dem Tablet nicht nachvollziehen, was in der zip-Datei drin steht. Das muss ich mir aufm Laptop mal anschauen.
                          Ich denke beim ersten muss ich weekly durch daily ersetzen und die json von tibber rein kopieren? Das müsste mir dann wieder die Objektstruktur erzeugen wenn ich es dann importiere. Liege ich richtig?
                          Woher kommen die Daten vom Abschnitt ..."_id": "0_userdata...chartweekly"? bei "val": "{"...
                          Muss ich die händisch eintragen?

                          jrbwh 1 Reply Last reply Reply Quote 0
                          • jrbwh
                            jrbwh @SMS last edited by

                            @sms Ich habe das Skript mal als Text in die Anleitung eingefügt. Das ist leichter verständlich. Der State chartWeekly enthält die Definition des Charts. Das habe ich auf Basis eines Beispiels von den Apache Echart Seiten erstellt - wie ich weiter oben erläutert habe. Wenn das Chart anders aussehen soll, musst Du diesen State ändern.

                            Für ein Daily Chart:

                            • chartWeekly nach chartDaily kopieren und ggf. anpassen
                            • tibberDaily anlegen und die richtigen Daten reinkopieren
                            • Im Skript die ersten 3 Konstanten kopieren und anpassen
                            • den Funktionsaufruf evalTibberData() (Zeile 9) kopieren und anpassen
                            • die Funktion on() kopieren und anpassen
                            U 1 Reply Last reply Reply Quote 0
                            • U
                              UlliJ @jrbwh last edited by

                              @jrbwh

                              Vielen Dank für den Adapter und die unendlichen Möglichkeiten für die Darstellung von Charts👍

                              Ich scheitere derzeit an diesem Chart für ein CoP Netz der Wärmepumpe. Auf der Apache echarts Webseite funktioniert die Darstellung (bis auf Details und aktuellen Betriebspunkt) wie gewollt
                              scatter3D-dataset.png

                              In der Vis bleibt nur die Farbskala und der Rest ist weg
                              e5b53749-40ee-4542-8521-78030d40cddb-image.png
                              Der Datensatz dazu

                              option = {
                               "tooltip": {},
                               "visualMap": {
                                 "min": 1,
                                 "max": 6,
                                 "dimension": 2,
                                 "inRange": {
                                   "color": [
                                     "#313695",
                                     "#4575b4",
                                     "#74add1",
                                     "#abd9e9",
                                     "#e0f3f8",
                                     "#ffffbf",
                                     "#fee090",
                                     "#fdae61",
                                     "#f46d43",
                                     "#d73027"
                                   ]
                                 }
                               },
                               "xAxis3D": {
                                 "type": "category",
                                 "name": "AT (°C)"
                               },
                               "yAxis3D": {
                                 "type": "category",
                                 "name": "VL (°C)"
                               },
                               "zAxis3D": {
                                 "type": "value",
                                 "name": "COP"
                               },
                               "grid3D": {
                                 "boxWidth": 100,
                                 "boxDepth": 100,
                                 "viewControl": {
                                   "projection": "perspective"
                                 }
                               },
                               "series": [
                                 {
                                   "type": "scatter3D",
                                   "symbolSize": 10,
                                   "data": [
                                     [
                                       -10,
                                       35,
                                       3.43
                                     ],
                                     [
                                       -10,
                                       40,
                                       3.18
                                     ],
                                     [
                                       -10,
                                       45,
                                       2.92
                                     ],
                                     [
                                       -10,
                                       50,
                                       2.65
                                     ],
                                     [
                                       -10,
                                       55,
                                       2.37
                                     ],
                                     [
                                       -10,
                                       60,
                                       2.08
                                     ],
                                     [
                                       -10,
                                       65,
                                       1.78
                                     ],
                                     [
                                       -8,
                                       35,
                                       3.67
                                     ],
                                     [
                                       -8,
                                       40,
                                       3.42
                                     ],
                                     [
                                       -8,
                                       45,
                                       3.15
                                     ],
                                     [
                                       -8,
                                       50,
                                       2.88
                                     ],
                                     [
                                       -8,
                                       55,
                                       2.6
                                     ],
                                     [
                                       -8,
                                       60,
                                       2.31
                                     ],
                                     [
                                       -8,
                                       65,
                                       2.01
                                     ],
                                     [
                                       -6,
                                       35,
                                       3.92
                                     ],
                                     [
                                       -6,
                                       40,
                                       3.67
                                     ],
                                     [
                                       -6,
                                       45,
                                       3.4
                                     ],
                                     [
                                       -6,
                                       50,
                                       3.13
                                     ],
                                     [
                                       -6,
                                       55,
                                       2.85
                                     ],
                                     [
                                       -6,
                                       60,
                                       2.56
                                     ],
                                     [
                                       -6,
                                       65,
                                       2.26
                                     ],
                                     [
                                       -4,
                                       35,
                                       4.18
                                     ],
                                     [
                                       -4,
                                       40,
                                       3.93
                                     ],
                                     [
                                       -4,
                                       45,
                                       3.67
                                     ],
                                     [
                                       -4,
                                       50,
                                       3.4
                                     ],
                                     [
                                       -4,
                                       55,
                                       3.12
                                     ],
                                     [
                                       -4,
                                       60,
                                       2.83
                                     ],
                                     [
                                       -4,
                                       65,
                                       2.53
                                     ],
                                     [
                                       -2,
                                       35,
                                       4.44
                                     ],
                                     [
                                       -2,
                                       40,
                                       4.19
                                     ],
                                     [
                                       -2,
                                       45,
                                       3.92
                                     ],
                                     [
                                       -2,
                                       50,
                                       3.65
                                     ],
                                     [
                                       -2,
                                       55,
                                       3.37
                                     ],
                                     [
                                       -2,
                                       60,
                                       3.08
                                     ],
                                     [
                                       -2,
                                       65,
                                       2.78
                                     ],
                                     [
                                       0,
                                       35,
                                       4.69
                                     ],
                                     [
                                       0,
                                       40,
                                       4.44
                                     ],
                                     [
                                       0,
                                       45,
                                       4.18
                                     ],
                                     [
                                       0,
                                       50,
                                       3.91
                                     ],
                                     [
                                       0,
                                       55,
                                       3.63
                                     ],
                                     [
                                       0,
                                       60,
                                       3.34
                                     ],
                                     [
                                       0,
                                       65,
                                       3.04
                                     ],
                                     [
                                       2,
                                       35,
                                       4.95
                                     ],
                                     [
                                       2,
                                       40,
                                       4.7
                                     ],
                                     [
                                       2,
                                       45,
                                       4.43
                                     ],
                                     [
                                       2,
                                       50,
                                       4.16
                                     ],
                                     [
                                       2,
                                       55,
                                       3.88
                                     ],
                                     [
                                       2,
                                       60,
                                       3.59
                                     ],
                                     [
                                       2,
                                       65,
                                       3.29
                                     ],
                                     [
                                       4,
                                       35,
                                       5.2
                                     ],
                                     [
                                       4,
                                       40,
                                       4.95
                                     ],
                                     [
                                       4,
                                       45,
                                       4.69
                                     ],
                                     [
                                       4,
                                       50,
                                       4.42
                                     ],
                                     [
                                       4,
                                       55,
                                       4.14
                                     ],
                                     [
                                       4,
                                       60,
                                       3.85
                                     ],
                                     [
                                       4,
                                       65,
                                       3.55
                                     ],
                                     [
                                       6,
                                       35,
                                       5.44
                                     ],
                                     [
                                       6,
                                       40,
                                       5.19
                                     ],
                                     [
                                       6,
                                       45,
                                       4.93
                                     ],
                                     [
                                       6,
                                       50,
                                       4.66
                                     ],
                                     [
                                       6,
                                       55,
                                       4.38
                                     ],
                                     [
                                       6,
                                       60,
                                       4.09
                                     ],
                                     [
                                       6,
                                       65,
                                       3.79
                                     ],
                                     [
                                       8,
                                       35,
                                       5.67
                                     ],
                                     [
                                       8,
                                       40,
                                       5.42
                                     ],
                                     [
                                       8,
                                       45,
                                       5.16
                                     ],
                                     [
                                       8,
                                       50,
                                       4.89
                                     ],
                                     [
                                       8,
                                       55,
                                       4.61
                                     ],
                                     [
                                       8,
                                       60,
                                       4.32
                                     ],
                                     [
                                       8,
                                       65,
                                       4.02
                                     ],
                                     [
                                       10,
                                       35,
                                       5.89
                                     ],
                                     [
                                       10,
                                       40,
                                       5.64
                                     ],
                                     [
                                       10,
                                       45,
                                       5.38
                                     ],
                                     [
                                       10,
                                       50,
                                       5.11
                                     ],
                                     [
                                       10,
                                       55,
                                       4.83
                                     ],
                                     [
                                       10,
                                       60,
                                       4.54
                                     ],
                                     [
                                       10,
                                       65,
                                       4.24
                                     ],
                                     [
                                       12,
                                       35,
                                       6.1
                                     ],
                                     [
                                       12,
                                       40,
                                       5.85
                                     ],
                                     [
                                       12,
                                       45,
                                       5.59
                                     ],
                                     [
                                       12,
                                       50,
                                       5.32
                                     ],
                                     [
                                       12,
                                       55,
                                       5.04
                                     ],
                                     [
                                       12,
                                       60,
                                       4.75
                                     ],
                                     [
                                       12,
                                       65,
                                       4.45
                                     ],
                                     [
                                       14,
                                       35,
                                       6.29
                                     ],
                                     [
                                       14,
                                       40,
                                       6.04
                                     ],
                                     [
                                       14,
                                       45,
                                       5.78
                                     ],
                                     [
                                       14,
                                       50,
                                       5.51
                                     ],
                                     [
                                       14,
                                       55,
                                       5.23
                                     ],
                                     [
                                       14,
                                       60,
                                       4.94
                                     ],
                                     [
                                       14,
                                       65,
                                       4.64
                                     ],
                                     [
                                       16,
                                       35,
                                       6.47
                                     ],
                                     [
                                       16,
                                       40,
                                       6.22
                                     ],
                                     [
                                       16,
                                       45,
                                       5.96
                                     ],
                                     [
                                       16,
                                       50,
                                       5.69
                                     ],
                                     [
                                       16,
                                       55,
                                       5.41
                                     ],
                                     [
                                       16,
                                       60,
                                       5.12
                                     ],
                                     [
                                       16,
                                       65,
                                       4.82
                                     ],
                                     [
                                       18,
                                       35,
                                       6.63
                                     ],
                                     [
                                       18,
                                       40,
                                       6.38
                                     ],
                                     [
                                       18,
                                       45,
                                       6.12
                                     ],
                                     [
                                       18,
                                       50,
                                       5.85
                                     ],
                                     [
                                       18,
                                       55,
                                       5.57
                                     ],
                                     [
                                       18,
                                       60,
                                       5.28
                                     ],
                                     [
                                       18,
                                       65,
                                       4.98
                                     ],
                                     [
                                       20,
                                       35,
                                       6.78
                                     ],
                                     [
                                       20,
                                       40,
                                       6.53
                                     ],
                                     [
                                       20,
                                       45,
                                       6.27
                                     ],
                                     [
                                       20,
                                       50,
                                       6
                                     ],
                                     [
                                       20,
                                       55,
                                       5.72
                                     ],
                                     [
                                       20,
                                       60,
                                       5.43
                                     ],
                                     [
                                       20,
                                       65,
                                       5.13
                                     ]
                                   ]
                                 }
                               ]
                              };
                              

                              Klar kann man das auch z.B. als Liniendiagramm darstellen, das klappt auch in Vis-2 ...aber das 3D scatter gefällt mir besser.
                              ac7ac9e7-b272-43b7-9b94-f39ff6a37fd2-image.png
                              Eingebunden in der Vis über ein HTML widget mit Inhalt:

                              http://192.168.178.9:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.0000_Visualisierung.Heizung.copnetz
                              

                              Hast Du eine Idee warum das in Vis-2 (vis nicht getestet) nicht angezeigt wird?
                              Danke vorab

                              jrbwh 2 Replies Last reply Reply Quote 1
                              • SMS
                                SMS last edited by

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

                                @sms Ich habe das Skript mal als Text in die Anleitung eingefügt. Das ist leichter verständlich. Der State chartWeekly enthält die Definition des Charts. Das habe ich auf Basis eines Beispiels von den Apache Echart Seiten erstellt - wie ich weiter oben erläutert habe. Wenn das Chart anders aussehen soll, musst Du diesen State ändern.

                                Für ein Daily Chart:

                                • chartWeekly nach chartDaily kopieren und ggf. anpassen

                                Ich scheitere irgendwie schon hierbei. Ich muss doch hier auf kopieren:
                                8f503374-3928-4173-b090-299eaa5b7d50-grafik.png
                                aber wo einfügen?

                                • tibberDaily anlegen und die richtigen Daten reinkopieren

                                Einfach hierüber anlegen?
                                a10c65b6-5782-4195-8ea2-c3e3346fb556-grafik.png

                                • Im Skript die ersten 3 Konstanten kopieren und anpassen
                                • den Funktionsaufruf evalTibberData() (Zeile 9) kopieren und anpassen
                                • die Funktion on() kopieren und anpassen

                                Mal schauen ob ich das hinbekomme.

                                jrbwh 1 Reply Last reply Reply Quote 0
                                • jrbwh
                                  jrbwh @UlliJ last edited by jrbwh

                                  @ullij Das ist ziemlich seltsam. Es gibt Beispiele mit scatter3D, wenn ich aber in die Docs schaue bei series.type wird da kein scatter3D aufgelistet.
                                  Und der Browser meldet in der Konsole "[ECharts] Unknown series scatter3D" beim Versuch, das Chart darzustellen.
                                  Hab noch keine Idee, was da los ist.

                                  1 Reply Last reply Reply Quote 0
                                  • jrbwh
                                    jrbwh @SMS last edited by Homoran

                                    @sms Ja, das meine ich. Schau mal hier (https://www.youtube.com/@haus_automation), da gibt es eine hervorragende Tutorial-Reihe zum ioBroker.

                                    SMS 1 Reply Last reply Reply Quote 0
                                    • jrbwh
                                      jrbwh @UlliJ last edited by

                                      @ullij Hab eine Spur. Schaut man sich den "full code" im Beispiel von Apache ECharts an, steht da ein "import 'echarts-gl';". Das wird von flexcharts nicht importiert.
                                      Muss ich mir näher anschauen.

                                      U 1 Reply Last reply Reply Quote 0
                                      • U
                                        UlliJ @jrbwh last edited by

                                        @jrbwh
                                        top, danke soweit schon mal.
                                        Ich hatte das Chart auch mal als HTML von Apache echarts runter geladen und da blieb sie lokal im Browser weiss.
                                        Im Html code waren dann verschiedene scripte auskommentiert. Eine davon bezieht sich auf "echarts-gl". Wenn ich das aktiviere wird das Chart im Browser angezeigt

                                        jrbwh 1 Reply Last reply Reply Quote 0
                                        • jrbwh
                                          jrbwh @UlliJ last edited by

                                          @ullij Ja, daran liegt es. Wenn ich 'echarts-gl' zusätzlich importiere, funktioniert es:
                                          b86c513c-5fb3-4d17-b7be-68cdd3a80a4c-image.png

                                          Habe gleich mal ein Issue angelegt.

                                          Bin diese Woche unterwegs. Werde das am WE oder nächste Woche einbauen und ein Release machen.

                                          U L 2 Replies Last reply Reply Quote 0
                                          • U
                                            UlliJ @jrbwh last edited by

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

                                            Werde das am WE oder nächste Woche einbauen und ein Release machen.

                                            Super, danke und gute Reise

                                            jrbwh 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.1k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            chart charts diagramme echarts visualisierung visualization
                                            18
                                            231
                                            20745
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo