Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. BooBär

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    B
    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 1
    • Best 0
    • Groups 0

    BooBär

    @BooBär

    0
    Reputation
    3
    Profile views
    1
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    BooBär Follow

    Latest posts made by BooBär

    • RE: Material Design Widgets: JSON Chart Widget

      Hallo zusammen,

      ich würde gern das JSON Chart Widget dazu verwenden, um diverse Verbrauchswerte meiner Viessmann-Heizung auf einen Blick zu visualisieren.

      Die Verrbauchs- und Ertragswerte der Heizung rufe ich mit Hilfe der viessmannapi Instanz ab. Die Werte werden als Zeichenkette (String) für die letzten 7 Tage abgerufen - siehe Screenshot.
      2021-02-17 12_07_21-Window.jpg

      Da ich vom entwickeln keine Ahnung habe, habe ich mithilfe eurer Forenbeiträge folgendes Skript "zusammenkopiert" um den JSON-String zu erzeugen.

      let chart = {};
      let values = [];
      let axisLabels = [];
      
          var state_name = 'viessmannapi.0.heating.';
          var GasConsumptionHeating = getState(state_name + 'gas.consumption.heating.day').val;
          var GasConsumptionDHW = getState(state_name + 'gas.consumption.dhw.day').val;
          var SolarPowerProduction = getState(state_name + 'solar.power.production.day').val;
        
          console.log(GasConsumptionHeating);
          console.log(GasConsumptionDHW);
          console.log(SolarPowerProduction);
      
          var jetzt = new Date();
          var heute = new Date(jetzt.getTime());
          var heuteMinus1 = new Date(jetzt.getTime()-(1000 * 60 * 60 * 24 * 1));
          var heuteMinus2 = new Date(jetzt.getTime()-(1000 * 60 * 60 * 24 * 2));
          var heuteMinus3 = new Date(jetzt.getTime()-(1000 * 60 * 60 * 24 * 3));
          var heuteMinus4 = new Date(jetzt.getTime()-(1000 * 60 * 60 * 24 * 4));
          var heuteMinus5 = new Date(jetzt.getTime()-(1000 * 60 * 60 * 24 * 5));
          var heuteMinus6 = new Date(jetzt.getTime()-(1000 * 60 * 60 * 24 * 6));
          var heuteMinus7 = new Date(jetzt.getTime()-(1000 * 60 * 60 * 24 * 7));
       
      chart = {
          axisLabels: [heute.getDate()+ "." + (heute.getMonth()+1), 
                       heuteMinus1.getDate()+ '.' + (heuteMinus1.getMonth()+1), 
                       heuteMinus2.getDate()+ "." + (heuteMinus2.getMonth()+1), 
                       heuteMinus3.getDate()+ "." + (heuteMinus3.getMonth()+1), 
                       heuteMinus4.getDate()+ "." + (heuteMinus4.getMonth()+1), 
                       heuteMinus5.getDate()+ "." + (heuteMinus5.getMonth()+1), 
                       heuteMinus6.getDate()+ "." + (heuteMinus6.getMonth()+1), 
                       heuteMinus7.getDate()+ "." + (heuteMinus7.getMonth()+1) 
                      ],
          graphs: [
              {
              data: GasConsumptionHeating,
              //data: [39, 77, 80, 99, 110, 97, 84, 91],
              type: 'bar',
              displayOrder: 1,
              barStackId: 1,
              barIsStacked: true,
              color: 'orange',
              legendText: "Heizung",
      		tooltip_MaxDigits: 1,
      		tooltip_AppendText: " kWh",
              datalabel_color: 'red',
              yAxis_id: 1,
              yAxis_show: "true",
              yAxis_appendix: " kWh",
              xAxis_timeFormats: {
                  millisecond: "H:mm:ss.SSS",
                  second: "H:mm:ss",
                  minute: "H:mm",
                  hour: "dd.[\\n]H:mm",
                  day: "dd[\\n]DD.MM",
                  week: "dd[\\n]DD.MM",
                  month: "MMM[\\n]YYYY",
                  quarter: "[Q]Q - YYYY",
                  year: "YYYY"
              }
          },
          {
              data: (GasConsumptionDHW),
              //data: [6, 6, 2, 2, 2, 8, 6, 11],
              type: 'bar',
              displayOrder: 1,
              barStackId: 1,
              barIsStacked: true,
              //color: 'blue',
              legendText: "Warmwasser", 
              yAxis_id: 1, 
              tooltip_AppendText: " kWh" 
          },
          {
              data: SolarPowerProduction,
              //data: [13, 0, 17, 20, 17, 13, 0, 0],
              type: 'bar',
              displayOrder: 1,
              barStackId: 2,
              barIsStacked: true,
              color: 'red',
              legendText: "Solarthermie", 
              yAxis_id: 1, 
              tooltip_AppendText: " kWh" 
          }
          ] 
      }
       
      setState('javascript.0.test3', JSON.stringify(chart), true);
      

      Leider werden bei der Ausgabe die Variablen immer in Anführungszeichen ausgegeben was dann von dem JSON Chart Widget nicht interpretiert werden kann.

      {"axisLabels":["17.2","16.2","15.2","14.2","13.2","12.2","11.2","10.2"],"graphs":[{"data":"[29,62,77,80,99,110,97,84]","type":"bar","displayOrder":1,"barStackId":1,"barIsStacked":true,"color":"orange","legendText":"Heizung","tooltip_MaxDigits":1,"tooltip_AppendText":" kWh","datalabel_color":"red","yAxis_id":1,"yAxis_show":"true","yAxis_appendix":" kWh","xAxis_timeFormats":{"millisecond":"H:mm:ss.SSS","second":"H:mm:ss","minute":"H:mm","hour":"dd.[\\n]H:mm","day":"dd[\\n]DD.MM","week":"dd[\\n]DD.MM","month":"MMM[\\n]YYYY","quarter":"[Q]Q - YYYY","year":"YYYY"}},{"data":"[0,12,6,2,2,2,8,6]","type":"bar","displayOrder":1,"barStackId":1,"barIsStacked":true,"legendText":"Warmwasser","yAxis_id":1,"tooltip_AppendText":" kWh"},{"data":"[4.67,13.474,0,17.137,20.263,16.924,13.206,0]","type":"bar","displayOrder":1,"barStackId":2,"barIsStacked":true,"color":"red","legendText":"Solarthermie","yAxis_id":1,"tooltip_AppendText":" kWh"}]}
      

      Könnt Ihr mir hier unter die Arme greifen? Vielen lieben Dank vorab und Hut ab für eure tolle Arbeit!

      Viele Grüße

      posted in Visualisierung
      B
      BooBär
    Community
    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
    The ioBroker Community 2014-2023
    logo