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 @jrbwh last edited by

      @jrbwh JA, vielen Dank dafür!

      Wo kann ich denn die Balkenfarbe ändern?
      Das hier ändert mir nur die seitlichen Achsen:

      xAxis: [{ type: "category", axisTick: { alignWithLabel: true }, data: []}],
                          yAxis: [{ type: "value", position: "left",  alignTicks: true, axisLine: { show: true, lineStyle: { color: "#5470C6" }}, axisLabel: { formatter: "{value} kWh" }},
                                  { type: "value", position: "right", alignTicks: true, axisLine: { show: true, lineStyle: { color: "#91CC75" }}, axisLabel: { formatter: "{value} €" }}],
                          series: [{ name: "Consumption", type: "bar", yAxisIndex: 0, data: []},
                                   { name: "Cost",        type: "bar", yAxisIndex: 1, data: []}]
      

      Die Schriftfarbe müsste ich auch ändern, da ich einen dunklen Hintergrund habe. Eine Veränderung hier ändert abernichts:

      } else {
              console.log('Invalid chart type >>'+myChart+'<<');
              callback({title: { left: "center", textStyle: { color: "#ff0000" }, text: "INVALID
      
      jrbwh 1 Reply Last reply Reply Quote 0
      • jrbwh
        jrbwh @SMS last edited by

        @sms Wenn Du die Farben der Balken ändern möchtest, musst auch in deren Definition was ändern. Z.B. so:

                            series: [{ name: "Consumption", type: "bar", color: "#ff0000", yAxisIndex: 0, data: []},
                                     { name: "Cost",        type: "bar", color: "#00ff00", yAxisIndex: 1, data: []}]
        

        Der "else"-Zweig sorgt nur dafür, dass eine Fehlermeldung angezeigt wird, wenn Du einen ungültigen Chart-Type anforderst, z.B. mit &chart=Käse. Das hat mit dem eigentlichen Chart überhaupt nichts zu tun.
        Generell solltest Du - wie auch schon von @legro empfohlen - versuchen, zu verstehen was du tust. Da helfen Readme, Dokus, Tutorials, Youtube-Videos wirklich weiter. Probier's mal!

        Die Referenz zu Chart-Definitionen findest Du übrigens hier. Wenn Du da die Option "series" aufklappst, findest Du den Parameter "color".

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

          @jrbwh Script funktioniert super! Gefällt mir sehr gut 🙂 Mal schauen, wie ich das in meiner VIS einbauen kann.

          Kleiner Verbesserungsvorschlag:
          Statt die 4 einzelnen DPs im Script eintragen zu müssen könnte man eine Variable mit der HomeID machen und die 4 anderen DPs daraus automatisch erzeugen.

          Und blöde Frage: Werden die Charts automatisch aktualisiert? Ich sehe im Scrips nichts, aber meine JS Fähigkeiten sind "limitiert" 😉

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

            @merlin123 Bei mir nur wenn ich die Seite aktualisiere

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

              @merlin123 Das ist eine gute Idee. Die DPs sehen so aus:

              tibberLink.0.Homes.xxx.Consumption.jsonHourly
              tibberLink.0.Homes.xxx.Consumption.jsonDaily
              tibberLink.0.Homes.xxx.Consumption.jsonWeekly
              tibberLink.0.Homes.xxx.Consumption.jsonMonthly
              

              Ist das korrekt? Man könnte also tibberLink.0.Homes.xxx.Consumption also Konstante machen.

              Werden die Charts automatisch aktualisiert?

              Nein. Das gibt das Konzept nicht her. Wie ich auch in der Beschreibung geschrieben habe:
              "Das Chart kann per Hand oder regelmäßig mit der Option refresh (siehe Readme) neu geladen werden. Oder über entsprechende Einstellungen des iFrames."

              Mit &refresh=30 wird automatisch alle 30 Sekunden aktualisiert. Oder Du konfigurierst den iFrame so, dass regelmäßig aktualisiert wird.

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

                @jrbwh Jup... sehen bei mir auch so aus:

                const IDS = { hourly:  'tibberlink.0.Homes.xxx.Consumption.jsonHourly',  // hourly data
                              daily:   'tibberlink.0.Homes.xxx.Consumption.jsonDaily',  // daily data
                              weekly:  'tibberlink.0.Homes.xxx.Consumption.jsonWeekly',  // weekly data
                              monthly: 'tibberlink.0.Homes.xxx.Consumption.jsonMonthly'   // monthly data
                            };
                

                Aktualisierung:
                Das hab ich überlesen.
                Wenn die aber beim Laden des Frames aktualisiert werden, reicht mir das auch 🙂

                jrbwh M-A Hueb 2 Replies Last reply Reply Quote 0
                • jrbwh
                  jrbwh @Merlin123 last edited by

                  @merlin123 Gut. Hier mal ein Skript zum Testen:

                  //
                  // Create chart for Tibber data. To be used with flexcharts.
                  //
                  // Sample http request for hourly data chart:
                  // http://localhost:8082/flexcharts/echarts.html?source=script&message=tibber&chart=hourly
                  //
                  
                  // Replace 'MY-TOKEN' with your own token:
                  const ID_TIBBER = 'tibberLink.0.Homes.MY-TOKEN.Consumption';
                  
                  const IDS = { hourly:  '.jsonHourly',  // hourly data
                                daily:   '.jsonDaily',   // daily data
                                weekly:  '.jsonWeekly',  // weekly data
                                monthly: '.jsonMonthly'  // monthly data
                              };
                  
                  onMessage('tibber', (httpParams, callback) => {
                      // Use hourly data in case of invalid chart type
                      const id = (httpParams.chart && httpParams.chart in IDS ? ID_TIBBER+IDS[httpParams.chart] : ID_TIBBER+IDS['hourly']);
                      if (existsState(id)) { 
                          evalTibberData(httpParams.chart, id, result => callback(result));
                      } else {
                          console.log('Requested state is not available >>'+id+'<<');
                          callback({title: { left: "center", textStyle: { color: "#ff0000" }, text: "REQUESTED STATE IS NOT AVAILABLE: >>" + id +"<<" }});
                      }
                  });
                  
                  function evalTibberData(myChart, id, callback) {
                      const tibber = JSON.parse(getState(id).val);  // Read tibber data
                      const chart = {
                                      tooltip: { trigger: "axis", axisPointer: { type: "cross" }},
                                      legend: { show: true, orient: "horizontal", left: "center", top: 25 },
                                      title: { left: "center", text: "Tibber " },
                                      grid: { right: "20%" },
                                      toolbox: { feature: { dataView: { show: true, readOnly: false }, restore: { show: true }, saveAsImage: { show: true }}},
                                      xAxis: [{ type: "category", axisTick: { alignWithLabel: true }, data: []}],
                                      yAxis: [{ type: "value", position: "left",  alignTicks: true, axisLine: { show: true, lineStyle: { color: "#5470C6" }}, axisLabel: { formatter: "{value} kWh" }},
                                              { type: "value", position: "right", alignTicks: true, axisLine: { show: true, lineStyle: { color: "#91CC75" }}, axisLabel: { formatter: "{value} €" }}],
                                      series: [{ name: "Consumption", type: "bar", yAxisIndex: 0, data: []},
                                               { name: "Cost",        type: "bar", yAxisIndex: 1, data: []}]
                                     };
                      const xAxis  = [];
                      const yAxis0 = [];
                      const yAxis1 = [];
                      for (const data of Object.values(tibber)) {
                          const isHourly = (myChart == 'hourly');  // Hourly data?
                          const xValue = (isHourly ? new Date(data.from).toLocaleTimeString() : new Date(data.from).toLocaleDateString());
                          xAxis.push(xValue);
                          yAxis0.push((data.consumption ? data.consumption.toFixed(2) : 0));  // push 0 on null values
                          yAxis1.push((data.cost ? data.cost.toFixed(2) : 0));                // push 0 on null values
                      }
                      chart.xAxis[0].data  = xAxis;       // Set chart x-axis data
                      chart.series[0].data = yAxis0;      // Set chart y-values consumption
                      chart.series[1].data = yAxis1;      // Set chart y-values cost
                      chart.title.text += myChart;             // Add type of chart to title
                      console.log('Evaluation of tibber '+myChart+' data done.');
                      callback(chart);
                  }
                  
                  Merlin123 1 Reply Last reply Reply Quote 0
                  • Merlin123
                    Merlin123 @jrbwh last edited by

                    @jrbwh nope...

                    Screenshot 2025-02-02 164451.png

                    der Name des DPs sieht aber richtig aus....

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

                      @merlin123 Ups, es muss tibberlink heißen und nicht tibberLink (mit großem L). Bitte nochmal mit kleinem l probieren.

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

                        @jrbwh Geht 🙂 Das hab ich jetzt auch nicht gesehen 😛

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

                          @merlin123 Hab auch eine Weile gebraucht. Aber es musste ein Schreibfehler sein.

                          Werde gleich den Beitrag unter "Discussions" entsprechend anpassen.

                          Danke!

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

                            @jrbwh Gern.... Bei Hourly macht das Format der Zeit keinen Sinn... Minuten und Sekunden braucht man da nicht. Kann man das anpassen?

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

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

                              Bei Hourly macht das Format der Zeit keinen Sinn

                              Stimmt. Hab ich auch gleich geändert. Minuten finde ich aber schon sinnvoll. Kannst Du leicht entfernen, wenn Du den Eintrag , minute: '2-digit' löscht.

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

                                @jrbwh Funktioniert 🙂 Minuten sind optisch schöner, stimmt

                                Muss jetzt nur die Änderungen in meinem angepassten Script als nachziehen 😄 Hab die Farben angepasst, da ich keinen weißen Hintergrund habe.

                                Mir ist noch was aufgefallen, keine Ahnung wo man das anpasst:
                                Es wird z,B. "1,234.56 kWh" angezeigt. Im Deutschen müsste das aber "1.234,56" heißen.

                                Idee:
                                Farben für die einzelnen Sachen als Variable am Anfang deklarieren...
                                Aber das ist eher der Goldrand, den man nicht unbedingt braucht 😉

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

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

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

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

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

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

                                    @jrbwh Muss mal schauen, was ich da noch anpasse, aktuell passt es erstmal.
                                    Weißt zu zufällig, wie man die Darstellung der Tausender anpassen kann?

                                    jrbwh 1 Reply Last reply Reply Quote 0
                                    • icebear
                                      icebear last edited by

                                      Was mir noch nicht so ganz klar ist, wie bekomme ich den die Daten aus den DP's z.B. Heizung (VLT, AT, RLT) in ein Array so das ich es dann als Datenreihe im Fexchart verarbeiten kann?

                                      Also ich hab die drei DP's in denen die Werte stehen und die auch in InfluxDB gespeichert werden. So wie ich es Vertsanden hab müssen die ja irgendwie in ein Daten Array kommen z.B. Tägliche, Wöchentlich oder Monatliche Werte. Wie stell ich das an.

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

                                        @merlin123 Meinst Du die Darstellung im Tooltip? Das geht, ist aber nicht ganz einfach. Schau Dir mal dieses Issue an und den Abschnitt zu "Functions" im Readme an.

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

                                          @icebear Das geht nur über ein Skript (Blockly oder Javascript). Schau Dir mal die Templates (siehe im Readme) an, oder z.B. diesen oder diesen Beitrag in Discussions.

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

                                            @jrbwh Danke für den Link. Muss ich mir heute Mittag mal anschauen.
                                            Hab hier noch was gefunden. Muss ich mal testen. Da hatte jemand das gleiche Problem

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            519
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            chart charts diagramme echarts visualisierung visualization
                                            18
                                            231
                                            20795
                                            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