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.
  • svenomattS svenomatt

    Hallo zusammen

    erstmal vielen dank für die großartig arbeit.

    ich sitze gerade an der umsetzung meiner Thermostate und versuche gerade das

    1.nur eine scala auf der y achse steht. bei mir stehen jetzt 4 mal die selben werte hintereinander.

    1. die grafik (am anfang und ende ist immer eine lücke kriegt man die irgen wie weg?)

    anbei meine fkt.

    //https://forum.iobroker.net/topic/31871/material-design-widgets-json-chart-widget/14?_=1641213336361
    
    // imports NPM Module
    
    const moment = require("moment");
    moment.locale("de");
    
    
    
    // Skript Einstellungen *************************************************************************************************************************************************
    
    let debug = true;                                                               // Debug Meldungen anzeigen
    let strukturChannel = '0_userdata.0.Diagramm';                                  // Übergeordnete Id, wo die Datenpunkte angelegt werden sollen
    
    let idTimeIntervalDatenpunkt = `${strukturChannel}.timeInterval`                // Datenpunkt um Zeitinterval bei Graph zu ändern
    
    let historyInstance = 'history.0';                                              // History Instanz die verwendet werden soll
    let historyDefaultAggregate = 'max';                                            // History Daten Aggregation, siehe https://github.com/ioBroker/ioBroker.javascript/blob/master/docs/en/javascript.md#gethistory
    let historyDefaultCount = 20;                                                   // Anzahl der History Daten die dargestellt werden
    let historyDefaultTimeout = 2000;                                               // History Instance Timeout in ms, nur erhöhen wenn graph Fehlemeldung zu timeout anzeigt
    
    
    let channels = [                                                                // Channels des Systems die verwendet werden sollen
        {
    
           idTarget: 'WeatherIndex',                                                     // Name Eures Ziel Datenpunktes, wird aus 'strukturChannel' + 'idDatenpunkt' zusammengesetzt
    
           idChannel: 'hm-rpc.0'                                                // id des Channels der Überwacht wird
        }
    
    ]
    
    
    let datenpunkte = [
     {
    
           id: 'OEQ1717756.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
           graphSettings: { type: 'line',
                            color: '#ff0015',
                            legendText: 'Kinderzimmer',                                     // Legende
                            datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                            yAxis_id: 0,
                            //yAxis_show: 'false',
                            line_UseFillColor: 'true',                                  // Füllfarbe unter Linie
                            displayOrder: 0,                                          //Reihenfolge der Überlagerung des Graphen
                            yAxis_position: 'left',                                    // Beschriftungseite y Achse
                            barIsStacked: 'true'                                    // bar ist gestapelt
    }
       },
       {
    
           id: 'PEQ1314339.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
           graphSettings: { type: 'line',
                            color: '#0af50e',
                            legendText: 'Bad',                                     // Legende
                            datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                            yAxis_id: 1,
                            //yAxis_show: 'false',
                            line_UseFillColor: 'true',                                  // Füllfarbe unter Linie
                            displayOrder: 1,                                          //Reihenfolge der Überlagerung des Graphen
                            yAxis_position: 'left',                                    // Beschriftungseite y Achse
                            barIsStacked: 'true'                                    // bar ist gestapelt
    }
       },
    
       {
    
           id: 'OEQ1708362.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
           graphSettings: { type: 'line',
                            color: '#FF8C00',
                            legendText: 'Gästezimmer',                                     // Legende
                            datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                            yAxis_id: 2,
                            //yAxis_show: 'false',
                            line_UseFillColor: 'true',                                  // Füllfarbe unter Linie
                            displayOrder: 2,                                          //Reihenfolge der Überlagerung des Graphen
                            yAxis_position: 'left',                                    // Beschriftungseite y Achse
                            barIsStacked: 'true'                                    // bar ist gestapelt
    }
       },
    
    {
         id: 'OEQ1708374.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
         graphSettings: {   type: 'line',
                            color: '#0d47a1',
                            legendText: 'Flur',                                   // Legende
                            datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                            yAxis_id: 3,
                            //yAxis_show: 'true',
                            line_UseFillColor: 'true',                              // Füllfarbe unter Linie
                            displayOrder: 3,                                        //Reihenfolge der Überlagerung des Graphen
                            yAxis_title_text: 'C°',                               // Achsentitel
                            yAxis_title_color: '#44739e',                            // Achsentitel Farbe
                            yAxis_title_fontSize: 24,                                // Achsentitel Schriftgrösse
                            barIsStacked: 'true'                                    // bar ist gestapelt
     }  
     
       },
    
    ]
    
    
    
    let globalGraphSettings = {                           // gemeinsam verwendet Chart Einstellungen, details siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart
    
       line_Thickness: 3,           //Liniendicke
       line_pointSize: 0,           //Linie Punkt Größe
    
      //datalabel_show: false,       // Wertbeschriftung anzeigen/ nicht anzeigen
      datalabel_minDigits: 2,       //datalabel min Stellen
      datalabel_maxDigits: 2,       //datalabel max Stellen
     
     
     yAxis_min: 10,                 // yAchse min.
     yAxis_max: 30,                 // yAchse max.
     yAxis_minimumDigits: 1,      //min. Anzahl Dezimalstellen
     yAxis_maximumDigits: 1,      //max. Anzahl Dezimalstellen
     yAxis_maxSteps: 5,           //max.  Anzahl der Achsenbeschriftung
     yAxis_zeroLineWidth: 0,
     yAxis_show: 'true',
       xAxis_bounds: 'ticks',       //xAchsen_Grenzen
     
       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"
    
       }
    
    }
    
    
    
    // **********************************************************************************************************************************************************************
    
    
    
    function refreshData() {
    
       try {
    
           createControlDatapoints();
    
    
    
           let start = getChartStart();
    
           let end = moment();
    
           if (debug) console.debug(`[refreshData]: chart time interval: start: ${start.format('LLL')}, end: ${end.format('LLL')}`)
    
    
    
           let historyOptions = {
    
               start: start.valueOf(),
    
               end: end.valueOf()
    
           }
    
    
    
           for (const channel of channels) {
    
               let graphs = [];
    
    
    
               for (const datenpunkt of datenpunkte) {
    
                   let idSource = `${channel.idChannel}.${datenpunkt.id}`;
    
    
    
                   if (existsState(idSource)) {
    
                       // create Json Data for Graph
    
                       if (debug) console.debug(`[refreshData]: get history data for datapoint '${idSource}'`);
    
    
    
                       historyOptions.aggregate = (datenpunkt.graphSettings.aggregate) ? datenpunkt.graphSettings.aggregate : historyDefaultAggregate;
    
                       historyOptions.count = (datenpunkt.graphSettings.count) ? datenpunkt.graphSettings.count : historyDefaultCount;
    
                       historyOptions.timeout = (datenpunkt.graphSettings.timeout) ? datenpunkt.graphSettings.timeout : historyDefaultTimeout;
    
    
    
                       if (debug) console.debug(`[refreshData]: chart options for '${datenpunkt.id}': ${JSON.stringify(historyOptions)}`);
    
    
    
                       let historyData = getHistoryGraphData(idSource, historyInstance, historyOptions, datenpunkt.graphSettings);
    
    
    
                       if (historyData) {
    
                           graphs.push(historyData);
    
                       }
    
    
    
                   } else {
    
                       if (debug) console.warn(`[refreshData]: datapoint '${idSource}' not exist! Perhaps you must activate it in the settings of Coronavirus-Statistics Adapter or delete it from the skript`);
    
                   }
    
    
    
                   Promise.all(graphs).then((result) => {
    
                       mySetState(`${strukturChannel}.${channel.idTarget}`, JSON.stringify({ graphs: result }), 'string', `${channel.idTarget} Daten für JsonChart Widget`);
    
                   });
    
               }
    
           }
    
    
    
       } catch (err) {
    
           console.error(`[refreshData] error: ${err.message}, stack: ${err.stack}`);
    
       }
    
    }
    
    
    
    refreshData();
    
    
    
    function createControlDatapoints() {
    
       if (!existsState(idTimeIntervalDatenpunkt)) {
    
           if (debug) console.debug(`[createControlDatapoints]: create datapoint '${idTimeIntervalDatenpunkt}'`);
    
           mySetState(idTimeIntervalDatenpunkt, '7 days', 'string', `Filter für Charts`);
    
       }
    
    }
    
    
    
    function getChartStart() {
    
       let startDateTime = moment();
    
    
    
       if (existsState(idTimeIntervalDatenpunkt)) {
    
           let val = getState(idTimeIntervalDatenpunkt).val;
    
    
    
           if (val === '1 hour') {
    
               startDateTime.add('-1', 'hours');
           
           } else if (val === '12 hours') {
    
               startDateTime.add('-12', 'hours');
    
               // startDateTime = startDateTime.startOf('hour');
    
           } else if (val === '1 day') {
    
               startDateTime.add('-1', 'days');
    
           } else if (val === '3 days') {
    
               startDateTime.add('-3', 'days');
    
               startDateTime = startDateTime.startOf('day');
    
           } else if (val === '7 days') {
    
               startDateTime.add('-7', 'days');
    
               startDateTime = startDateTime.startOf('day');
    
           } else if (val === '14 days') {
    
               startDateTime.add('-14', 'days');
    
               startDateTime = startDateTime.startOf('day');
    
           } else if (val === '1 month') {
    
               startDateTime.add('-1', 'months');
    
               startDateTime = startDateTime.startOf('day');
    
           } else if (val === '2 months') {
    
               startDateTime.add('-2', 'months');
    
               startDateTime = startDateTime.startOf('day');
    
           } else if (val === '3 months') {
    
               startDateTime.add('-3', 'months');
    
               startDateTime = startDateTime.startOf('day');
    
           } else if (val === '6 months') {
    
               startDateTime.add('-6', 'months');
    
               startDateTime = startDateTime.startOf('day');
    
           } else if (val === '1 year') {
    
               startDateTime.add('-1', 'years');
    
               startDateTime = startDateTime.startOf('day');
    
           } else {
    
               startDateTime.add('-7', 'days');
    
               startDateTime = startDateTime.startOf('day');
    
           }
    
       } else {
    
           startDateTime.add('-7', 'days');
    
           startDateTime = startDateTime.startOf('day');
    
       }
    
    
    
       return startDateTime;
    
    }
    
    
    
    function getHistoryGraphData(id, historyInstance, options, graphSettings) {
    
       try {
    
           // graphSettings must be cloned to new var, prevent pointing to same memory adress because promise is in for loop
    
           let graph = Object.assign({ ...graphSettings }, globalGraphSettings);
    
    
    
           let obj = getObject(id);
    
           if (obj && obj.common && obj.common.custom && obj.common.custom[historyInstance]) {
    
               return new Promise((resolve, reject) => {
    
                   sendTo(historyInstance, 'getHistory', {
    
                       id: id,
    
                       options: options
    
                   }, function (query) {
    
                       graph.data = getPreparedData(query.result)
    
                       resolve(graph);
    
                   });
    
    
    
               });
    
           } else {
    
               if (debug) console.warn(`[getHistoryGraphData]: no history instance '${historyInstance}' exist for datapoint '${id}'!`);
    
           }
    
    
    
           return undefined
    
    
    
           function getPreparedData(data) {
    
               if (data) {
    
                   return data.map(elm => ({
    
                       t: (elm.ts !== null && elm.ts !== undefined) ? elm.ts : null,
    
                       y: (elm.val !== null && elm.val !== undefined) ? elm.val : null
    
                   }));
    
               }
    
               return [];
    
           };
    
       } catch (ex) {
    
           console.error(`[getHistoryGraphData]: error: ${ex.message}, stack: ${ex.stack}`);
    
       }
    
    };
    
    
    
    function mySetState(id, val, type, name) {
    
       if (existsState(id)) {
    
           if (debug) console.debug(`[mySetState]: history chart data stored to '${id}'`);
    
           setState(id, val, true);
    
       } else {
    
           if (debug) console.debug(`[mySetState]: create datapoint '${id}'`);
    
           createUserStates(false, [
    
               id, {
    
                   'name': name,
    
                   'type': type,
    
                   'read': true,
    
                   'write': true
    
               }
    
           ], function () {
    
               setState(id, val, true);
    
           });
    
       }
    
    }
    
    
    
    /**
    
    * Create states under 0_userdata.0 or javascript.x
    
    * Current Version:     https://github.com/Mic-M/iobroker.createUserStates
    
    * Support:             https://forum.iobroker.net/topic/26839/
    
    * Autor:               Mic (ioBroker) | Mic-M (github)
    
    * Version:             1.1 (26 January 2020)
    
    * Example:             see https://github.com/Mic-M/iobroker.createUserStates#beispiel
    
    * -----------------------------------------------
    
    * PLEASE NOTE: Per https://github.com/ioBroker/ioBroker.javascript/issues/474, the used function setObject()
    
    *              executes the callback PRIOR to completing the state creation. Therefore, we use a setTimeout and counter.
    
    * -----------------------------------------------
    
    * @param {boolean} force         Force state creation (overwrite), if state is existing.
    
    * @param {array} statesToCreate  State(s) to create. single array or array of arrays
    
    * @param {object} [callback]     Optional: a callback function -- This provided function will be executed after all states are created.
    
    */
    
    function createUserStates(force, statesToCreate, callback = undefined) {
    
       const where = '0_userdata.0'
    
    
    
       const WARN = false; // Only for 0_userdata.0: Throws warning in log, if state is already existing and force=false. Default is false, so no warning in log, if state exists.
    
       const LOG_DEBUG = false; // To debug this function, set to true
    
       // Per issue #474 (https://github.com/ioBroker/ioBroker.javascript/issues/474), the used function setObject() executes the callback
    
       // before the state is actual created. Therefore, we use a setTimeout and counter as a workaround.
    
       const DELAY = 50; // Delay in milliseconds (ms). Increase this to 100, if it is not working.
    
    
    
       // Validate "where"
    
       if (where.endsWith('.')) where = where.slice(0, -1); // Remove trailing dot
    
       if ((where.match(/^((javascript\.([1-9][0-9]|[0-9]))$|0_userdata\.0$)/) == null)) {
    
           log('This script does not support to create states under [' + where + ']', 'error');
    
           return;
    
       }
    
    
    
       // Prepare "statesToCreate" since we also allow a single state to create
    
       if (!Array.isArray(statesToCreate[0])) statesToCreate = [statesToCreate]; // wrap into array, if just one array and not inside an array
    
    
    
       // Add "where" to STATES_TO_CREATE
    
       for (let i = 0; i < statesToCreate.length; i++) {
    
           let lpPath = statesToCreate[i][0].replace(/\.*\./g, '.'); // replace all multiple dots like '..', '...' with a single '.'
    
           lpPath = lpPath.replace(/^((javascript\.([1-9][0-9]|[0-9])\.)|0_userdata\.0\.)/, '') // remove any javascript.x. / 0_userdata.0. from beginning
    
           lpPath = where + '.' + lpPath; // add where to beginning of string
    
           statesToCreate[i][0] = lpPath;
    
       }
    
    
    
       if (where != '0_userdata.0') {
    
           // Create States under javascript.x
    
           let numStates = statesToCreate.length;
    
           statesToCreate.forEach(function (loopParam) {
    
               if (LOG_DEBUG) log('[Debug] Now we are creating new state [' + loopParam[0] + ']');
    
               let loopInit = (loopParam[1]['def'] == undefined) ? null : loopParam[1]['def']; // mimic same behavior as createState if no init value is provided
    
               createState(loopParam[0], loopInit, force, loopParam[1], function () {
    
                   numStates--;
    
                   if (numStates === 0) {
    
                       if (LOG_DEBUG) log('[Debug] All states processed.');
    
                       if (typeof callback === 'function') { // execute if a function was provided to parameter callback
    
                           if (LOG_DEBUG) log('[Debug] Function to callback parameter was provided');
    
                           return callback();
    
                       } else {
    
                           return;
    
                       }
    
                   }
    
               });
    
           });
    
       } else {
    
           // Create States under 0_userdata.0
    
           let numStates = statesToCreate.length;
    
           let counter = -1;
    
           statesToCreate.forEach(function (loopParam) {
    
               counter += 1;
    
               if (LOG_DEBUG) log('[Debug] Currently processing following state: [' + loopParam[0] + ']');
    
               if (($(loopParam[0]).length > 0) && (existsState(loopParam[0]))) { // Workaround due to https://github.com/ioBroker/ioBroker.javascript/issues/478
    
                   // State is existing.
    
                   if (WARN && !force) log('State [' + loopParam[0] + '] is already existing and will no longer be created.', 'warn');
    
                   if (!WARN && LOG_DEBUG) log('[Debug] State [' + loopParam[0] + '] is already existing. Option force (=overwrite) is set to [' + force + '].');
    
                   if (!force) {
    
                       // State exists and shall not be overwritten since force=false
    
                       // So, we do not proceed.
    
                       numStates--;
    
                       if (numStates === 0) {
    
                           if (LOG_DEBUG) log('[Debug] All states successfully processed!');
    
                           if (typeof callback === 'function') { // execute if a function was provided to parameter callback
    
                               if (LOG_DEBUG) log('[Debug] An optional callback function was provided, which we are going to execute now.');
    
                               return callback();
    
                           }
    
                       } else {
    
                           // We need to go out and continue with next element in loop.
    
                           return; // https://stackoverflow.com/questions/18452920/continue-in-cursor-foreach
    
                       }
    
                   } // if(!force)
    
               }
    
    
    
               // State is not existing or force = true, so we are continuing to create the state through setObject().
    
               let obj = {};
    
               obj.type = 'state';
    
               obj.native = {};
    
               obj.common = loopParam[1];
    
               setObject(loopParam[0], obj, function (err) {
    
                   if (err) {
    
                       log('Cannot write object for state [' + loopParam[0] + ']: ' + err);
    
                   } else {
    
                       if (LOG_DEBUG) log('[Debug] Now we are creating new state [' + loopParam[0] + ']')
    
                       let init = null;
    
                       if (loopParam[1].def === undefined) {
    
                           if (loopParam[1].type === 'number') init = 0;
    
                           if (loopParam[1].type === 'boolean') init = false;
    
                           if (loopParam[1].type === 'string') init = '';
    
                       } else {
    
                           init = loopParam[1].def;
    
                       }
    
                       setTimeout(function () {
    
                           setState(loopParam[0], init, true, function () {
    
                               if (LOG_DEBUG) log('[Debug] setState durchgeführt: ' + loopParam[0]);
    
                               numStates--;
    
                               if (numStates === 0) {
    
                                   if (LOG_DEBUG) log('[Debug] All states processed.');
    
                                   if (typeof callback === 'function') { // execute if a function was provided to parameter callback
    
                                       if (LOG_DEBUG) log('[Debug] Function to callback parameter was provided');
    
                                       return callback();
    
                                   }
    
                               }
    
                           });
    
                       }, DELAY + (20 * counter));
    
                   }
    
               });
    
           });
    
       }
    
    }
    
    
    
    

    Unbenannt.PNG

    Bernd 0B Offline
    Bernd 0B Offline
    Bernd 0
    schrieb am zuletzt editiert von Bernd 0
    #89

    falscher Post

    1 Antwort Letzte Antwort
    0
    • Bernd 0B Offline
      Bernd 0B Offline
      Bernd 0
      schrieb am zuletzt editiert von
      #90

      Hallo zusammen,
      ich scheitere schon an einem ganz grundlegendem Problem und hoffe ihr könnt mir hier kurz weiterhelfen.
      Ich habe "nur" den Link zu einem JSON Datensatz.
      https://api.solcast.com.au/rooftop_sites/bf92-b91e-170c-f1e9/forecasts?format=json
      Diesen würde ich gerne als Line Chart visualisieren, aber ich checke nicht, wo ich die URL hinterlegen muss.

      Für eine Hilfestellung wäre ich sehr dankbar.
      Grüße

      1 Antwort Letzte Antwort
      0
      • svenomattS svenomatt

        Hallo zusammen

        erstmal vielen dank für die großartig arbeit.

        ich sitze gerade an der umsetzung meiner Thermostate und versuche gerade das

        1.nur eine scala auf der y achse steht. bei mir stehen jetzt 4 mal die selben werte hintereinander.

        1. die grafik (am anfang und ende ist immer eine lücke kriegt man die irgen wie weg?)

        anbei meine fkt.

        //https://forum.iobroker.net/topic/31871/material-design-widgets-json-chart-widget/14?_=1641213336361
        
        // imports NPM Module
        
        const moment = require("moment");
        moment.locale("de");
        
        
        
        // Skript Einstellungen *************************************************************************************************************************************************
        
        let debug = true;                                                               // Debug Meldungen anzeigen
        let strukturChannel = '0_userdata.0.Diagramm';                                  // Übergeordnete Id, wo die Datenpunkte angelegt werden sollen
        
        let idTimeIntervalDatenpunkt = `${strukturChannel}.timeInterval`                // Datenpunkt um Zeitinterval bei Graph zu ändern
        
        let historyInstance = 'history.0';                                              // History Instanz die verwendet werden soll
        let historyDefaultAggregate = 'max';                                            // History Daten Aggregation, siehe https://github.com/ioBroker/ioBroker.javascript/blob/master/docs/en/javascript.md#gethistory
        let historyDefaultCount = 20;                                                   // Anzahl der History Daten die dargestellt werden
        let historyDefaultTimeout = 2000;                                               // History Instance Timeout in ms, nur erhöhen wenn graph Fehlemeldung zu timeout anzeigt
        
        
        let channels = [                                                                // Channels des Systems die verwendet werden sollen
            {
        
               idTarget: 'WeatherIndex',                                                     // Name Eures Ziel Datenpunktes, wird aus 'strukturChannel' + 'idDatenpunkt' zusammengesetzt
        
               idChannel: 'hm-rpc.0'                                                // id des Channels der Überwacht wird
            }
        
        ]
        
        
        let datenpunkte = [
         {
        
               id: 'OEQ1717756.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
               graphSettings: { type: 'line',
                                color: '#ff0015',
                                legendText: 'Kinderzimmer',                                     // Legende
                                datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                                yAxis_id: 0,
                                //yAxis_show: 'false',
                                line_UseFillColor: 'true',                                  // Füllfarbe unter Linie
                                displayOrder: 0,                                          //Reihenfolge der Überlagerung des Graphen
                                yAxis_position: 'left',                                    // Beschriftungseite y Achse
                                barIsStacked: 'true'                                    // bar ist gestapelt
        }
           },
           {
        
               id: 'PEQ1314339.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
               graphSettings: { type: 'line',
                                color: '#0af50e',
                                legendText: 'Bad',                                     // Legende
                                datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                                yAxis_id: 1,
                                //yAxis_show: 'false',
                                line_UseFillColor: 'true',                                  // Füllfarbe unter Linie
                                displayOrder: 1,                                          //Reihenfolge der Überlagerung des Graphen
                                yAxis_position: 'left',                                    // Beschriftungseite y Achse
                                barIsStacked: 'true'                                    // bar ist gestapelt
        }
           },
        
           {
        
               id: 'OEQ1708362.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
               graphSettings: { type: 'line',
                                color: '#FF8C00',
                                legendText: 'Gästezimmer',                                     // Legende
                                datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                                yAxis_id: 2,
                                //yAxis_show: 'false',
                                line_UseFillColor: 'true',                                  // Füllfarbe unter Linie
                                displayOrder: 2,                                          //Reihenfolge der Überlagerung des Graphen
                                yAxis_position: 'left',                                    // Beschriftungseite y Achse
                                barIsStacked: 'true'                                    // bar ist gestapelt
        }
           },
        
        {
             id: 'OEQ1708374.4.ACTUAL_TEMPERATURE',                                                                                                                           // Ids die verwendet werden sollen und deren Einstellungen
             graphSettings: {   type: 'line',
                                color: '#0d47a1',
                                legendText: 'Flur',                                   // Legende
                                datalabel_show: 'false',                                // Wertbeschriftung anzeigen/ nicht anzeigen
                                yAxis_id: 3,
                                //yAxis_show: 'true',
                                line_UseFillColor: 'true',                              // Füllfarbe unter Linie
                                displayOrder: 3,                                        //Reihenfolge der Überlagerung des Graphen
                                yAxis_title_text: 'C°',                               // Achsentitel
                                yAxis_title_color: '#44739e',                            // Achsentitel Farbe
                                yAxis_title_fontSize: 24,                                // Achsentitel Schriftgrösse
                                barIsStacked: 'true'                                    // bar ist gestapelt
         }  
         
           },
        
        ]
        
        
        
        let globalGraphSettings = {                           // gemeinsam verwendet Chart Einstellungen, details siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart
        
           line_Thickness: 3,           //Liniendicke
           line_pointSize: 0,           //Linie Punkt Größe
        
          //datalabel_show: false,       // Wertbeschriftung anzeigen/ nicht anzeigen
          datalabel_minDigits: 2,       //datalabel min Stellen
          datalabel_maxDigits: 2,       //datalabel max Stellen
         
         
         yAxis_min: 10,                 // yAchse min.
         yAxis_max: 30,                 // yAchse max.
         yAxis_minimumDigits: 1,      //min. Anzahl Dezimalstellen
         yAxis_maximumDigits: 1,      //max. Anzahl Dezimalstellen
         yAxis_maxSteps: 5,           //max.  Anzahl der Achsenbeschriftung
         yAxis_zeroLineWidth: 0,
         yAxis_show: 'true',
           xAxis_bounds: 'ticks',       //xAchsen_Grenzen
         
           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"
        
           }
        
        }
        
        
        
        // **********************************************************************************************************************************************************************
        
        
        
        function refreshData() {
        
           try {
        
               createControlDatapoints();
        
        
        
               let start = getChartStart();
        
               let end = moment();
        
               if (debug) console.debug(`[refreshData]: chart time interval: start: ${start.format('LLL')}, end: ${end.format('LLL')}`)
        
        
        
               let historyOptions = {
        
                   start: start.valueOf(),
        
                   end: end.valueOf()
        
               }
        
        
        
               for (const channel of channels) {
        
                   let graphs = [];
        
        
        
                   for (const datenpunkt of datenpunkte) {
        
                       let idSource = `${channel.idChannel}.${datenpunkt.id}`;
        
        
        
                       if (existsState(idSource)) {
        
                           // create Json Data for Graph
        
                           if (debug) console.debug(`[refreshData]: get history data for datapoint '${idSource}'`);
        
        
        
                           historyOptions.aggregate = (datenpunkt.graphSettings.aggregate) ? datenpunkt.graphSettings.aggregate : historyDefaultAggregate;
        
                           historyOptions.count = (datenpunkt.graphSettings.count) ? datenpunkt.graphSettings.count : historyDefaultCount;
        
                           historyOptions.timeout = (datenpunkt.graphSettings.timeout) ? datenpunkt.graphSettings.timeout : historyDefaultTimeout;
        
        
        
                           if (debug) console.debug(`[refreshData]: chart options for '${datenpunkt.id}': ${JSON.stringify(historyOptions)}`);
        
        
        
                           let historyData = getHistoryGraphData(idSource, historyInstance, historyOptions, datenpunkt.graphSettings);
        
        
        
                           if (historyData) {
        
                               graphs.push(historyData);
        
                           }
        
        
        
                       } else {
        
                           if (debug) console.warn(`[refreshData]: datapoint '${idSource}' not exist! Perhaps you must activate it in the settings of Coronavirus-Statistics Adapter or delete it from the skript`);
        
                       }
        
        
        
                       Promise.all(graphs).then((result) => {
        
                           mySetState(`${strukturChannel}.${channel.idTarget}`, JSON.stringify({ graphs: result }), 'string', `${channel.idTarget} Daten für JsonChart Widget`);
        
                       });
        
                   }
        
               }
        
        
        
           } catch (err) {
        
               console.error(`[refreshData] error: ${err.message}, stack: ${err.stack}`);
        
           }
        
        }
        
        
        
        refreshData();
        
        
        
        function createControlDatapoints() {
        
           if (!existsState(idTimeIntervalDatenpunkt)) {
        
               if (debug) console.debug(`[createControlDatapoints]: create datapoint '${idTimeIntervalDatenpunkt}'`);
        
               mySetState(idTimeIntervalDatenpunkt, '7 days', 'string', `Filter für Charts`);
        
           }
        
        }
        
        
        
        function getChartStart() {
        
           let startDateTime = moment();
        
        
        
           if (existsState(idTimeIntervalDatenpunkt)) {
        
               let val = getState(idTimeIntervalDatenpunkt).val;
        
        
        
               if (val === '1 hour') {
        
                   startDateTime.add('-1', 'hours');
               
               } else if (val === '12 hours') {
        
                   startDateTime.add('-12', 'hours');
        
                   // startDateTime = startDateTime.startOf('hour');
        
               } else if (val === '1 day') {
        
                   startDateTime.add('-1', 'days');
        
               } else if (val === '3 days') {
        
                   startDateTime.add('-3', 'days');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else if (val === '7 days') {
        
                   startDateTime.add('-7', 'days');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else if (val === '14 days') {
        
                   startDateTime.add('-14', 'days');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else if (val === '1 month') {
        
                   startDateTime.add('-1', 'months');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else if (val === '2 months') {
        
                   startDateTime.add('-2', 'months');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else if (val === '3 months') {
        
                   startDateTime.add('-3', 'months');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else if (val === '6 months') {
        
                   startDateTime.add('-6', 'months');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else if (val === '1 year') {
        
                   startDateTime.add('-1', 'years');
        
                   startDateTime = startDateTime.startOf('day');
        
               } else {
        
                   startDateTime.add('-7', 'days');
        
                   startDateTime = startDateTime.startOf('day');
        
               }
        
           } else {
        
               startDateTime.add('-7', 'days');
        
               startDateTime = startDateTime.startOf('day');
        
           }
        
        
        
           return startDateTime;
        
        }
        
        
        
        function getHistoryGraphData(id, historyInstance, options, graphSettings) {
        
           try {
        
               // graphSettings must be cloned to new var, prevent pointing to same memory adress because promise is in for loop
        
               let graph = Object.assign({ ...graphSettings }, globalGraphSettings);
        
        
        
               let obj = getObject(id);
        
               if (obj && obj.common && obj.common.custom && obj.common.custom[historyInstance]) {
        
                   return new Promise((resolve, reject) => {
        
                       sendTo(historyInstance, 'getHistory', {
        
                           id: id,
        
                           options: options
        
                       }, function (query) {
        
                           graph.data = getPreparedData(query.result)
        
                           resolve(graph);
        
                       });
        
        
        
                   });
        
               } else {
        
                   if (debug) console.warn(`[getHistoryGraphData]: no history instance '${historyInstance}' exist for datapoint '${id}'!`);
        
               }
        
        
        
               return undefined
        
        
        
               function getPreparedData(data) {
        
                   if (data) {
        
                       return data.map(elm => ({
        
                           t: (elm.ts !== null && elm.ts !== undefined) ? elm.ts : null,
        
                           y: (elm.val !== null && elm.val !== undefined) ? elm.val : null
        
                       }));
        
                   }
        
                   return [];
        
               };
        
           } catch (ex) {
        
               console.error(`[getHistoryGraphData]: error: ${ex.message}, stack: ${ex.stack}`);
        
           }
        
        };
        
        
        
        function mySetState(id, val, type, name) {
        
           if (existsState(id)) {
        
               if (debug) console.debug(`[mySetState]: history chart data stored to '${id}'`);
        
               setState(id, val, true);
        
           } else {
        
               if (debug) console.debug(`[mySetState]: create datapoint '${id}'`);
        
               createUserStates(false, [
        
                   id, {
        
                       'name': name,
        
                       'type': type,
        
                       'read': true,
        
                       'write': true
        
                   }
        
               ], function () {
        
                   setState(id, val, true);
        
               });
        
           }
        
        }
        
        
        
        /**
        
        * Create states under 0_userdata.0 or javascript.x
        
        * Current Version:     https://github.com/Mic-M/iobroker.createUserStates
        
        * Support:             https://forum.iobroker.net/topic/26839/
        
        * Autor:               Mic (ioBroker) | Mic-M (github)
        
        * Version:             1.1 (26 January 2020)
        
        * Example:             see https://github.com/Mic-M/iobroker.createUserStates#beispiel
        
        * -----------------------------------------------
        
        * PLEASE NOTE: Per https://github.com/ioBroker/ioBroker.javascript/issues/474, the used function setObject()
        
        *              executes the callback PRIOR to completing the state creation. Therefore, we use a setTimeout and counter.
        
        * -----------------------------------------------
        
        * @param {boolean} force         Force state creation (overwrite), if state is existing.
        
        * @param {array} statesToCreate  State(s) to create. single array or array of arrays
        
        * @param {object} [callback]     Optional: a callback function -- This provided function will be executed after all states are created.
        
        */
        
        function createUserStates(force, statesToCreate, callback = undefined) {
        
           const where = '0_userdata.0'
        
        
        
           const WARN = false; // Only for 0_userdata.0: Throws warning in log, if state is already existing and force=false. Default is false, so no warning in log, if state exists.
        
           const LOG_DEBUG = false; // To debug this function, set to true
        
           // Per issue #474 (https://github.com/ioBroker/ioBroker.javascript/issues/474), the used function setObject() executes the callback
        
           // before the state is actual created. Therefore, we use a setTimeout and counter as a workaround.
        
           const DELAY = 50; // Delay in milliseconds (ms). Increase this to 100, if it is not working.
        
        
        
           // Validate "where"
        
           if (where.endsWith('.')) where = where.slice(0, -1); // Remove trailing dot
        
           if ((where.match(/^((javascript\.([1-9][0-9]|[0-9]))$|0_userdata\.0$)/) == null)) {
        
               log('This script does not support to create states under [' + where + ']', 'error');
        
               return;
        
           }
        
        
        
           // Prepare "statesToCreate" since we also allow a single state to create
        
           if (!Array.isArray(statesToCreate[0])) statesToCreate = [statesToCreate]; // wrap into array, if just one array and not inside an array
        
        
        
           // Add "where" to STATES_TO_CREATE
        
           for (let i = 0; i < statesToCreate.length; i++) {
        
               let lpPath = statesToCreate[i][0].replace(/\.*\./g, '.'); // replace all multiple dots like '..', '...' with a single '.'
        
               lpPath = lpPath.replace(/^((javascript\.([1-9][0-9]|[0-9])\.)|0_userdata\.0\.)/, '') // remove any javascript.x. / 0_userdata.0. from beginning
        
               lpPath = where + '.' + lpPath; // add where to beginning of string
        
               statesToCreate[i][0] = lpPath;
        
           }
        
        
        
           if (where != '0_userdata.0') {
        
               // Create States under javascript.x
        
               let numStates = statesToCreate.length;
        
               statesToCreate.forEach(function (loopParam) {
        
                   if (LOG_DEBUG) log('[Debug] Now we are creating new state [' + loopParam[0] + ']');
        
                   let loopInit = (loopParam[1]['def'] == undefined) ? null : loopParam[1]['def']; // mimic same behavior as createState if no init value is provided
        
                   createState(loopParam[0], loopInit, force, loopParam[1], function () {
        
                       numStates--;
        
                       if (numStates === 0) {
        
                           if (LOG_DEBUG) log('[Debug] All states processed.');
        
                           if (typeof callback === 'function') { // execute if a function was provided to parameter callback
        
                               if (LOG_DEBUG) log('[Debug] Function to callback parameter was provided');
        
                               return callback();
        
                           } else {
        
                               return;
        
                           }
        
                       }
        
                   });
        
               });
        
           } else {
        
               // Create States under 0_userdata.0
        
               let numStates = statesToCreate.length;
        
               let counter = -1;
        
               statesToCreate.forEach(function (loopParam) {
        
                   counter += 1;
        
                   if (LOG_DEBUG) log('[Debug] Currently processing following state: [' + loopParam[0] + ']');
        
                   if (($(loopParam[0]).length > 0) && (existsState(loopParam[0]))) { // Workaround due to https://github.com/ioBroker/ioBroker.javascript/issues/478
        
                       // State is existing.
        
                       if (WARN && !force) log('State [' + loopParam[0] + '] is already existing and will no longer be created.', 'warn');
        
                       if (!WARN && LOG_DEBUG) log('[Debug] State [' + loopParam[0] + '] is already existing. Option force (=overwrite) is set to [' + force + '].');
        
                       if (!force) {
        
                           // State exists and shall not be overwritten since force=false
        
                           // So, we do not proceed.
        
                           numStates--;
        
                           if (numStates === 0) {
        
                               if (LOG_DEBUG) log('[Debug] All states successfully processed!');
        
                               if (typeof callback === 'function') { // execute if a function was provided to parameter callback
        
                                   if (LOG_DEBUG) log('[Debug] An optional callback function was provided, which we are going to execute now.');
        
                                   return callback();
        
                               }
        
                           } else {
        
                               // We need to go out and continue with next element in loop.
        
                               return; // https://stackoverflow.com/questions/18452920/continue-in-cursor-foreach
        
                           }
        
                       } // if(!force)
        
                   }
        
        
        
                   // State is not existing or force = true, so we are continuing to create the state through setObject().
        
                   let obj = {};
        
                   obj.type = 'state';
        
                   obj.native = {};
        
                   obj.common = loopParam[1];
        
                   setObject(loopParam[0], obj, function (err) {
        
                       if (err) {
        
                           log('Cannot write object for state [' + loopParam[0] + ']: ' + err);
        
                       } else {
        
                           if (LOG_DEBUG) log('[Debug] Now we are creating new state [' + loopParam[0] + ']')
        
                           let init = null;
        
                           if (loopParam[1].def === undefined) {
        
                               if (loopParam[1].type === 'number') init = 0;
        
                               if (loopParam[1].type === 'boolean') init = false;
        
                               if (loopParam[1].type === 'string') init = '';
        
                           } else {
        
                               init = loopParam[1].def;
        
                           }
        
                           setTimeout(function () {
        
                               setState(loopParam[0], init, true, function () {
        
                                   if (LOG_DEBUG) log('[Debug] setState durchgeführt: ' + loopParam[0]);
        
                                   numStates--;
        
                                   if (numStates === 0) {
        
                                       if (LOG_DEBUG) log('[Debug] All states processed.');
        
                                       if (typeof callback === 'function') { // execute if a function was provided to parameter callback
        
                                           if (LOG_DEBUG) log('[Debug] Function to callback parameter was provided');
        
                                           return callback();
        
                                       }
        
                                   }
        
                               });
        
                           }, DELAY + (20 * counter));
        
                       }
        
                   });
        
               });
        
           }
        
        }
        
        
        
        

        Unbenannt.PNG

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

        Hallo @svenomatt

        wenn sich Graphen auf die gleiche y-Achse beziehen sollen, musst Du Ihnen die gleiche

        yAxis_id: 1
        

        geben. Du hast 1, 2 und 3 vergeben

        Für das Problem mit den leeren Stellen am Anfang und am Ende: Probiere mal mit den Widget-Einstellungen xAxisTicksSource: und Versatz der x-Achse: im Abschnitt X-Achsen Layout.

        Allerdings scheint es so zu sein, dass mit voranschreitender Zeit irgendwann der nächste Tick entsprechend der eingestellten Intervalle am rechten Ende erscheint und da bis zu diesem in der Zukunft liegendem Zeitpunkt noch keine Daten vorliegen, bleibt eine Lücke. Warum dies auch links der Fall ist, kann ich nicht sagen, aber ich habe das auch. Siehe z.B. hier (Zeitpunkt des Screenshots 09:20 Uhr):

        2022-01-30_09-22-16.png

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

        1 Antwort Letzte Antwort
        0
        • Bernd 0B Offline
          Bernd 0B Offline
          Bernd 0
          schrieb am zuletzt editiert von
          #92

          @bernd-0 said in Material Design Widgets: JSON Chart Widget:

          Ich habe "nur" den Link zu einem JSON Datensatz.
          https://api.solcast.com.au/rooftop_sites/bf92-b91e-170c-f1e9/forecasts?format=json

          Kann mir jemand einen Tipp geben, wie ich weitermachen kann? Vielen Dank!

          O 1 Antwort Letzte Antwort
          0
          • Bernd 0B Bernd 0

            @bernd-0 said in Material Design Widgets: JSON Chart Widget:

            Ich habe "nur" den Link zu einem JSON Datensatz.
            https://api.solcast.com.au/rooftop_sites/bf92-b91e-170c-f1e9/forecasts?format=json

            Kann mir jemand einen Tipp geben, wie ich weitermachen kann? Vielen Dank!

            O Offline
            O Offline
            ostseeskipper
            schrieb am zuletzt editiert von
            #93

            Ich find das Chart Widget gut und übersichtlich im Design und würde das gern nutzen.
            Hätte da mal ne ganz unbedarfte und vielleicht blöde Frage:
            Wenn es im Stable Repository von ioBroker drin ist wieso finde ich das nicht um es installieren zu können?
            4cf287d5-f574-43a4-b8bc-ebe8177f65f1-grafik.png

            gibts da nen Trick?

            M 1 Antwort Letzte Antwort
            0
            • O ostseeskipper

              Ich find das Chart Widget gut und übersichtlich im Design und würde das gern nutzen.
              Hätte da mal ne ganz unbedarfte und vielleicht blöde Frage:
              Wenn es im Stable Repository von ioBroker drin ist wieso finde ich das nicht um es installieren zu können?
              4cf287d5-f574-43a4-b8bc-ebe8177f65f1-grafik.png

              gibts da nen Trick?

              M Online
              M Online
              micklafisch
              schrieb am zuletzt editiert von
              #94

              @ostseeskipper
              weil dein Suchbegriff komisch aussieht?

              ca55c944-633e-4bbf-a921-0b5ef7bbb8c5-image.png

              1 Antwort Letzte Antwort
              0
              • M Online
                M Online
                micklafisch
                schrieb am zuletzt editiert von micklafisch
                #95

                hat jemand zufällig mit dem JSON Chart schon ein derartiges Szenario umgesetzt:

                Aus der History DB sollen Werte im Tagesverlauf abgefragt werden. Z.b. Wasserverbrauch in der Tagesansicht, zeitlich aufgelöst in Stunden. Immer 24 Stunden in einem Chart.

                Das für mich kniffelige wäre darunter ein Datumsfeld mit + oder - zu haben mit dem ich tageweise vor oder zurückblättern kann um den Chart für den entsprechenden Tag anzuzeigen. Quasi so:

                7e21791d-7afa-435a-856a-e24bd859cdc6-image.png

                1 Antwort Letzte Antwort
                0
                • frank2604F frank2604

                  Vielleicht noch die InfluxDB Seite zum obigen Skript mit ein paar Erläuterungen:

                  2022-01-15_15-42-30.png

                  Zum Verständnis. Der Aufbau der Abfrage ist eine Pipeline. Die Daten werden von einem Schritt zum nächsten weitergereicht. Insofern ist die Reihenfolge mitunter entscheidend!

                  from(bucket: "iobroker")
                    |> range(start: -8d)
                    |> filter(fn: (r) => r["_measurement"] == "Strom.Heizung.Energie_in_der_letzten_Stunde")
                    |> 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)
                  

                  Im Einzelnen:

                  |> range(start: -8d)
                  

                  Relative Zeitangabe. Warum -8Tage? Die relative Zeitangabe geht von der aktuellen Uhrzeit die Anzahl der Tage zurück. Somit beginnt der erste Tag im Beispiel bei 14:39 Uhr. Ich hätte also beim ersten Tag keinen ganzen Tag. Das macht im Chart aber keinen Sinn. Daher gehe ich 8 Tage zurück und schneide unten den ersten Tag weg.

                  |> filter(fn: (r) => r["_measurement"] == "Strom.Heizung.Energie_in_der_letzten_Stunde")
                  

                  Sollte klar sein. Das ist der Datenpunkt, der abgefragt wird. Ich verwende Alias bei den History-Einstellungen, daher sieht das möglicherweise anders aus als bei Euch

                  |> drop(columns: ["_field", "ack", "from", "q"])
                  

                  Optional: Zur besseren Lesbarkeit die Spalten, die nicht benötigt werden, weg lassen.

                  |> aggregateWindow(every: 1d, fn: sum, createEmpty: false)
                  

                  Hier wird die Aggregation angegeben. Die Rohdaten enthalten den Energieverbrauch der letzten Stunde.
                  Aggregation: every: 1d, also je Tag und fn: sum, also die Summe innerhalb der Tage.

                  |> timeShift(duration: -1s)
                  

                  Warum das? Die Energie der Stunde von 23:00 bis 00:00 wird um 00:00:00.005 geschrieben. Dieser Datensatz fällt also aus Datensicht in den nächsten Tag. Daher versetzte ich die Zeit um eine Sekunde zurück: 23:59:59

                  |> truncateTimeColumn(unit: 1d)
                  

                  Jetzt entferne ich die Uhrzeiten wieder

                    |> sort(columns: ["_time"], desc: true)
                    |> limit(n:7)
                    |> sort(columns: ["_time"], desc: false)
                  

                  Mit diesen 3 Zeilen "schneide" ich den ersten Tag ab. Das geht vielleicht auch eleganter, aber im Influx-Forum habe ich keine Rückmeldung auf meine Frage bekommen.

                  Tip: Zum Nachvollziehen einfach die Schritte nach drop(columns ...) erstmal weg lassen und nacheinander einfügen und immer die Zwischenergebnisse anschauen, dann wird verständlich was passiert.

                  Grüße

                  Frank

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

                  @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 1 Antwort Letzte Antwort
                  0
                  • 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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          797

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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