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

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Material Design Widgets: JSON Chart Widget

NEWS

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

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

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

Material Design Widgets: JSON Chart Widget

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
191 Beiträge 37 Kommentatoren 38.9k Aufrufe 35 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.
  • M Marc9025

    @frank2604
    Hallo Frank,
    erstmal vielen dank für deine Mühe. Ich habe bis jetzt etwas mit Grafana gespielt im zusammenhang mit einer Influx DB.
    Ich bin aber nicht wirklich glücklich über die Einbindung in VIS. Du hast geschrieben das es eine Browser-GUI vom Influx DB gibt. Wie kann man diese Aufrufen ? Ich finde dazu nichts bei Google. Ist das ein extra Programm was man installieren muss ?
    Könnte man mit deiner Methode auch "durchblättern" also ein Tag vor oder zurück. (So wie z.B bei SMA wo man die Verschieden Tage sich anzeigen lassen kann)
    Marc

    frank2604F Offline
    frank2604F Offline
    frank2604
    schrieb am zuletzt editiert von
    #97

    @marc9025

    Hallo Marc,
    zur Influx GUI: Voraussetzung ist, dass Du Influx 2.x verwendest. Aufruf der GUI im Browser mit der IP der Rechners, auf dem die Datenbank läuft und dem Port 8086. Also z.B. 192.168.1.123:8086

    Zum Durchblättern: Ja, das sollte gehen:

    Du könntest Dir in Deinem VIS-View Buttons einbauen z.B. den 'Button Addition' oder den 'Icon Button Addition' aus den Material Design Widgets. Damit kannst Du einen eigenen Datenpunkt mit jedem Tastendruck die im Widget hinterlegte Intervalle erhöhen oder mindern.

    Das Skript, welches das Json für die Grafik erzeugt, muss dann nicht mehr nur durch den CRON-Job getriggert werden, sondern auch bei einer Wertänderung des zuvor genannten Datenpunktes:

    on('0_userdata.0.Stromchart_Zeitversatz', function (obj) {
         refresh();
    });
    

    Außerdem musst Du im Skriptteil, in welchem die fluxQuery erzeugt wird, nun bei der rage die start und zusätzlich die stop Zeit mit einer Variablen setzen:

    let datenpunkte = [
            {
                fluxQuery: 
                    'from(bucket: "iobroker") \
                        |> range(start: ' + start_PY + ', stop: ' + stop_PY + ') \
                        |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                        |> drop(columns: ["_field", "ack", "from", "q"]) \
                        |> aggregateWindow(every: 1mo, fn: sum, createEmpty: false) \
                        |> timeShift(duration: -1mo) \
                        |> sort(columns: ["_time"], desc: false) \
                        '
    

    Um die Zeitberechnungen für die Variablen durchzuführen, helfen die zusätzlichen NPM-Module der moment.js-Library. Diese musst Du einmal in der Java-Skript-Instanz hinzufügen (einfach eintippen):

    2022-04-23_09-49-30.png

    Und Im Skript selbst muss das Modul gleich am Anfang geladen werden:

    // Import NPM Modul
     const moment = require("moment");
     moment.locale("de")
     
    

    Ich habe das z.B. hier für meine Grafik mit den Werten für Vorjahr/Aktuelles Jahr verwendet. Ich packe mal das gesamte Skript hier rein. Das sollte Dir zusammen mit der Doku von moment.js als Beispiel zur Berechnung der start/stop Zeit helfen - ab Zeile 58 findest Du die Zeitberechnung:

    
    // Import NPM Modul
     const moment = require("moment");
     moment.locale("de")
     
     // #################### Auslöser (Trigger), die das JSON-Objekt neu erzeugen ####################
    
    // Zeitgesteuert (jede 5. Sekunde in der 1. Minute einer jeden Stunde, jeden Tag)
    schedule("5 1 * * * *", async function () {
        refresh();
    });
    
    // Bei Änderung eines Datenpunktes
    // Hier bei Umschaltung zwischen Light/Dark-Mode, falls man im JSON Farben-Properties setzten möchte
    on('vis-materialdesign.0.colors.darkTheme', function (obj) {
         refresh();
    });
    
    // Beim Speichern oder Starten des Skriptes
    refresh();
    
    // Gesamter Skriptcode ist in der Funktion refresh() eingebettet. Diese Funktion wird über die Trigger oben aufgerufen
    function refresh() {
    
        // #################### Skript-Einstellungen ####################
    
        // History Instanz die verwendet werden soll
        let historyInstance = 'influxdb.0';
    
        // Ziel-Datenpunkt in der Objektstruktur für das JSON vom Typ "string", auf den im Widget verwiesen wird. Muss zuvor von Hand angelegt werden
        let targetDP = '0_userdata.0.VIS.Charts.Strom.JSON.Solarproduktion_kWh_y';
    
        // Debug-Mode (true/false)
        // Gibt bei true in der Skript-Console und im ioBroker-Protokoll Inhalte von Verarbeitungsschritten aus (z.B. das Ergebnis der Flux-Abfrage und das fertige JSON)
        let debug = false;
    
        // Hier optional Farben, Schriften und Schriftgrößen aus den Material-Design-Widget- oder anderen eigenen Datenpunkten holen, falls solche JSON-Chart-Properties gesetzt werden sollen
    
        // Optional den Datenpunkt abfragen, mit dem zwischen Light/Dark-Theme umgeschaltet wird
        let mdw_darkTheme = getState('vis-materialdesign.0.colors.darkTheme').val;
    
        // Variable(n) mit Farbcodes aus Datenpunkten in Abhängigkeit von Light/Dark-Theme füllen, die unten in den Chart-Einstellungen verwendet werden sollen
        let mdw_barBorderColor_ACT      = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Solarproduktion_Linie_und_Rahmen').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Wallboxen').val;
        let mdw_color_ACT               = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Solarproduktion_Fuellung').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Hausverbrauch').val;
        let mdw_barBorderColor_PY       = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Vorjahreswerte_Linie_und_Rahmen').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Wallboxen').val;
        let mdw_color_PY                = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Vorjahreswerte_Fuellung').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Hausverbrauch').val;
        let mdw_yAxis_gridLines_color   = (mdw_darkTheme) ? getState('vis-materialdesign.0.colors.dark.charts.y_axis_gridlines').val : getState('vis-materialdesign.0.colors.light.charts.y_axis_gridlines').val;
    
        // Variable(n) mit Farbcodes aus Datenpunkten
        let mdw_datalabel_fontFamily    = getState('vis-materialdesign.0.fonts.charts.value').val;
        let mdw_datalabel_fontSize      = getState('vis-materialdesign.0.fontSizes.charts.value').val;
    
        // Variable für yAxis_max aus einem Datenpunkt, der den Max-Wert aller auf einer View befindlichen Charts ermittelt zzgl. Zuschlag wegen Balkenbeschriftung Top
        let common_yAxis_max            = getState('0_userdata.0.VIS.Charts.Strom.Y-Achsen_max.Energie_y').val;
        let common_yAxis_max_Zuschlag   = getState('0_userdata.0.VIS.Charts.Strom.Y-Achsen_max.Energie_y_Zuschlag').val;
        common_yAxis_max = common_yAxis_max + (common_yAxis_max * common_yAxis_max_Zuschlag/100);
    
        // Berechnung start und end aktuelles Jahr
        let startVersatzWert_ACT = 0
        let startVersatzEinhet_ACT = 'year'
        let stopVersatzWert_ACT = 1
        let stopVersatzEinhet_ACT = 'year'
        let today = moment()
        let start_ACT = today.clone().add(startVersatzWert_ACT, startVersatzEinhet_ACT).startOf(startVersatzEinhet_ACT).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
        let stop_ACT = today.clone().add(stopVersatzWert_ACT, stopVersatzEinhet_ACT).startOf(stopVersatzEinhet_ACT).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
    
        if (debug) console.log("[range ACT]: start " + start_ACT + " stop " + stop_ACT);
    
        // Berechnung start und end letztes Jahr
        let startVersatzWert_PY = -1
        let startVersatzEinhet_PY = 'year'
        let stopVersatzWert_PY = 0
        let stopVersatzEinhet_PY = 'year'
    
        let start_PY = today.clone().add(startVersatzWert_PY, startVersatzEinhet_PY).startOf(startVersatzEinhet_PY).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
        let stop_PY = today.clone().add(stopVersatzWert_PY, stopVersatzEinhet_PY).startOf(stopVersatzEinhet_PY).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
    
        if (debug) console.log("[range PY]: start " + start_PY + " stop " + stop_PY);
    
    
        // Gemeinsam verwendete Chart-Einstellungen, Details siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart
        // Hinweis: Weitere Einstelloptionen zu Legende, x-Achse etc. befinden sich in den Eigenschaften des Widgets!
    
        let globalGraphSettings = {
            line_pointSize: 0,
            barBorderWidth: 1,
            datalabel_fontFamily: mdw_datalabel_fontFamily,
            datalabel_minDigits: 0,
            datalabel_maxDigits: 0,
            xAxis_bounds: 'ticks',
            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",
                quarter: "[Q]Q - YYYY",
                year: "YYYY"
            }
        }
    
        // InfluxDB-Flux-Query(s), die verwendet werden sollen und die zugehörigen individuellen Chart-Einstellungen
        
        // Die hier dargestellten Flux-Querys sind aus einer InfluxDB 2.x mit den Adaptereinstellungen 'Tags anstelle Felder für Metadaten' (Influx-Adapter -> Experteneinstellungen)
        // Bitte unbedingt die Infos dazu lesen, bevor die Eigenschaft umgestellt wird: https://github.com/ioBroker/ioBroker.influxdb/blob/master/README.md#Store-metadata-information-as-tags-instead-of-fields
    
        // Die Abfragen können sehr gut mit dem InfluxDB-OSS (GUI) erstellt werden. Wenn die dort angezeigten Daten im 'View Raw Data'-Modus hinsichtlich _value und _time dem Gewünschten entsprechen,
        // einfach die Query hierher kopieren und noch hinter jede Zeile ein '\' für den Zeilenumbruch im String setzen.
    
        // |> range(start: ' + start + ', stop: ' + stop + ') \
    
        let datenpunkte = [
            {
                fluxQuery: 
                    'from(bucket: "iobroker") \
                        |> range(start: ' + start_PY + ', stop: ' + stop_PY + ') \
                        |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                        |> drop(columns: ["_field", "ack", "from", "q"]) \
                        |> aggregateWindow(every: 1mo, fn: sum, createEmpty: false) \
                        |> timeShift(duration: -1mo) \
                        |> sort(columns: ["_time"], desc: false) \
                        '
                        ,       
                graphSettings: {
                    type: 'bar',
                    color: mdw_color_PY,
                    barBorderColor: mdw_barBorderColor_PY,
                    legendText: 'Solarproduktion letzes Jahr',
                    yAxis_id: 0,
                    yAxis_show: true,
                    yAxis_position: 'left',
                    yAxis_gridLines_border_show: false,
                    yAxis_gridLines_ticks_show: false,
                    yAxis_gridLines_show: true,
                    yAxis_gridLines_color: mdw_yAxis_gridLines_color,
                    yAxis_min: 0,
                    yAxis_max: common_yAxis_max,
                    yAxis_step: 500,
                    datalabel_show: true,
                    datalabel_fontSize: 8,
                    datalabel_color: mdw_barBorderColor_PY
                } 
            },
            {
                fluxQuery: 
                    'from(bucket: "iobroker") \
                        |> range(start: ' + start_ACT + ', stop: ' + stop_ACT + ') \
                        |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                        |> drop(columns: ["_field", "ack", "from", "q"]) \
                        |> aggregateWindow(every: 1mo, fn: sum, createEmpty: false) \
                        |> timeShift(duration: -1mo) \
                        |> timeShift(duration: -1y) \
                        |> sort(columns: ["_time"], desc: false) \
                        '
                        ,       
                graphSettings: {
                    type: 'bar',
                    color: mdw_color_ACT,
                    barBorderColor: mdw_barBorderColor_ACT,
                    legendText: 'Solarproduktion dieses Jahr',
                    yAxis_id: 0,
                    yAxis_show: false,
                    yAxis_position: 'left',
                    yAxis_gridLines_border_show: false,
                    yAxis_gridLines_ticks_show: false,
                    yAxis_gridLines_show: true,
                    yAxis_gridLines_color: mdw_yAxis_gridLines_color,
                    yAxis_min: 0,
                    yAxis_max: common_yAxis_max,
                    yAxis_step: 500,
                    datalabel_show: true,
                    datalabel_fontSize: mdw_datalabel_fontSize,
                    datalabel_color: mdw_barBorderColor_ACT
                } 
            } // <= Zwischen mehreren Datenpunkten hier das Komma nicht vergessen!
            
        ]
    
    
        // #################### Programmablauf (Erzeugen des JSON) ####################
    
        refreshData();
    
        //Hauptfunktion
        function refreshData() {
        try {
            let graphs = [];
    
            // In dieser Schleife werden alle oben definierten Datenpunkte durchlaufen und die entstehenden JSON-Bausteine der Variable 'graphs' angehangen
            for (const datenpunkt of datenpunkte) {
    
                let historyData = getHistoryGraphData(historyInstance, datenpunkt.fluxQuery, datenpunkt.graphSettings);
                
                if (historyData) {
                    graphs.push(historyData);
                }
    
                // Das Result von 'graphs' in den Zieldatenpunkt schreiben 
                Promise.all(graphs).then((result) => {
                    if (debug) console.log("[refreshData]: Final JSON " + JSON.stringify({ graphs: result }));
                    setState(targetDP, JSON.stringify({ graphs: result }), true);
                });
            }
        } catch (err) {
            console.error(`[refreshData] error: ${err.message}, stack: ${err.stack}`);
        }
        }
    
        // Unterfunktion zum Auslesen der Daten aus InfluxDB
        function getHistoryGraphData(historyInstance, fluxQuery, graphSettings) {
            try {
                let graph = Object.assign({ ...graphSettings }, globalGraphSettings);
                return new Promise((resolve, reject) => {
                    // Hier wird für jeden Datenpunkt die Flux-Query ausgeführt und die Rohdaten in das Objekt 'query' geschrieben
                    if (debug) console.log('[getHistoryGraphData]: fluxQuery ' + fluxQuery);
                    sendTo
                        (historyInstance, 'query',
                            fluxQuery,
                                function (query) {
                                    if (debug) console.log('[getHistoryGraphData]: Raw result from fluxQuery (query.result) ' + JSON.stringify(query.result));
                                    // Hier werden aus den Rohdaten der Flux-Query Zeitstempel und Werte extrahiert und in das benötigte Array-Format übergeben
                                    // [{"t": 1640624405000,"y": 1.4536},{"t": 1640649605000,"y": 1.4665}, ...]
                                    graph.data = query.result[0].map(elm => ({
                                        t: (elm.ts !== null && elm.ts !== undefined) ? elm.ts : null,
                                        y: (elm._value !== null && elm._value !== undefined && elm._value > 0.5) ? elm._value : null
                                    }));
    
                                    resolve(graph);
                                    if (debug) console.log("[getHistoryGraphData]: Result after map t: and y: (query.data) " + JSON.stringify(graph.data));
                                }
                        );
                    });
            } catch (ex) {
                console.error(`[getHistoryGraphData]: error: ${ex.message}, stack: ${ex.stack}`);
            }
        };
    
    }; // end [refresh]
    

    PS: Bei der Konzeption meiner VIS für das Zentrale Wandtablet habe ich auch zunächst überlegt etwas zum Durchblättern zu bauen, habe mich dann aber für 3 Ansichten entschieden, die mir eigentlich alle Daten anzeigen, die mich interessieren (alles noch "Under Construction"):

    Aktuelle Leistung mit Verlauf der letzen 24 Stunden:

    2022-04-23_10-08-59.png

    Energie der letzten 14 Tage:

    2022-04-23_10-09-28.png

    Energie/Euro laufendes Jahr mit Vergleich zum Vorjahr:

    2022-04-23_10-10-06.png

    Grüße

    Frank

    Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
    Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

    M M 2 Antworten Letzte Antwort
    0
    • frank2604F frank2604

      @marc9025

      Hallo Marc,
      zur Influx GUI: Voraussetzung ist, dass Du Influx 2.x verwendest. Aufruf der GUI im Browser mit der IP der Rechners, auf dem die Datenbank läuft und dem Port 8086. Also z.B. 192.168.1.123:8086

      Zum Durchblättern: Ja, das sollte gehen:

      Du könntest Dir in Deinem VIS-View Buttons einbauen z.B. den 'Button Addition' oder den 'Icon Button Addition' aus den Material Design Widgets. Damit kannst Du einen eigenen Datenpunkt mit jedem Tastendruck die im Widget hinterlegte Intervalle erhöhen oder mindern.

      Das Skript, welches das Json für die Grafik erzeugt, muss dann nicht mehr nur durch den CRON-Job getriggert werden, sondern auch bei einer Wertänderung des zuvor genannten Datenpunktes:

      on('0_userdata.0.Stromchart_Zeitversatz', function (obj) {
           refresh();
      });
      

      Außerdem musst Du im Skriptteil, in welchem die fluxQuery erzeugt wird, nun bei der rage die start und zusätzlich die stop Zeit mit einer Variablen setzen:

      let datenpunkte = [
              {
                  fluxQuery: 
                      'from(bucket: "iobroker") \
                          |> range(start: ' + start_PY + ', stop: ' + stop_PY + ') \
                          |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                          |> drop(columns: ["_field", "ack", "from", "q"]) \
                          |> aggregateWindow(every: 1mo, fn: sum, createEmpty: false) \
                          |> timeShift(duration: -1mo) \
                          |> sort(columns: ["_time"], desc: false) \
                          '
      

      Um die Zeitberechnungen für die Variablen durchzuführen, helfen die zusätzlichen NPM-Module der moment.js-Library. Diese musst Du einmal in der Java-Skript-Instanz hinzufügen (einfach eintippen):

      2022-04-23_09-49-30.png

      Und Im Skript selbst muss das Modul gleich am Anfang geladen werden:

      // Import NPM Modul
       const moment = require("moment");
       moment.locale("de")
       
      

      Ich habe das z.B. hier für meine Grafik mit den Werten für Vorjahr/Aktuelles Jahr verwendet. Ich packe mal das gesamte Skript hier rein. Das sollte Dir zusammen mit der Doku von moment.js als Beispiel zur Berechnung der start/stop Zeit helfen - ab Zeile 58 findest Du die Zeitberechnung:

      
      // Import NPM Modul
       const moment = require("moment");
       moment.locale("de")
       
       // #################### Auslöser (Trigger), die das JSON-Objekt neu erzeugen ####################
      
      // Zeitgesteuert (jede 5. Sekunde in der 1. Minute einer jeden Stunde, jeden Tag)
      schedule("5 1 * * * *", async function () {
          refresh();
      });
      
      // Bei Änderung eines Datenpunktes
      // Hier bei Umschaltung zwischen Light/Dark-Mode, falls man im JSON Farben-Properties setzten möchte
      on('vis-materialdesign.0.colors.darkTheme', function (obj) {
           refresh();
      });
      
      // Beim Speichern oder Starten des Skriptes
      refresh();
      
      // Gesamter Skriptcode ist in der Funktion refresh() eingebettet. Diese Funktion wird über die Trigger oben aufgerufen
      function refresh() {
      
          // #################### Skript-Einstellungen ####################
      
          // History Instanz die verwendet werden soll
          let historyInstance = 'influxdb.0';
      
          // Ziel-Datenpunkt in der Objektstruktur für das JSON vom Typ "string", auf den im Widget verwiesen wird. Muss zuvor von Hand angelegt werden
          let targetDP = '0_userdata.0.VIS.Charts.Strom.JSON.Solarproduktion_kWh_y';
      
          // Debug-Mode (true/false)
          // Gibt bei true in der Skript-Console und im ioBroker-Protokoll Inhalte von Verarbeitungsschritten aus (z.B. das Ergebnis der Flux-Abfrage und das fertige JSON)
          let debug = false;
      
          // Hier optional Farben, Schriften und Schriftgrößen aus den Material-Design-Widget- oder anderen eigenen Datenpunkten holen, falls solche JSON-Chart-Properties gesetzt werden sollen
      
          // Optional den Datenpunkt abfragen, mit dem zwischen Light/Dark-Theme umgeschaltet wird
          let mdw_darkTheme = getState('vis-materialdesign.0.colors.darkTheme').val;
      
          // Variable(n) mit Farbcodes aus Datenpunkten in Abhängigkeit von Light/Dark-Theme füllen, die unten in den Chart-Einstellungen verwendet werden sollen
          let mdw_barBorderColor_ACT      = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Solarproduktion_Linie_und_Rahmen').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Wallboxen').val;
          let mdw_color_ACT               = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Solarproduktion_Fuellung').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Hausverbrauch').val;
          let mdw_barBorderColor_PY       = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Vorjahreswerte_Linie_und_Rahmen').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Wallboxen').val;
          let mdw_color_PY                = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Charts.Strom.Farben.dark.Vorjahreswerte_Fuellung').val : getState('0_userdata.0.VIS.Charts.Strom.Farben.light.Hausverbrauch').val;
          let mdw_yAxis_gridLines_color   = (mdw_darkTheme) ? getState('vis-materialdesign.0.colors.dark.charts.y_axis_gridlines').val : getState('vis-materialdesign.0.colors.light.charts.y_axis_gridlines').val;
      
          // Variable(n) mit Farbcodes aus Datenpunkten
          let mdw_datalabel_fontFamily    = getState('vis-materialdesign.0.fonts.charts.value').val;
          let mdw_datalabel_fontSize      = getState('vis-materialdesign.0.fontSizes.charts.value').val;
      
          // Variable für yAxis_max aus einem Datenpunkt, der den Max-Wert aller auf einer View befindlichen Charts ermittelt zzgl. Zuschlag wegen Balkenbeschriftung Top
          let common_yAxis_max            = getState('0_userdata.0.VIS.Charts.Strom.Y-Achsen_max.Energie_y').val;
          let common_yAxis_max_Zuschlag   = getState('0_userdata.0.VIS.Charts.Strom.Y-Achsen_max.Energie_y_Zuschlag').val;
          common_yAxis_max = common_yAxis_max + (common_yAxis_max * common_yAxis_max_Zuschlag/100);
      
          // Berechnung start und end aktuelles Jahr
          let startVersatzWert_ACT = 0
          let startVersatzEinhet_ACT = 'year'
          let stopVersatzWert_ACT = 1
          let stopVersatzEinhet_ACT = 'year'
          let today = moment()
          let start_ACT = today.clone().add(startVersatzWert_ACT, startVersatzEinhet_ACT).startOf(startVersatzEinhet_ACT).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
          let stop_ACT = today.clone().add(stopVersatzWert_ACT, stopVersatzEinhet_ACT).startOf(stopVersatzEinhet_ACT).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
      
          if (debug) console.log("[range ACT]: start " + start_ACT + " stop " + stop_ACT);
      
          // Berechnung start und end letztes Jahr
          let startVersatzWert_PY = -1
          let startVersatzEinhet_PY = 'year'
          let stopVersatzWert_PY = 0
          let stopVersatzEinhet_PY = 'year'
      
          let start_PY = today.clone().add(startVersatzWert_PY, startVersatzEinhet_PY).startOf(startVersatzEinhet_PY).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
          let stop_PY = today.clone().add(stopVersatzWert_PY, stopVersatzEinhet_PY).startOf(stopVersatzEinhet_PY).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
      
          if (debug) console.log("[range PY]: start " + start_PY + " stop " + stop_PY);
      
      
          // Gemeinsam verwendete Chart-Einstellungen, Details siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart
          // Hinweis: Weitere Einstelloptionen zu Legende, x-Achse etc. befinden sich in den Eigenschaften des Widgets!
      
          let globalGraphSettings = {
              line_pointSize: 0,
              barBorderWidth: 1,
              datalabel_fontFamily: mdw_datalabel_fontFamily,
              datalabel_minDigits: 0,
              datalabel_maxDigits: 0,
              xAxis_bounds: 'ticks',
              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",
                  quarter: "[Q]Q - YYYY",
                  year: "YYYY"
              }
          }
      
          // InfluxDB-Flux-Query(s), die verwendet werden sollen und die zugehörigen individuellen Chart-Einstellungen
          
          // Die hier dargestellten Flux-Querys sind aus einer InfluxDB 2.x mit den Adaptereinstellungen 'Tags anstelle Felder für Metadaten' (Influx-Adapter -> Experteneinstellungen)
          // Bitte unbedingt die Infos dazu lesen, bevor die Eigenschaft umgestellt wird: https://github.com/ioBroker/ioBroker.influxdb/blob/master/README.md#Store-metadata-information-as-tags-instead-of-fields
      
          // Die Abfragen können sehr gut mit dem InfluxDB-OSS (GUI) erstellt werden. Wenn die dort angezeigten Daten im 'View Raw Data'-Modus hinsichtlich _value und _time dem Gewünschten entsprechen,
          // einfach die Query hierher kopieren und noch hinter jede Zeile ein '\' für den Zeilenumbruch im String setzen.
      
          // |> range(start: ' + start + ', stop: ' + stop + ') \
      
          let datenpunkte = [
              {
                  fluxQuery: 
                      'from(bucket: "iobroker") \
                          |> range(start: ' + start_PY + ', stop: ' + stop_PY + ') \
                          |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                          |> drop(columns: ["_field", "ack", "from", "q"]) \
                          |> aggregateWindow(every: 1mo, fn: sum, createEmpty: false) \
                          |> timeShift(duration: -1mo) \
                          |> sort(columns: ["_time"], desc: false) \
                          '
                          ,       
                  graphSettings: {
                      type: 'bar',
                      color: mdw_color_PY,
                      barBorderColor: mdw_barBorderColor_PY,
                      legendText: 'Solarproduktion letzes Jahr',
                      yAxis_id: 0,
                      yAxis_show: true,
                      yAxis_position: 'left',
                      yAxis_gridLines_border_show: false,
                      yAxis_gridLines_ticks_show: false,
                      yAxis_gridLines_show: true,
                      yAxis_gridLines_color: mdw_yAxis_gridLines_color,
                      yAxis_min: 0,
                      yAxis_max: common_yAxis_max,
                      yAxis_step: 500,
                      datalabel_show: true,
                      datalabel_fontSize: 8,
                      datalabel_color: mdw_barBorderColor_PY
                  } 
              },
              {
                  fluxQuery: 
                      'from(bucket: "iobroker") \
                          |> range(start: ' + start_ACT + ', stop: ' + stop_ACT + ') \
                          |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                          |> drop(columns: ["_field", "ack", "from", "q"]) \
                          |> aggregateWindow(every: 1mo, fn: sum, createEmpty: false) \
                          |> timeShift(duration: -1mo) \
                          |> timeShift(duration: -1y) \
                          |> sort(columns: ["_time"], desc: false) \
                          '
                          ,       
                  graphSettings: {
                      type: 'bar',
                      color: mdw_color_ACT,
                      barBorderColor: mdw_barBorderColor_ACT,
                      legendText: 'Solarproduktion dieses Jahr',
                      yAxis_id: 0,
                      yAxis_show: false,
                      yAxis_position: 'left',
                      yAxis_gridLines_border_show: false,
                      yAxis_gridLines_ticks_show: false,
                      yAxis_gridLines_show: true,
                      yAxis_gridLines_color: mdw_yAxis_gridLines_color,
                      yAxis_min: 0,
                      yAxis_max: common_yAxis_max,
                      yAxis_step: 500,
                      datalabel_show: true,
                      datalabel_fontSize: mdw_datalabel_fontSize,
                      datalabel_color: mdw_barBorderColor_ACT
                  } 
              } // <= Zwischen mehreren Datenpunkten hier das Komma nicht vergessen!
              
          ]
      
      
          // #################### Programmablauf (Erzeugen des JSON) ####################
      
          refreshData();
      
          //Hauptfunktion
          function refreshData() {
          try {
              let graphs = [];
      
              // In dieser Schleife werden alle oben definierten Datenpunkte durchlaufen und die entstehenden JSON-Bausteine der Variable 'graphs' angehangen
              for (const datenpunkt of datenpunkte) {
      
                  let historyData = getHistoryGraphData(historyInstance, datenpunkt.fluxQuery, datenpunkt.graphSettings);
                  
                  if (historyData) {
                      graphs.push(historyData);
                  }
      
                  // Das Result von 'graphs' in den Zieldatenpunkt schreiben 
                  Promise.all(graphs).then((result) => {
                      if (debug) console.log("[refreshData]: Final JSON " + JSON.stringify({ graphs: result }));
                      setState(targetDP, JSON.stringify({ graphs: result }), true);
                  });
              }
          } catch (err) {
              console.error(`[refreshData] error: ${err.message}, stack: ${err.stack}`);
          }
          }
      
          // Unterfunktion zum Auslesen der Daten aus InfluxDB
          function getHistoryGraphData(historyInstance, fluxQuery, graphSettings) {
              try {
                  let graph = Object.assign({ ...graphSettings }, globalGraphSettings);
                  return new Promise((resolve, reject) => {
                      // Hier wird für jeden Datenpunkt die Flux-Query ausgeführt und die Rohdaten in das Objekt 'query' geschrieben
                      if (debug) console.log('[getHistoryGraphData]: fluxQuery ' + fluxQuery);
                      sendTo
                          (historyInstance, 'query',
                              fluxQuery,
                                  function (query) {
                                      if (debug) console.log('[getHistoryGraphData]: Raw result from fluxQuery (query.result) ' + JSON.stringify(query.result));
                                      // Hier werden aus den Rohdaten der Flux-Query Zeitstempel und Werte extrahiert und in das benötigte Array-Format übergeben
                                      // [{"t": 1640624405000,"y": 1.4536},{"t": 1640649605000,"y": 1.4665}, ...]
                                      graph.data = query.result[0].map(elm => ({
                                          t: (elm.ts !== null && elm.ts !== undefined) ? elm.ts : null,
                                          y: (elm._value !== null && elm._value !== undefined && elm._value > 0.5) ? elm._value : null
                                      }));
      
                                      resolve(graph);
                                      if (debug) console.log("[getHistoryGraphData]: Result after map t: and y: (query.data) " + JSON.stringify(graph.data));
                                  }
                          );
                      });
              } catch (ex) {
                  console.error(`[getHistoryGraphData]: error: ${ex.message}, stack: ${ex.stack}`);
              }
          };
      
      }; // end [refresh]
      

      PS: Bei der Konzeption meiner VIS für das Zentrale Wandtablet habe ich auch zunächst überlegt etwas zum Durchblättern zu bauen, habe mich dann aber für 3 Ansichten entschieden, die mir eigentlich alle Daten anzeigen, die mich interessieren (alles noch "Under Construction"):

      Aktuelle Leistung mit Verlauf der letzen 24 Stunden:

      2022-04-23_10-08-59.png

      Energie der letzten 14 Tage:

      2022-04-23_10-09-28.png

      Energie/Euro laufendes Jahr mit Vergleich zum Vorjahr:

      2022-04-23_10-10-06.png

      Grüße

      Frank

      M Offline
      M Offline
      Marc9025
      schrieb am zuletzt editiert von
      #98

      @frank2604
      Vielen Dank für die ausführliche Antwort.
      Da ist schon Mal mein erstes Problem. Ich habe die influxdb auf Version 1.8
      Leider ist das updaten nicht so einfach wie gedacht.
      Hat das schon Mal jemand gemacht ohne seine Daten zu Verlieren?

      frank2604F 1 Antwort Letzte Antwort
      0
      • M Marc9025

        @frank2604
        Vielen Dank für die ausführliche Antwort.
        Da ist schon Mal mein erstes Problem. Ich habe die influxdb auf Version 1.8
        Leider ist das updaten nicht so einfach wie gedacht.
        Hat das schon Mal jemand gemacht ohne seine Daten zu Verlieren?

        frank2604F Offline
        frank2604F Offline
        frank2604
        schrieb am zuletzt editiert von
        #99

        @marc9025

        Da ich ioBroker für das neue Haus von Grund auf neu aufgesetzt habe, habe ich mich gleich für Influx 2.x entschieden. Also nein, habe noch keine Migration durchgeführt.

        Grundsätzlich sollte das ja nach der Anleitung einfach gehen: https://docs.influxdata.com/influxdb/v2.2/upgrade/v1-to-v2/

        Der Knackpunkt dürfte der Punkt "Tags statt Felder für Metadaten" sein:

        2022-04-23_17-47-21.png

        Ich habe die Option von Beginn an gewählt. Ich weis aber nicht, wie das bei einer Umstellung mit Altdaten aussieht. Die genauen Auswirkungen, wenn diese Option nicht gewählt, kann ich leider auch nicht beurteilen - also ob man dadurch die Flux Queries anders bauen muss.

        Am Besten machst Du einen neuen Thread zu der Frage auf.

        Frank

        Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
        Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

        M 1 Antwort Letzte Antwort
        0
        • frank2604F frank2604

          @marc9025

          Da ich ioBroker für das neue Haus von Grund auf neu aufgesetzt habe, habe ich mich gleich für Influx 2.x entschieden. Also nein, habe noch keine Migration durchgeführt.

          Grundsätzlich sollte das ja nach der Anleitung einfach gehen: https://docs.influxdata.com/influxdb/v2.2/upgrade/v1-to-v2/

          Der Knackpunkt dürfte der Punkt "Tags statt Felder für Metadaten" sein:

          2022-04-23_17-47-21.png

          Ich habe die Option von Beginn an gewählt. Ich weis aber nicht, wie das bei einer Umstellung mit Altdaten aussieht. Die genauen Auswirkungen, wenn diese Option nicht gewählt, kann ich leider auch nicht beurteilen - also ob man dadurch die Flux Queries anders bauen muss.

          Am Besten machst Du einen neuen Thread zu der Frage auf.

          Frank

          M Offline
          M Offline
          Marc9025
          schrieb am zuletzt editiert von Marc9025
          #100

          @frank2604
          Hallo Frank,
          ich bin endlich Mal dazugekommen meinen raspi neu aufzusetzen und ich habe jetzt auch influx 2.0

          Gibt es eine Möglichkeit Werte aus der influxdb in ein Textfeld darzustellen also ohne Grafik.
          Zum Beispiel der Ertrag von gestern oder letzen Monat

          frank2604F 1 Antwort Letzte Antwort
          0
          • M Marc9025

            @frank2604
            Hallo Frank,
            ich bin endlich Mal dazugekommen meinen raspi neu aufzusetzen und ich habe jetzt auch influx 2.0

            Gibt es eine Möglichkeit Werte aus der influxdb in ein Textfeld darzustellen also ohne Grafik.
            Zum Beispiel der Ertrag von gestern oder letzen Monat

            frank2604F Offline
            frank2604F Offline
            frank2604
            schrieb am zuletzt editiert von
            #101

            @marc9025 sagte in Material Design Widgets: JSON Chart Widget:

            Gibt es eine Möglichkeit Werte aus der influxdb in ein Textfeld darzustellen also ohne Grafik.

            Hallo Marc,

            ja, das geht auch, so wie hier in meiner Jahresansicht für Energie:

            2022-06-18_19-37-18.jpg

            Mit flux ermittle ich einen aggregierten Wert für einen definierten Zeitraum und den Schreibe ich dann in einen Datenpunkt:

            // Import NPM Modul
             const moment = require("moment");
             moment.locale("de");
            
            // History Instanz die verwendet werden soll
            let historyInstance = 'influxdb.0';
            
            // Debug-Mode (true/false)
            // Gibt bei true in der Skript-Console und im ioBroker-Protokoll Inhalte von Verarbeitungsschritten aus (z.B. das Ergebnis der Flux-Abfrage und das fertige JSON)
            let debug = false;
            
            // #################### Auslöser (Trigger), die das JSON-Objekt neu erzeugen ####################
            
            // Zeitgesteuert (jede 10. Sekunde in der 1. Minute einer jeden Stunde, jeden Tag)
            schedule("10 1 * * * *", async function () {
                refresh();
            });
            
            // Beim Speichern oder Starten des Skriptes
            refresh();
            
            // #################### Funktion, die die Daten aus influx ermittelt ####################
            
            function refresh() {
            
                let startVersatzWert = -1
                let startVersatzEinhet = 'year'
                let stopVersatzWert = 0
                let stopVersatzEinhet = 'year'
                let today = moment()
                
                let start = today.clone().add(startVersatzWert, startVersatzEinhet).startOf(startVersatzEinhet).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
                let stop = today.clone().add(stopVersatzWert, stopVersatzEinhet).startOf(stopVersatzEinhet).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
            
                if (debug) console.log("[range ACT]: start " + start + " stop " + stop);
            
                let fluxQuery =
                        'from(bucket: "iobroker") \
                            |> range(start: ' + start + ', stop: ' + stop + ') \
                            |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                            |> drop(columns: ["_field", "ack", "from", "q"]) \
                            |> sum() \
                            ';
            
                if (debug) console.log("fluxQuery: " + fluxQuery);
            
                let value = 0;
            
                sendTo(historyInstance, 'query',
                        fluxQuery,
                    function (query) {
                        if (query.error) {
                            console.error(query.error);
                        } else {
                            // Ergebnis in Datenpunkt
                            if (debug) console.log('Row: ' + JSON.stringify(query));
                            value = query.result[0][0]._value
                            setState('0_userdata.0.Strom.Solarproduktion.Energie_Jahr_-1', value, true);
                            if (debug) console.log("value: " + value);
                        }
                })
                
            };
            

            Grüße Frank

            Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
            Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

            M 1 Antwort Letzte Antwort
            1
            • frank2604F frank2604

              @marc9025 sagte in Material Design Widgets: JSON Chart Widget:

              Gibt es eine Möglichkeit Werte aus der influxdb in ein Textfeld darzustellen also ohne Grafik.

              Hallo Marc,

              ja, das geht auch, so wie hier in meiner Jahresansicht für Energie:

              2022-06-18_19-37-18.jpg

              Mit flux ermittle ich einen aggregierten Wert für einen definierten Zeitraum und den Schreibe ich dann in einen Datenpunkt:

              // Import NPM Modul
               const moment = require("moment");
               moment.locale("de");
              
              // History Instanz die verwendet werden soll
              let historyInstance = 'influxdb.0';
              
              // Debug-Mode (true/false)
              // Gibt bei true in der Skript-Console und im ioBroker-Protokoll Inhalte von Verarbeitungsschritten aus (z.B. das Ergebnis der Flux-Abfrage und das fertige JSON)
              let debug = false;
              
              // #################### Auslöser (Trigger), die das JSON-Objekt neu erzeugen ####################
              
              // Zeitgesteuert (jede 10. Sekunde in der 1. Minute einer jeden Stunde, jeden Tag)
              schedule("10 1 * * * *", async function () {
                  refresh();
              });
              
              // Beim Speichern oder Starten des Skriptes
              refresh();
              
              // #################### Funktion, die die Daten aus influx ermittelt ####################
              
              function refresh() {
              
                  let startVersatzWert = -1
                  let startVersatzEinhet = 'year'
                  let stopVersatzWert = 0
                  let stopVersatzEinhet = 'year'
                  let today = moment()
                  
                  let start = today.clone().add(startVersatzWert, startVersatzEinhet).startOf(startVersatzEinhet).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
                  let stop = today.clone().add(stopVersatzWert, stopVersatzEinhet).startOf(stopVersatzEinhet).format('YYYY-MM-DD[T]HH:mm:ss[Z]');
              
                  if (debug) console.log("[range ACT]: start " + start + " stop " + stop);
              
                  let fluxQuery =
                          'from(bucket: "iobroker") \
                              |> range(start: ' + start + ', stop: ' + stop + ') \
                              |> filter(fn: (r) => r["_measurement"] == "Strom.Solarproduktion.Energie_in_der_letzten_Stunde") \
                              |> drop(columns: ["_field", "ack", "from", "q"]) \
                              |> sum() \
                              ';
              
                  if (debug) console.log("fluxQuery: " + fluxQuery);
              
                  let value = 0;
              
                  sendTo(historyInstance, 'query',
                          fluxQuery,
                      function (query) {
                          if (query.error) {
                              console.error(query.error);
                          } else {
                              // Ergebnis in Datenpunkt
                              if (debug) console.log('Row: ' + JSON.stringify(query));
                              value = query.result[0][0]._value
                              setState('0_userdata.0.Strom.Solarproduktion.Energie_Jahr_-1', value, true);
                              if (debug) console.log("value: " + value);
                          }
                  })
                  
              };
              

              Grüße Frank

              M Offline
              M Offline
              Marc9025
              schrieb am zuletzt editiert von Marc9025
              #102

              @frank2604
              Hallo Frank,
              vielen Dank, dass hat soweit schon mal geklappt.
              Leider bekomme ich das mit dem Variablen für den Zeitraum nicht hin.
              Zum testen habe ich deine Variablen genommen leider sind die rot.

              10c509f6-fef6-4f76-a592-7eccf9120955-image.png

              Ich möchte zum Beispiel nur den aktuellen Tag angezeigt bekommen, also von 1 Uhr bis 23 Uhr. Wie kann ich das am Besten lösen?

              Wie berechnest du die max Werte für die Y-Achse? Wenn ich das richtig verstanden habe holst du dir den Wert ja aus einem Datenpunkt. Wo kommt der Wert her ? Aus der Influxdb?

              frank2604F 1 Antwort Letzte Antwort
              0
              • M Marc9025

                @frank2604
                Hallo Frank,
                vielen Dank, dass hat soweit schon mal geklappt.
                Leider bekomme ich das mit dem Variablen für den Zeitraum nicht hin.
                Zum testen habe ich deine Variablen genommen leider sind die rot.

                10c509f6-fef6-4f76-a592-7eccf9120955-image.png

                Ich möchte zum Beispiel nur den aktuellen Tag angezeigt bekommen, also von 1 Uhr bis 23 Uhr. Wie kann ich das am Besten lösen?

                Wie berechnest du die max Werte für die Y-Achse? Wenn ich das richtig verstanden habe holst du dir den Wert ja aus einem Datenpunkt. Wo kommt der Wert her ? Aus der Influxdb?

                frank2604F Offline
                frank2604F Offline
                frank2604
                schrieb am zuletzt editiert von
                #103

                @marc9025

                Hallo Marc. Ich bin im Urlaub und kann daher nur begrenzt helfen.

                Das die Funktionen rot sind, ist normal. Es wird ja die zusätzliche Moment.js Bibliothek geladen und die kennt die JavaScript IDE im ioBroker nicht.

                Schau Dir mal die Doku zu Moment.js auf deren Webseite an. Mit „day“ und 0 bzw -1 mal probieren.

                Die Moment Bibliothek hast Du in der Skript Instanz hinzugefügt?

                Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
                Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

                M 1 Antwort Letzte Antwort
                0
                • frank2604F frank2604

                  @marc9025

                  Hallo Marc. Ich bin im Urlaub und kann daher nur begrenzt helfen.

                  Das die Funktionen rot sind, ist normal. Es wird ja die zusätzliche Moment.js Bibliothek geladen und die kennt die JavaScript IDE im ioBroker nicht.

                  Schau Dir mal die Doku zu Moment.js auf deren Webseite an. Mit „day“ und 0 bzw -1 mal probieren.

                  Die Moment Bibliothek hast Du in der Skript Instanz hinzugefügt?

                  M Offline
                  M Offline
                  Marc9025
                  schrieb am zuletzt editiert von
                  #104

                  @frank2604
                  Hallo Frank,
                  erstmals vielen Dank für deine Unterstützung. Mit deiner Anleitung und Hilfe habe ich es soweit ganz gut hinbekommen.
                  Leider habe ich noch ein paar Dinge bei denen ich nicht weitergekommen bzw mir die Idee fehlt.

                  Ich würde gerne mehrere Werte übereinander legen, wie es auch auf der SMA Seite angezeigt wird.
                  solarbild2.png

                  Leider werden die Daten über Influxdb bei Änderung gespeichert. ( alle x Minuten geht soweit ich weiß nicht)
                  Dadurch gibt es in meinen Graphen ein paar Ausreißer, weil die daten halt nicht im Raster von z.B 15 Minuten passen. Da ist der Netzbezug höher als der eigentlich Verbrauch was ja nicht sein kann :)
                  solarbild.png
                  Hast du oder vielleicht auch jemand anders eine Idee ?

                  frank2604F 2 Antworten Letzte Antwort
                  0
                  • M Marc9025

                    @frank2604
                    Hallo Frank,
                    erstmals vielen Dank für deine Unterstützung. Mit deiner Anleitung und Hilfe habe ich es soweit ganz gut hinbekommen.
                    Leider habe ich noch ein paar Dinge bei denen ich nicht weitergekommen bzw mir die Idee fehlt.

                    Ich würde gerne mehrere Werte übereinander legen, wie es auch auf der SMA Seite angezeigt wird.
                    solarbild2.png

                    Leider werden die Daten über Influxdb bei Änderung gespeichert. ( alle x Minuten geht soweit ich weiß nicht)
                    Dadurch gibt es in meinen Graphen ein paar Ausreißer, weil die daten halt nicht im Raster von z.B 15 Minuten passen. Da ist der Netzbezug höher als der eigentlich Verbrauch was ja nicht sein kann :)
                    solarbild.png
                    Hast du oder vielleicht auch jemand anders eine Idee ?

                    frank2604F Offline
                    frank2604F Offline
                    frank2604
                    schrieb am zuletzt editiert von
                    #105

                    @marc9025
                    Bin zZt im Urlaub. Schaue ich mir gerne danach einmal an.

                    Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
                    Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

                    M 1 Antwort Letzte Antwort
                    0
                    • frank2604F frank2604

                      @marc9025
                      Bin zZt im Urlaub. Schaue ich mir gerne danach einmal an.

                      M Offline
                      M Offline
                      Marc9025
                      schrieb am zuletzt editiert von
                      #106

                      @frank2604
                      danke das wäre super

                      1 Antwort Letzte Antwort
                      0
                      • liv-in-skyL Offline
                        liv-in-skyL Offline
                        liv-in-sky
                        schrieb am zuletzt editiert von liv-in-sky
                        #107

                        EDIT - hat sich erledigt !!!

                        könnte mir evt. jmd helfen - versuche eine bar chart aufzubauen

                        das ist das erzeugte json

                        {
                         "axisLabels": [
                           "0",
                           "1",
                           "2",
                           "3"
                         ],
                         "graphs": [
                           {
                             "type": "bar",
                             "barIsStacked": false,
                             "data": [
                               7
                             ],
                             "yAxis_id": 0,
                             "barStackId": 0,
                             "color": "#6dd600",
                             "datalabel_color": "#000000",
                             "datalabel_align": "start"
                           },
                           {
                             "type": "bar",
                             "barIsStacked": false,
                             "data": [
                               3
                             ],
                             "yAxis_id": 0,
                             "barStackId": 1,
                             "color": "#6dd600",
                             "datalabel_color": "#000000",
                             "datalabel_align": "start"
                           },
                           {
                             "type": "bar",
                             "barIsStacked": false,
                             "data": [
                               103
                             ],
                             "yAxis_id": 0,
                             "barStackId": 2,
                             "color": "#6dd600",
                             "datalabel_color": "#000000",
                             "datalabel_align": "start"
                           },
                           {
                             "type": "bar",
                             "barIsStacked": false,
                             "data": [
                               8
                             ],
                             "yAxis_id": 0,
                             "barStackId": 3,
                             "color": "#6dd600",
                             "datalabel_color": "#000000",
                             "datalabel_align": "start"
                           }
                         ]
                        }
                        

                        sieht dann so aus

                        Image 127.png

                        das problem:

                        es stht alles über der 0 bei der x-achse - der 2te balken sollte aber auf der x-achse über 1 sein - der dritte balken auf der 2 usw

                        wie bekomme ich es hin, dass nicht alles über der 0 steht

                        @Scrounger

                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                        ScroungerS 1 Antwort Letzte Antwort
                        0
                        • liv-in-skyL liv-in-sky

                          EDIT - hat sich erledigt !!!

                          könnte mir evt. jmd helfen - versuche eine bar chart aufzubauen

                          das ist das erzeugte json

                          {
                           "axisLabels": [
                             "0",
                             "1",
                             "2",
                             "3"
                           ],
                           "graphs": [
                             {
                               "type": "bar",
                               "barIsStacked": false,
                               "data": [
                                 7
                               ],
                               "yAxis_id": 0,
                               "barStackId": 0,
                               "color": "#6dd600",
                               "datalabel_color": "#000000",
                               "datalabel_align": "start"
                             },
                             {
                               "type": "bar",
                               "barIsStacked": false,
                               "data": [
                                 3
                               ],
                               "yAxis_id": 0,
                               "barStackId": 1,
                               "color": "#6dd600",
                               "datalabel_color": "#000000",
                               "datalabel_align": "start"
                             },
                             {
                               "type": "bar",
                               "barIsStacked": false,
                               "data": [
                                 103
                               ],
                               "yAxis_id": 0,
                               "barStackId": 2,
                               "color": "#6dd600",
                               "datalabel_color": "#000000",
                               "datalabel_align": "start"
                             },
                             {
                               "type": "bar",
                               "barIsStacked": false,
                               "data": [
                                 8
                               ],
                               "yAxis_id": 0,
                               "barStackId": 3,
                               "color": "#6dd600",
                               "datalabel_color": "#000000",
                               "datalabel_align": "start"
                             }
                           ]
                          }
                          

                          sieht dann so aus

                          Image 127.png

                          das problem:

                          es stht alles über der 0 bei der x-achse - der 2te balken sollte aber auf der x-achse über 1 sein - der dritte balken auf der 2 usw

                          wie bekomme ich es hin, dass nicht alles über der 0 steht

                          @Scrounger

                          ScroungerS Offline
                          ScroungerS Offline
                          Scrounger
                          Developer
                          schrieb am zuletzt editiert von Scrounger
                          #108

                          @liv-in-sky

                          So

                          
                          {
                          
                          	"axisLabels": [
                          
                          		"0",
                          
                          		"1",
                          
                          		"2",
                          
                          		"3"
                          
                          	],
                          
                          	"graphs": [
                          		{
                          
                          			"type": "bar",
                          
                          			"barIsStacked": false,
                          
                          			"data": [
                          
                          				7, 3, 103, 8
                          
                          			],
                          
                          			"yAxis_id": 0,
                          
                          			"barStackId": 0,
                          
                          			"color": "#6dd600",
                          
                          			"datalabel_color": "#000000",
                          
                          			"datalabel_align": "start"
                          
                          		}
                          
                          	]
                          
                          }
                          

                          für eine Bar musst du für jedes Label auch einen Wert angeben.
                          Du hattest mehrere Bars definiert mit nur einem Wert, d.h. dann werden diese auch nur bei label 1 angezeigt.

                          <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                          <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                          1 Antwort Letzte Antwort
                          0
                          • liv-in-skyL Offline
                            liv-in-skyL Offline
                            liv-in-sky
                            schrieb am zuletzt editiert von
                            #109

                            @scrounger danke - hatte es mittlerweile auch gecheckt

                            sieht jetzt so aus

                            script-vis.gif

                            nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                            1 Antwort Letzte Antwort
                            0
                            • H Offline
                              H Offline
                              Happyuser20
                              schrieb am zuletzt editiert von
                              #110

                              Hallo

                              Ich klinke mich hier mal eine.
                              Bin gerade auch am experimentieren mit dem JSON Chart.
                              Ich nutze das script von Frank mit Influx.
                              Ich möchte die PV Einspeisung und Netzbezug stacken.
                              Er überlagert die Balken immer.

                              2022-10-07 09_27_32-Edit vis und 1 weitere Seite - Persönlich – Microsoft​ Edge.png

                              {
                                       fluxQuery: 
                                             'from(bucket: "iobroker_neu") \
                                 |> range(start: -8d)  \
                                |> filter(fn: (r) => r["_measurement"] == "sourceanalytix.0.smartmeter__1__1-0:1_8_0__255__value.currentYear.consumed.01_previousDay") \
                                 |> drop(columns: ["_field", "ack", "from", "q"]) \
                                |> aggregateWindow(every: 1d, fn: sum, createEmpty: false) \
                                |> timeShift(duration: -1s) \
                                |> truncateTimeColumn(unit: 1d) \
                                |> sort(columns: ["_time"], desc: true) \
                                |> limit(n:7) \
                                |> sort(columns: ["_time"], desc: false) '
                                                ,       
                                          graphSettings: {
                                              type: 'bar',
                                              color:'#F44336',
                                              legendText: 'Netzbezug',
                                              barisstacked: true,
                                              barStackId:0,
                                              yAxis_id: 0,
                                              //yAxis_show: true,
                                              //yAxis_min: 0,
                                              //yAxis_max: 5,
                                              //datalabel_show: true,
                                              datalabel_align: 'top',
                                              datalabel_minDigits: 0,
                                              datalabel_maxDigits: 0,
                                              datalabel_append: '',
                                              datalabel_color: '#ffffff',
                                              //displayOrder: 1
                                          }
                                          } , // <= Zwischen mehreren Datenpunkten hier das Komma nicht vergessen!
                                      {
                                          fluxQuery: 
                                             'from(bucket: "iobroker_neu") \
                                 |> range(start: -8d)  \
                                |> filter(fn: (r) => r["_measurement"] == "sourceanalytix.0.smartmeter__1__1-0:2_8_0__255__value.currentYear.delivered.01_previousDay") \
                                 |> drop(columns: ["_field", "ack", "from", "q"]) \
                                |> aggregateWindow(every: 1d, fn: sum, createEmpty: false) \
                                |> timeShift(duration: -1s) \
                                |> truncateTimeColumn(unit: 1d) \
                                |> sort(columns: ["_time"], desc: true) \
                                |> limit(n:7) \
                                |> sort(columns: ["_time"], desc: false) '
                                                ,       
                                          graphSettings: {
                                              type: 'bar',
                                              color:'#4CAF50',
                                              legendText: 'Einspeisung',
                                              barisstacked: true,
                                              barStackId:0,
                                              yAxis_id: 0,
                                              //yAxis_show: true,
                                              //yAxis_min: 0,
                                              //yAxis_max: 30,
                                              //datalabel_show: true,
                                              datalabel_align: 'top',
                                              datalabel_minDigits: 0,
                                              datalabel_maxDigits: 0,
                                              datalabel_append: ' ',
                                              datalabel_color: '#ffffff',
                                              //displayOrder: 1
                              
                              liv-in-skyL 1 Antwort Letzte Antwort
                              0
                              • H Happyuser20

                                Hallo

                                Ich klinke mich hier mal eine.
                                Bin gerade auch am experimentieren mit dem JSON Chart.
                                Ich nutze das script von Frank mit Influx.
                                Ich möchte die PV Einspeisung und Netzbezug stacken.
                                Er überlagert die Balken immer.

                                2022-10-07 09_27_32-Edit vis und 1 weitere Seite - Persönlich – Microsoft​ Edge.png

                                {
                                         fluxQuery: 
                                               'from(bucket: "iobroker_neu") \
                                   |> range(start: -8d)  \
                                  |> filter(fn: (r) => r["_measurement"] == "sourceanalytix.0.smartmeter__1__1-0:1_8_0__255__value.currentYear.consumed.01_previousDay") \
                                   |> drop(columns: ["_field", "ack", "from", "q"]) \
                                  |> aggregateWindow(every: 1d, fn: sum, createEmpty: false) \
                                  |> timeShift(duration: -1s) \
                                  |> truncateTimeColumn(unit: 1d) \
                                  |> sort(columns: ["_time"], desc: true) \
                                  |> limit(n:7) \
                                  |> sort(columns: ["_time"], desc: false) '
                                                  ,       
                                            graphSettings: {
                                                type: 'bar',
                                                color:'#F44336',
                                                legendText: 'Netzbezug',
                                                barisstacked: true,
                                                barStackId:0,
                                                yAxis_id: 0,
                                                //yAxis_show: true,
                                                //yAxis_min: 0,
                                                //yAxis_max: 5,
                                                //datalabel_show: true,
                                                datalabel_align: 'top',
                                                datalabel_minDigits: 0,
                                                datalabel_maxDigits: 0,
                                                datalabel_append: '',
                                                datalabel_color: '#ffffff',
                                                //displayOrder: 1
                                            }
                                            } , // <= Zwischen mehreren Datenpunkten hier das Komma nicht vergessen!
                                        {
                                            fluxQuery: 
                                               'from(bucket: "iobroker_neu") \
                                   |> range(start: -8d)  \
                                  |> filter(fn: (r) => r["_measurement"] == "sourceanalytix.0.smartmeter__1__1-0:2_8_0__255__value.currentYear.delivered.01_previousDay") \
                                   |> drop(columns: ["_field", "ack", "from", "q"]) \
                                  |> aggregateWindow(every: 1d, fn: sum, createEmpty: false) \
                                  |> timeShift(duration: -1s) \
                                  |> truncateTimeColumn(unit: 1d) \
                                  |> sort(columns: ["_time"], desc: true) \
                                  |> limit(n:7) \
                                  |> sort(columns: ["_time"], desc: false) '
                                                  ,       
                                            graphSettings: {
                                                type: 'bar',
                                                color:'#4CAF50',
                                                legendText: 'Einspeisung',
                                                barisstacked: true,
                                                barStackId:0,
                                                yAxis_id: 0,
                                                //yAxis_show: true,
                                                //yAxis_min: 0,
                                                //yAxis_max: 30,
                                                //datalabel_show: true,
                                                datalabel_align: 'top',
                                                datalabel_minDigits: 0,
                                                datalabel_maxDigits: 0,
                                                datalabel_append: ' ',
                                                datalabel_color: '#ffffff',
                                                //displayOrder: 1
                                
                                liv-in-skyL Offline
                                liv-in-skyL Offline
                                liv-in-sky
                                schrieb am zuletzt editiert von
                                #111

                                @happyuser20 sagte in Material Design Widgets: JSON Chart Widget:

                                barisstacked: true,

                                denke dieses setting ist dafür verantwortlich

                                nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                H 1 Antwort Letzte Antwort
                                0
                                • liv-in-skyL liv-in-sky

                                  @happyuser20 sagte in Material Design Widgets: JSON Chart Widget:

                                  barisstacked: true,

                                  denke dieses setting ist dafür verantwortlich

                                  H Offline
                                  H Offline
                                  Happyuser20
                                  schrieb am zuletzt editiert von
                                  #112

                                  @liv-in-sky Ja schon, ist doch true

                                  Oder habe ich ein Brett vorm Kopf?:blush:

                                  1 Antwort Letzte Antwort
                                  0
                                  • H Offline
                                    H Offline
                                    Happyuser20
                                    schrieb am zuletzt editiert von
                                    #113

                                    Erledigt

                                    Was Groß und kleinschreibung alles bewirkt :blush:

                                    1 Antwort Letzte Antwort
                                    0
                                    • M Marc9025

                                      @frank2604
                                      Hallo Frank,
                                      erstmals vielen Dank für deine Unterstützung. Mit deiner Anleitung und Hilfe habe ich es soweit ganz gut hinbekommen.
                                      Leider habe ich noch ein paar Dinge bei denen ich nicht weitergekommen bzw mir die Idee fehlt.

                                      Ich würde gerne mehrere Werte übereinander legen, wie es auch auf der SMA Seite angezeigt wird.
                                      solarbild2.png

                                      Leider werden die Daten über Influxdb bei Änderung gespeichert. ( alle x Minuten geht soweit ich weiß nicht)
                                      Dadurch gibt es in meinen Graphen ein paar Ausreißer, weil die daten halt nicht im Raster von z.B 15 Minuten passen. Da ist der Netzbezug höher als der eigentlich Verbrauch was ja nicht sein kann :)
                                      solarbild.png
                                      Hast du oder vielleicht auch jemand anders eine Idee ?

                                      frank2604F Offline
                                      frank2604F Offline
                                      frank2604
                                      schrieb am zuletzt editiert von
                                      #114

                                      @marc9025 sagte in Material Design Widgets: JSON Chart Widget:

                                      Leider werden die Daten über Influxdb bei Änderung gespeichert. ( alle x Minuten geht soweit ich weiß nicht)
                                      Dadurch gibt es in meinen Graphen ein paar Ausreißer, weil die daten halt nicht im Raster von z.B 15 Minuten passen. Da ist der Netzbezug höher als der eigentlich Verbrauch was ja nicht sein kann :)

                                      Hast du oder vielleicht auch jemand anders eine Idee ?

                                      Hallo Mark,

                                      ja, bei mir kommen die Leistungswerte (Watt) auch von verschiedensten Sensoren / verschiedenen ioBroker-Adaptern. Die Daten vom E3/DC Hausspeicher/PV kommen z.B. über den Modbusadapter jede Sekunde, die Shelly-Leistungsmesser einzelner Verbraucher liefern Daten bei Wertänderung etc.

                                      Ich habe das gelöst, indem ich mit einem Blockly-Skript für jeden Leistungsdatenpunkt mir die Mittelwerte je Minute in einen neuen Datenpunkt schreibe. Letzterer schreibt somit sauber jede Minute die Werte in die Influx-DB. Eine Auflösung der Werte je Minute genügt mir völlig und überflutet mir somit auch nicht die Datenbank.

                                      Im Skript hole ich mir dazu aktiv jede Sekunde die Werte aller Leistung-DPs, die ich aufzeichnen möchte und schreibe sie in eine Liste-Variable.

                                      Nach jeder Minute wird der Mittelwert aus den 60 Einträgen der Liste gebildet und in den Ziel-DP geschrieben (der dann in Influx aufzeichnet).

                                      Dann werden die Listen geleert und es beginnt von vorne.

                                      So sieht das dann aus (ich habe es mal auf 3 DPs eingekürzt, damit alles auf den Screenshot passt):

                                      2022-10-13_08-56-04.jpg

                                      Zur Vervollständigung: Aus den Werten der neuen Datenpunkte mache ich dann noch die Energie mit diesem Skript:

                                       
                                       // Datenpunkte für die QUELLEN (Leistung in W) in Konstante schreiben
                                       const idBatterieentladungW       = '0_userdata.0.Strom.Batterieentladung.Leistung_Mittel_letzte_Minute'/*Batterieentladung Leistung*/;
                                       const idBatterieladungW          = '0_userdata.0.Strom.Batterieladung.Leistung_Mittel_letzte_Minute'/*Batterieladung Leistung*/
                                       const idNetzbezugW               = '0_userdata.0.Strom.Netzbezug.Leistung_Mittel_letzte_Minute'/*Netzbezug Leistung*/
                                       const idNetzeinspeisungW         = '0_userdata.0.Strom.Netzeinspeisung.Leistung_Mittel_letzte_Minute'/*Netzeinspeisung Leistung*/
                                       const idSolarproduktionHausW     = '0_userdata.0.Strom.Solarproduktion_Haus.Leistung_Mittel_letzte_Minute'/*Solarproduktion Leistung Haus (W)*/
                                       const idSolarproduktionCarportW  = '0_userdata.0.Strom.Solarproduktion_Carport.Leistung_Mittel_letzte_Minute'/*Solarproduktion Leistung Carport (W)*/
                                       const idHausverbrauchW           = '0_userdata.0.Strom.Hausverbrauch_inkl_WB_3.Leistung_Mittel_letzte_Minute'/*Hausverbrauch ikl WB 3 Leistung (W)*/
                                       const idEigenverbrauchW          = '0_userdata.0.Strom.Eigenverbrauch.Leistung_Mittel_letzte_Minute'/*Eigenverbrauch Leistung (W)*/
                                       const idWallboxenW               = '0_userdata.0.Strom.Wallboxen_1_und_2.Leistung_Mittel_letzte_Minute'/*Wallboxen Leistung 1 und 2(W)*/
                                      
                                      // Datenpunkte der ZIELE (Energie in Wh) in Konstante schreiben
                                       const idBatterieentladungWh      = '0_userdata.0.Strom.Batterieentladung.Energie_fortlaufend'/*Batterieentladung fortlaufend*/
                                       const idBatterieladungWh         = '0_userdata.0.Strom.Batterieladung.Energie_fortlaufend'/*Batterieladung fortlaufend*/
                                       const idNetzbezugWh              = '0_userdata.0.Strom.Netzbezug.Energie_fortlaufend'/*Netzbezug fortlaufend*/
                                       const idNetzeinspeisungWh        = '0_userdata.0.Strom.Netzeinspeisung.Energie_fortlaufend'/*Netzeinspeisung fortlaufend*/
                                       const idSolarproduktionHausWh    = '0_userdata.0.Strom.Solarproduktion_Haus.Energie_fortlaufend'/*Solarproduktion Haus Fortlaufend*/
                                       const idSolarproduktionCarportWh = '0_userdata.0.Strom.Solarproduktion_Carport.Energie_fortlaufend'/*Solarproduktion Carport Fortlaufend*/
                                       const idHausverbrauchWh          = '0_userdata.0.Strom.Hausverbrauch_inkl_WB_3.Energie_fortlaufend'/*Hausverbrauch inkl WB 3 Fortlaufend*/
                                       const idEigenverbrauchWh         = '0_userdata.0.Strom.Eigenverbrauch.Energie_fortlaufend'/*Eigenverbrauch Fortlaufend (Wh)*/
                                       const idWallboxenWh              = '0_userdata.0.Strom.Wallboxen_1_und_2.Energie_fortlaufend'/*Wallboxen 1 und 2 Fortlaufend (Wh)*/
                                      
                                      // Variablen für die Fortschreibung der Energie definieren und mit dem letzen Wert füllen, falls Skript gestopt wurde
                                       var energyBatterieentladung      = getState("0_userdata.0.Strom.Batterieentladung.Energie_fortlaufend").val;
                                       var energyidBatterieladung       = getState("0_userdata.0.Strom.Batterieladung.Energie_fortlaufend").val;
                                       var energyNetzbezug              = getState("0_userdata.0.Strom.Netzbezug.Energie_fortlaufend").val;
                                       var energyNetzeinspeisung        = getState("0_userdata.0.Strom.Netzeinspeisung.Energie_fortlaufend").val;
                                       var energySolarproduktionHaus    = getState("0_userdata.0.Strom.Solarproduktion_Haus.Energie_fortlaufend").val;
                                       var energySolarproduktionCarport = getState("0_userdata.0.Strom.Solarproduktion_Carport.Energie_fortlaufend").val;
                                       var energyHausverbrauch          = getState("0_userdata.0.Strom.Hausverbrauch_inkl_WB_3.Energie_fortlaufend").val;
                                       var energyEigenverbrauch         = getState("0_userdata.0.Strom.Eigenverbrauch.Energie_fortlaufend").val;
                                       var energyWallboxen              = getState("0_userdata.0.Strom.Wallboxen_1_und_2.Energie_fortlaufend").val;
                                      
                                      // Berechnung durchführen und Werte in Ziel-Datenpunkte schreiben
                                       on({ id: idBatterieentladungW }, function (dp) {
                                           energyBatterieentladung = energyBatterieentladung + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idBatterieentladungWh, Math.round(energyBatterieentladung * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idBatterieladungW }, function (dp) {
                                           energyidBatterieladung = energyidBatterieladung + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idBatterieladungWh, Math.round(energyidBatterieladung * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idNetzbezugW }, function (dp) {
                                           energyNetzbezug = energyNetzbezug + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idNetzbezugWh, Math.round(energyNetzbezug * 1000) / 1000 , true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idNetzeinspeisungW }, function (dp) {
                                           energyNetzeinspeisung = energyNetzeinspeisung + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idNetzeinspeisungWh, Math.round(energyNetzeinspeisung * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idSolarproduktionHausW }, function (dp) {
                                           energySolarproduktionHaus = energySolarproduktionHaus + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idSolarproduktionHausWh, Math.round(energySolarproduktionHaus * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idSolarproduktionCarportW }, function (dp) {
                                           energySolarproduktionCarport = energySolarproduktionCarport + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idSolarproduktionCarportWh, Math.round(energySolarproduktionCarport * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idHausverbrauchW }, function (dp) {
                                           energyHausverbrauch = energyHausverbrauch + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idHausverbrauchWh, Math.round(energyHausverbrauch * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idEigenverbrauchW }, function (dp) {
                                           energyEigenverbrauch = energyEigenverbrauch + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idEigenverbrauchWh, Math.round(energyEigenverbrauch * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                       on({ id: idWallboxenW }, function (dp) {
                                           energyWallboxen = energyWallboxen + dp.oldState.val * (dp.state.ts - dp.oldState.ts) / 3600000; // Wh
                                           setState(idWallboxenWh, Math.round(energyWallboxen * 1000) / 1000, true); // Wh gerundet auf 3 Nachkommastellen
                                       });
                                      

                                      Grüße Frank

                                      Intel NUC8 i3, Proxmox, VM Ubuntu, ioBroker
                                      Philips HUE, Homematic CCU3, Zigbee, Yamaha MusicCast, Vorwerk ...

                                      1 Antwort Letzte Antwort
                                      0
                                      • H Offline
                                        H Offline
                                        Happyuser20
                                        schrieb am zuletzt editiert von Happyuser20
                                        #115

                                        Hallo Frank

                                        Habe dir schon per Chat geschrieben, da habe ich leider keine Möglichkeit dir ein Bild zu senden.

                                        Wie hast du das mit dem Rand bei den einzelnen Balken gemacht?
                                        Habe schon viel mit den Parametern gespielt, macht er aber bei mir nicht.

                                        2022-10-13 10_11_46-1650701501481-2022-04-23_10-09-28.png (2558×1600) und 1 weitere Seite - Persönli.png

                                        frank2604F 1 Antwort Letzte Antwort
                                        0
                                        • H Offline
                                          H Offline
                                          Happyuser20
                                          schrieb am zuletzt editiert von
                                          #116

                                          Keiner eine Idee?

                                          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

                                          837

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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