Test Adapter flexcharts - Stapeldiagramme und mehr

UlliJ

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

Dieses Feld wird via Binding mit einem Datenpunkt verbunden, in den man die Update-Zeit reinschreibt. Immer wenn dies geschieht, baut sich das iFrame mit dem Diagramm neu auf. Selbstverständlich muss zuvor das (als JSON) bereitgestellte Diagramm im zugrundeliegenden Datenpunkt aktualisiert worden sein.

das wird probiert. Die Updatezeit setzt Du vermutlich anschließend wieder auf 0?
Danke.

legro

@ullij sagte in [Test Adapter flexcharts - Stapeldiagramme und mehr](/post/

das wird probiert. Die Updatezeit setzt Du vermutlich anschließend wieder auf 0?
Danke.

Was du da reinschreibst, ist egal. Allein ein (Schreib)Zugriff löst bereits eine Aktualisierung aus.

legro

@ullij

Hier mein Vorgehen en detail ..

Um ein Diagramm aktuell zu halten und es in einem iFrame zu aktualisieren, definiere ich einen MultiTrigger ( -> Array mit Datenpunkten ).

on({id: ['0_userdata.0.A_Trigger_Test.Test1','0_userdata.0.A_Trigger_Test.Test2'], change: 'any'},function(obj) {
    console.log(obj) // ersetzen durch AktualisiereChart()
    setState(''0_userdata.0.A_Trigger_Test.refreshChart',0,true) // Updatezeit des iFrame beschreiben
});

Wenn sich einer der Datenpunkte ändert, wird der Trigger ausgelöst und in der Variable obj findet man alle Eigenschaften des Datenpunktes, der sich geändert hat und der im obigem BeispielCode via console.log ausgeben wird. Anstelle dieser Ausgabe ruft man natürlich die Funktion auf, welche das (als JSON gespeicherte) Chart aktualisiert.
Im letzten Schritt wird auf den Datenpunkt zugegriffen, der (via Binding) die Updatezeit des iFrame-Widgets enthält. Hierdurch wird das Diagramm im iFrame-Widget neu geladen/aktualisiert.

Anm.: In der Variable obj ist das dort (noch) vorhandene Feld newState abgekündigt und sollte daher durch state in den eigenen Anwendungen ersetzt werden. Hier ein Beispiel zur obigen Ausgabe von console.log ..

javascript.0	10:37:17.537	info	
EventObj {
  id: '0_userdata.0.A_Trigger_Test.Test2',
  newState: {
    val: 1,
    ts: 1761817037532,
    ack: false,
    lc: 1761817037532,
    from: 'system.adapter.admin.0',
    q: 0,
    c: undefined,
    user: 'system.user.legro'
  },
  oldState: {
    val: 2,
    ts: 1761816833753,
    ack: false,
    lc: 1761816833753,
    from: 'system.adapter.admin.0',
    q: 0,
    c: undefined,
    user: 'system.user.legro'
  },
  state: {
    val: 1,
    ts: 1761817037532,
    ack: false,
    lc: 1761817037532,
    from: 'system.adapter.admin.0',
    q: 0,
    c: undefined,
    user: 'system.user.legro'
  }
}

UlliJ

@legro
danke für die ausführliche Erklärung, würde ich ggf. hinkriegen:face_with_rolling_eyes:

Habe zwischenzeitlich einen anderen Ansatz über eine HTML-Seite mit socketio verfolgt, der mir ganz gut gefällt Hat aber nichts mehr mit flexcharts zu tun, daher OT.

ist beide Male ein iframe-widget. Oben mit flexcharts, unten ohne. Animationszeiten und Aktualisierung gleich eingestellt. Mit Flexcharts verschwindet das Diagramm kurz vollständig, unten nicht.
Muss mal sehen welcher Weg mir da besser gefällt um Grafana zu entsorgen. JS steht in jedem Fall auf der "Arbeitsliste".

MCU

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

HTML-Seite mit socketio

Zeig mal bitte das HTML, mit JS erstellt?

UlliJ

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

Zeig mal bitte das HTML

gehört eigentlich nicht hier in das Thema...
Nein, manuell als Vorlage für die anderen Diagramme (kann kein JS)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>PV Hochbeet Leistung</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    body {
      margin: 0;
      background: rgba(0,0,0,0);
      color: #fff;
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #chart {
      width: 90vw;
      height: 90vh;
    }
  </style>

  <!-- Lokale ECharts-Dateien -->
  <script src="./echarts.min.js"></script>
  <script src="/lib/js/socket.io.js"></script>
</head>

<body>
  <div id="chart"></div>

  <script>
    // ioBroker States
    const STATE_P1 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVOst';
    const STATE_P2 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVInnenhof';
    const STATE_P3 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVHochbeet';
    const STATE_P4 = '0_userdata.0.4000_EnergieErzeugung.PV.pacPVWest';

    let p1 = 0, p2 = 0, p3 = 0, p4 = 0;

    const socket = io.connect(window.location.origin);
    const chart = echarts.init(document.getElementById('chart'));

    // === Grundkonfiguration aus deiner JSON-Vorlage ===
    const option = {
      "tooltip": { "show": false, "trigger": "item" },
      "textStyle": { "fontFamily": "sans-serif", "fontSize": 14 },
      "legend": {
        "top": "20%",
        "left": "0%",
        "show": true,
        "align": "left",
        "orient": "vertical",
        "textStyle": { "color": "#ffffff", "opacity": 0.5 }
      },
      "series": [
        {
          "name": "PV Leistung",
          "type": "pie",
          "startAngle": 90,
          "padAngle": 3,
		  "animation": true,
	  "animationThreshold": 2000,
      "animationDuration": 500,
	  "animationDelay": 0,
      "animationDurationUpdate": 1500,
      "animationEasing": "cubicInOut",
      "animationEasingUpdate": "cubicInOut",
      "animationTypeUpdate": "transition",
          "radius": ["35%", "55%"],
          "center": ["75%", "40%"],
          "color": ["#406036", "#d387d6", "#c215b0", "#737B1A"],
          "label": {
            "show": false,
            "color": "#ffffff"
          },
          "avoidLabelOverlap": true,
          "itemStyle": {
            "borderRadius": 6,
            "borderColor": "#fff",
            "borderWidth": 0
          },
          "labelLine": { "show": false },
          "data": [
            { "value": 0, "name": "Ost 0 W" },
            { "value": 0, "name": "Haus 0 W" },
            { "value": 0, "name": "Hochbeet 0 W" },
            { "value": 0, "name": "West 0 W" }
          ]
        }
      ]
    };

    chart.setOption(option);

    // === Datenaktualisierung ===
    function updateChart() {
      const newData = [
        { value: p1, name: `Ost ${p1.toFixed(0)} W` },
        { value: p2, name: `Haus ${p2.toFixed(0)} W` },
        { value: p3, name: `Hochbeet ${p3.toFixed(0)} W` },
        { value: p4, name: `West ${p4.toFixed(0)} W` }
      ];

      chart.setOption({
        series: [{
          name: "PV Leistung",
          data: newData
        }]
      });
    }

    // === ioBroker Verbindung ===
    socket.on("connect", () => {
      socket.emit("subscribe", STATE_P1);
      socket.emit("subscribe", STATE_P2);
      socket.emit("subscribe", STATE_P3);
      socket.emit("subscribe", STATE_P4);
    });

    socket.on("stateChange", (id, state) => {
      if (!state || state.val === undefined) return;
      if (id === STATE_P1) p1 = state.val;
      if (id === STATE_P2) p2 = state.val;
      if (id === STATE_P3) p3 = state.val;
      if (id === STATE_P4) p4 = state.val;
      updateChart();
    });

    window.addEventListener("resize", () => chart.resize());
  </script>
</body>
</html>

legro

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

danke für die ausführliche Erklärung, würde ich ggf. hinkriegen:face_with_rolling_eyes:
Habe zwischenzeitlich einen anderen Ansatz über eine HTML-Seite mit socketio verfolgt, der mir ganz gut gefällt Hat aber nichts mehr mit flexcharts zu tun, daher OT.

Mache nicht denselben Fehler wie unsereiner. Seit Monaten bin ich damit beschäftigt, mein System zu konsolidieren. So habe ich immer, wenn mir etwas besonders gut gefiel, dies in mein System integriert. Das Ergebnis: Mit der Zeit ging mir zunehmend der Überblick verloren.😢

Muss mal sehen welcher Weg mir da besser gefällt um Grafana zu entsorgen. JS steht in jedem Fall auf der "Arbeitsliste".

Die Erfahrungen mit InfluxDB und insbesondere Grafana veranlassten mich, die Notbremse zu ziehen. Diese Art von Agrarinformatik kann ich einfach nicht mehr ertragen.

Zwar ist JavaScript diesbezüglich nicht viel besser, aber es lohnt sich allemal sich damit auseinander zu setzen. Damit sind Dinge möglich, die ich in den mir vertrauten Sprachen wohl nie hinbekommen hätte. Nachdem ich jahrelang einfach keinen Zugang zu JavaScript fand, habe ich letztes Jahr alles über Board geworfen, von dem ich überzeugt bin, was eine Programmiersprache an Eigenschaften haben sollte - von da an ging’s rasant voran.:relaxed: Wenn du wie unsereiner von streng typisierten Sprachen kommst, solltest du dich ggf. inTypeScript vertiefen; es wird kolportiert, dass das bloß ein „strengeres“ JavaScript sei.

icebear

Ich habe heute den ganzen Tag versucht umzusetzten, das bei dem Graph:

der obere Bereich für die Ladeleistung areaStyle = grün und der untere areaStyle= rot eingefärbt wird, aber ich kriegs nich hin, es bleibt immer blau.

Geht das mit dem flexchart-Adapter oder überhaupt mit Apache echart?

Hier noch die Scripte mit denen ich das probiert hab:

Versuch:

// Importiere javascript-stringify
const stringify = require('javascript-stringify'); 

// --- KONFIGURATION ---
const INFLUXDB_INSTANCE = 'influxdb.0'; 
const FLEXCHARTS_TARGET_STATE = '0_userdata.0.Flexcharts.Battery24Hours'; 

// --- ZEIT-KONFIGURATION ---
const TIME_RANGE_MS = 24 * 3600 * 1000; // 24 Stunden (00:00 bis 24:00)
const STEP_5M_MS = 5 * 60 * 1000;       // 5 Minuten Auflösung für die Leistung (Basis für X-Achse)
const STEP_1M_MS = 60 * 1000;           // 1 Minuten Auflösung für den Ladestand (Basis: 60s Speicherung)

// Definiere die Datenpunkte und ihre Zuordnung zu den Y-Achsen
const DATAPOINTS_CONFIG = [
    // 0. Batterieleistung (kW)
    { id: 'senec.0.ENERGY.GUI_BAT_DATA_POWER', name: 'Batterieleistung', type: 'line', yAxisIndex: 0, unit: 'kW', step_ms: STEP_5M_MS, smooth: true, lineWidth: 3 },
    
    // 1. Ladestand (%) - MUSS AUF Y-ACHSE 0!
    { id: 'senec.0.ENERGY.GUI_BAT_DATA_FUEL_CHARGE', name: 'Ladestand', type: 'line', yAxisIndex: 0, unit: '%', color: '#0040ff', step_ms: STEP_1M_MS, smooth: true, lineWidth: 2, is_fuel_charge: true },
];

// ----------------------------------------------------------------------

// Starte das Skript alle 5 Minuten
schedule('*/5 * * * *', async () => { 
    await createAndSetChartData();
});

// Starte das Skript sofort beim Start
createAndSetChartData();


/**
 * Hilfsfunktion zum Abfragen der History-Daten.
 */
function queryHistoryData(id: string, options: any): Promise<any> {
    return new Promise<any>((resolve, reject) => {
        sendTo(INFLUXDB_INSTANCE, 'getHistory', { id: id, options: options }, (result) => {
            if (result && (result as any).error) {
                reject(new Error(result.error));
            } else {
                resolve(result); 
            }
        });
    });
}

/**
 * Normalisiert die History-Antwort.
 */
function extractDataArray(result: any): any[] {
    if (Array.isArray(result)) return result;
    if (result && Array.isArray(result.result)) return result.result;
    if (result && Array.isArray(result.data)) return result.data; 
    return [];
}

/**
 * Generiert alle X-Achsen Zeitstempel von 00:00 bis 23:55 (heute).
 */
function generateFullDayTimestamps(startOfTodayMs: number): string[] {
    const timestamps: string[] = [];
    const endOfTodayMs = startOfTodayMs + TIME_RANGE_MS; 
    
    // Die X-Achse bleibt bei 5-Minuten-Schritten für die Übersichtlichkeit
    for (let ts = startOfTodayMs; ts < endOfTodayMs; ts += STEP_5M_MS) {
        const date = new Date(ts);
        timestamps.push(date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }));
    }
    return timestamps;
}


// Hauptfunktion zur Abfrage der Daten und Erstellung des Charts
async function createAndSetChartData(): Promise<void> {
    
    // 1. ZEITRAUM BERECHNUNG
    const now = Date.now();
    const todayStart = new Date().setHours(0, 0, 0, 0); 
    
    const endTimeHistory = now; 

    // Erzeuge die X-Achse für den kompletten Tag (00:00 bis 23:55)
    const fullDayTimestamps = generateFullDayTimestamps(todayStart);

    try {
        // --- 2. DATENABFRAGE ---
        
        const historyPromises = DATAPOINTS_CONFIG.map(dp => {
            const historyOptions = {
                start: todayStart,
                end: endTimeHistory, 
                aggregate: 'average', 
                step: dp.step_ms, 
                limit: 5000, 
                removeBorderValues: false
            };
            return queryHistoryData(dp.id, historyOptions).catch(e => {
                log(`FEHLER bei History-Abfrage ${dp.name} (${dp.id}): ${e.message}`, 'error');
                return { result: [] }; 
            });
        });
        
        const historyResults = await Promise.all(historyPromises);
        
        // 3. DATEN MAPPING & TRANSFORMATION
        const seriesDataMap = new Map<string, (number | null)[]>();
        let maxAbsPower = 0; // Für die symmetrische Y-Achse

        DATAPOINTS_CONFIG.forEach((dpConfig, index) => {
            const rawData = extractDataArray(historyResults[index]) || [];
            
            const dataByTimeKey = new Map<number, number>();
            
            rawData.forEach((entry: any) => {
                let entryTs = entry.ts; 
                let val = entry.val; 

                if (val !== null && typeof val === 'number') {
                    
                    val = parseFloat(val.toFixed(2));
                    
                    // WATT ZU KILOWATT KONVERTIERUNG
                    if (dpConfig.unit === 'kW') {
                        val = val / 1000;
                    }
                    
                    // Max-Wert für symmetrische Achse berechnen (NUR FÜR LEISTUNG!)
                    if (!dpConfig.is_fuel_charge) {
                        maxAbsPower = Math.max(maxAbsPower, Math.abs(val));
                    }
                    
                    // Normalisiere den Zeitstempel auf den Beginn des Abfrage-Intervalls (5m oder 1m)
                    const intervalStart = Math.floor(entryTs / dpConfig.step_ms) * dpConfig.step_ms;
                    dataByTimeKey.set(intervalStart, val);
                }
            });

            // Erzeuge die Serie für ECharts (volle Länge der X-Achse in 5-Minuten-Schritten)
            const seriesData: (number | null)[] = [];
            let currentTimelineMs = todayStart;
            
            // Initialisiere den letzten gültigen Wert für den Ladestand mit 0%
            let lastValidChargeValue: number | null = dpConfig.is_fuel_charge ? 0 : null; 

            for (let i = 0; i < fullDayTimestamps.length; i++) {
                
                // Wir verwenden dpConfig.step_ms nur für die key-Suche
                const timeKey = Math.floor(currentTimelineMs / dpConfig.step_ms) * dpConfig.step_ms;
                
                let value = dataByTimeKey.get(timeKey);

                // --- LOGIK FÜR NULL-WERTE UND KONTINUITÄT ---
                
                // 1. Wenn der aktuelle Zeitpunkt NACH 'now' liegt (Zukunft) -> Linie beenden
                if (currentTimelineMs > now) {
                     seriesData.push(null);
                } 
                // 2. Wenn ein GÜLTIGER Wert gefunden wurde
                else if (value !== undefined && value !== null) {
                    if (dpConfig.is_fuel_charge) {
                        lastValidChargeValue = value; // Letzten gültigen Wert speichern
                    }
                    seriesData.push(value);
                } 
                // 3. Wenn KEIN Wert gefunden wurde
                else {
                    // Für Leistungsdaten (kW), die fehlen, setzen wir 0.
                    if (dpConfig.unit === 'kW') {
                        seriesData.push(0);
                    } 
                    // Für Ladestand (%) verwenden wir den zuletzt bekannten gültigen Wert (startet bei 0).
                    else if (dpConfig.is_fuel_charge) {
                        seriesData.push(lastValidChargeValue); 
                    }
                    // Fallback
                    else {
                        seriesData.push(null); 
                    }
                }
                
                // ---------------------------------------------------

                currentTimelineMs += STEP_5M_MS; 
            }

            seriesDataMap.set(dpConfig.name, seriesData);
        });
        
        // Runden des Max-Werts auf die nächste ganze Zahl + 1 und Mindestwert 5
        let symmetricPowerLimit = Math.ceil(maxAbsPower) + 1;
        if (symmetricPowerLimit < 5) {
            symmetricPowerLimit = 5;
        }
        
        // *** TRANSFORMATION DES LADESTANDS ***
        // Formel: Skaliert 0% -> 0 kW und 100% -> +PowerLimit kW
        const fuelChargeData = seriesDataMap.get('Ladestand');
        if (fuelChargeData) {
            const transformedData = fuelChargeData.map(val => {
                if (val === null) return null;
                return (val / 100) * symmetricPowerLimit; 
            });
            seriesDataMap.set('Ladestand (Skaliert)', transformedData);
        }
        // ************************************


        // 4. CHART-DEFINITION (ECharts Option)
        const series = DATAPOINTS_CONFIG.map(dp => {
            const seriesName = dp.is_fuel_charge ? 'Ladestand (Skaliert)' : dp.name;
            const seriesData = seriesDataMap.get(seriesName) || [];

            const seriesConfig: any = { 
                name: dp.name, // Name im Legend/Tooltip
                type: dp.type,
                yAxisIndex: 0, // Nur noch Achse 0
                data: seriesData,
                itemStyle: {
                    color: dp.is_fuel_charge ? dp.color : undefined 
                },
                lineStyle: {
                    width: dp.lineWidth || 1 
                },
                smooth: dp.smooth || false, 
                showSymbol: false,
                z: dp.is_fuel_charge ? 10 : 1, // Ladestand über der Leistung zeichnen
                
                // KORREKTUR: areaStyle nur für Batterieleistung (kW), NICHT für Ladestand!
                // Die Farbe MUSS von der Visual Map übernommen werden.
                areaStyle: (dp.unit === 'kW' && !dp.is_fuel_charge) ? {} : undefined, 
            };
            
            return seriesConfig;
        });
        
        // Wir verwenden nur noch EINE Y-Achse
        const yAxis = [
            // Y-Achse 0 (Links): Leistung (kW) / Skalierter Ladestand
            {
                type: 'value',
                name: 'Leistung (kW)',
                min: -symmetricPowerLimit, 
                max: symmetricPowerLimit,  
                axisLabel: {
                    formatter: (value: number) => value.toFixed(1) + ' kW',
                    color: '#FFFFFF'
                },
                // Null-Linie hervorheben
                axisLine: { onZero: true, lineStyle: { color: '#888' } },
                splitLine: { show: true, lineStyle: { color: '#333333' } } 
            }
        ];
        
        // Visual Map zur Steuerung der Linienfarbe und NEU: Flächenfarbe
        const visualMap = {
            type: 'piecewise',
            seriesIndex: 0, // NUR FÜR DIE LEISTUNG (Index 0 in DATAPOINTS_CONFIG)
            show: true, 
            dimension: 2, 
            // Explizite Definition der Styles OHNE generische 'color'
            pieces: [
                { 
                    gt: 0, 
                    label: 'Laden', 
                    name: 'Laden', 
                    itemStyle: { color: '#2ECC40' }, // Linienfarbe GRÜN
                    areaStyle: { color: '#2ECC40', opacity: 0.6 } // Flächenfarbe GRÜN
                }, 
                { 
                    lte: 0, 
                    label: 'Entladen', 
                    name: 'Entladen', 
                    itemStyle: { color: '#FF4136' }, // Linienfarbe ROT
                    areaStyle: { color: '#FF4136', opacity: 0.6 } // Flächenfarbe ROT
                } 
            ],
            textStyle: {
                color: '#FFFFFF'
            },
            bottom: 20
        };

        const option = {
            backgroundColor: 'rgb(17, 18, 23, 0.0)',
            title: { text: 'Batterieübersicht (Laden/Entladen & Ladestand)' },
            visualMap: visualMap,
            tooltip: { 
                trigger: 'axis', 
                axisPointer: { type: 'line' },
                formatter: function (params: any[]) {
                    let res = params[0].name + '<br/>';
                    const powerLimit = symmetricPowerLimit;

                    // Sortiere die Tooltip-Einträge, damit Leistung und Ladestand korrekt dargestellt werden
                    params.sort((a, b) => {
                       const nameA = a.seriesName;
                       const nameB = b.seriesName;
                       // Ladestand (zweite Serie) soll nach der Leistung angezeigt werden
                       if (nameA.includes('Ladestand')) return 1; 
                       if (nameB.includes('Ladestand')) return -1;
                       return 0;
                    });
                    
                    params.forEach((item: any) => {
                        const dpConfig = DATAPOINTS_CONFIG.find(d => d.name === item.seriesName);
                        if (dpConfig && item.value !== null) {
                            
                            let value = item.value;
                            let seriesName = item.seriesName;
                            let unit = dpConfig.unit;
                            
                            if (dpConfig.is_fuel_charge) {
                                // Ladestand: Wert zurückrechnen auf 0-100%
                                value = (value / powerLimit) * 100;
                                seriesName = 'Ladestand (Blau)';
                                unit = '%';
                            } else {
                                // Leistung: Farben und Namen anpassen
                                seriesName = item.value > 0 ? 'Laden (Grün)' : 'Entladen (Rot)';
                            }
                            
                            res += item.marker + seriesName + ': **' + value.toFixed(dpConfig.unit === 'kW' ? 2 : 1) + ' ' + unit + '**<br/>';
                        }
                    });
                    return res;
                }
            },
            legend: { 
                 data: DATAPOINTS_CONFIG.map(item => item.name),
                 bottom: 0,
                 textStyle: { color: '#FFFFFF' }
            },
            grid: {
                left: '2%', right: '5%', bottom: '15%', top: '10%', containLabel: true 
            },
            xAxis: {
                type: 'category',
                data: fullDayTimestamps, 
                axisLabel: { color: '#FFFFFF' }
            },
            yAxis: yAxis,
            series: series
        };

        // 5. SPEICHERUNG IM FLEXCHARTS-STATE
        setState(FLEXCHARTS_TARGET_STATE, stringify.stringify(option), true);
        log(`ECharts-Optionen erfolgreich in State ${FLEXCHARTS_TARGET_STATE} geschrieben.`, 'info');

    } catch (e) {
        log(`Allgemeiner Fehler im Skript oder bei der History-Abfrage: ${e.message}`, 'error');
    }
}

Versuch:

// Importiere javascript-stringify
const stringify = require('javascript-stringify'); 

// --- KONFIGURATION ---
const INFLUXDB_INSTANCE = 'influxdb.0'; 
const FLEXCHARTS_TARGET_STATE = '0_userdata.0.Flexcharts.Battery24Hours'; 

// --- ZEIT-KONFIGURATION ---
const TIME_RANGE_MS = 24 * 3600 * 1000; // 24 Stunden (00:00 bis 24:00)
const STEP_5M_MS = 5 * 60 * 1000;       // 5 Minuten Auflösung für die Leistung (Basis für X-Achse)
const STEP_1M_MS = 60 * 1000;           // 1 Minuten Auflösung für den Ladestand (Basis: 60s Speicherung)

// Definiere die Datenpunkte und ihre Zuordnung zu den Y-Achsen
const DATAPOINTS_CONFIG = [
    // 0. Batterieleistung (kW)
    { id: 'senec.0.ENERGY.GUI_BAT_DATA_POWER', name: 'Batterieleistung', type: 'line', yAxisIndex: 0, unit: 'kW', step_ms: STEP_5M_MS, smooth: true, lineWidth: 3 },
    
    // 1. Ladestand (%) - MUSS AUF Y-ACHSE 0!
    { id: 'senec.0.ENERGY.GUI_BAT_DATA_FUEL_CHARGE', name: 'Ladestand', type: 'line', yAxisIndex: 0, unit: '%', color: '#0040ff', step_ms: STEP_1M_MS, smooth: true, lineWidth: 2, is_fuel_charge: true },
];

// ----------------------------------------------------------------------

// Starte das Skript alle 5 Minuten
schedule('*/5 * * * *', async () => { 
    await createAndSetChartData();
});

// Starte das Skript sofort beim Start
createAndSetChartData();


/**
 * Hilfsfunktion zum Abfragen der History-Daten.
 */
function queryHistoryData(id: string, options: any): Promise<any> {
    return new Promise<any>((resolve, reject) => {
        sendTo(INFLUXDB_INSTANCE, 'getHistory', { id: id, options: options }, (result) => {
            if (result && (result as any).error) {
                reject(new Error(result.error));
            } else {
                resolve(result); 
            }
        });
    });
}

/**
 * Normalisiert die History-Antwort.
 */
function extractDataArray(result: any): any[] {
    if (Array.isArray(result)) return result;
    if (result && Array.isArray(result.result)) return result.result;
    if (result && Array.isArray(result.data)) return result.data; 
    return [];
}

/**
 * Generiert alle X-Achsen Zeitstempel von 00:00 bis 23:55 (heute).
 */
function generateFullDayTimestamps(startOfTodayMs: number): string[] {
    const timestamps: string[] = [];
    const endOfTodayMs = startOfTodayMs + TIME_RANGE_MS; 
    
    // Die X-Achse bleibt bei 5-Minuten-Schritten für die Übersichtlichkeit
    for (let ts = startOfTodayMs; ts < endOfTodayMs; ts += STEP_5M_MS) {
        const date = new Date(ts);
        timestamps.push(date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }));
    }
    return timestamps;
}


// Hauptfunktion zur Abfrage der Daten und Erstellung des Charts
async function createAndSetChartData(): Promise<void> {
    
    // 1. ZEITRAUM BERECHNUNG
    const now = Date.now();
    const todayStart = new Date().setHours(0, 0, 0, 0); 
    
    const endTimeHistory = now; 

    // Erzeuge die X-Achse für den kompletten Tag (00:00 bis 23:55)
    const fullDayTimestamps = generateFullDayTimestamps(todayStart);

    try {
        // --- 2. DATENABFRAGE ---
        
        const historyPromises = DATAPOINTS_CONFIG.map(dp => {
            const historyOptions = {
                start: todayStart,
                end: endTimeHistory, 
                aggregate: 'average', 
                step: dp.step_ms, 
                limit: 5000, 
                removeBorderValues: false
            };
            return queryHistoryData(dp.id, historyOptions).catch(e => {
                log(`FEHLER bei History-Abfrage ${dp.name} (${dp.id}): ${e.message}`, 'error');
                return { result: [] }; 
            });
        });
        
        const historyResults = await Promise.all(historyPromises);
        
        // 3. DATEN MAPPING & TRANSFORMATION
        const seriesDataMap = new Map<string, (number | null)[]>();
        let maxAbsPower = 0; // Für die symmetrische Y-Achse

        DATAPOINTS_CONFIG.forEach((dpConfig, index) => {
            const rawData = extractDataArray(historyResults[index]) || [];
            
            const dataByTimeKey = new Map<number, number>();
            
            rawData.forEach((entry: any) => {
                let entryTs = entry.ts; 
                let val = entry.val; 

                if (val !== null && typeof val === 'number') {
                    
                    val = parseFloat(val.toFixed(2));
                    
                    // WATT ZU KILOWATT KONVERTIERUNG
                    if (dpConfig.unit === 'kW') {
                        val = val / 1000;
                    }
                    
                    // Max-Wert für symmetrische Achse berechnen (NUR FÜR LEISTUNG!)
                    if (!dpConfig.is_fuel_charge) {
                        maxAbsPower = Math.max(maxAbsPower, Math.abs(val));
                    }
                    
                    // Normalisiere den Zeitstempel auf den Beginn des Abfrage-Intervalls (5m oder 1m)
                    const intervalStart = Math.floor(entryTs / dpConfig.step_ms) * dpConfig.step_ms;
                    dataByTimeKey.set(intervalStart, val);
                }
            });

            // Erzeuge die Serie für ECharts (volle Länge der X-Achse in 5-Minuten-Schritten)
            const seriesData: (number | null)[] = [];
            let currentTimelineMs = todayStart;
            
            // Initialisiere den letzten gültigen Wert für den Ladestand mit 0%
            let lastValidChargeValue: number | null = dpConfig.is_fuel_charge ? 0 : null; 

            for (let i = 0; i < fullDayTimestamps.length; i++) {
                
                // Wir verwenden dpConfig.step_ms nur für die key-Suche
                const timeKey = Math.floor(currentTimelineMs / dpConfig.step_ms) * dpConfig.step_ms;
                
                let value = dataByTimeKey.get(timeKey);

                // --- LOGIK FÜR NULL-WERTE UND KONTINUITÄT ---
                
                // 1. Wenn der aktuelle Zeitpunkt NACH 'now' liegt (Zukunft) -> Linie beenden
                if (currentTimelineMs > now) {
                     seriesData.push(null);
                } 
                // 2. Wenn ein GÜLTIGER Wert gefunden wurde
                else if (value !== undefined && value !== null) {
                    if (dpConfig.is_fuel_charge) {
                        lastValidChargeValue = value; // Letzten gültigen Wert speichern
                    }
                    seriesData.push(value);
                } 
                // 3. Wenn KEIN Wert gefunden wurde
                else {
                    // Für Leistungsdaten (kW), die fehlen, setzen wir 0.
                    if (dpConfig.unit === 'kW') {
                        seriesData.push(0);
                    } 
                    // Für Ladestand (%) verwenden wir den zuletzt bekannten gültigen Wert (startet bei 0).
                    else if (dpConfig.is_fuel_charge) {
                        seriesData.push(lastValidChargeValue); 
                    }
                    // Fallback
                    else {
                        seriesData.push(null); 
                    }
                }
                
                // ---------------------------------------------------

                currentTimelineMs += STEP_5M_MS; 
            }

            seriesDataMap.set(dpConfig.name, seriesData);
        });
        
        // Runden des Max-Werts auf die nächste ganze Zahl + 1 und Mindestwert 5
        let symmetricPowerLimit = Math.ceil(maxAbsPower) + 1;
        if (symmetricPowerLimit < 5) {
            symmetricPowerLimit = 5;
        }
        
        // *** TRANSFORMATION DES LADESTANDS ***
        // Formel: Skaliert 0% -> 0 kW und 100% -> +PowerLimit kW
        const fuelChargeData = seriesDataMap.get('Ladestand');
        if (fuelChargeData) {
            const transformedData = fuelChargeData.map(val => {
                if (val === null) return null;
                return (val / 100) * symmetricPowerLimit; 
            });
            seriesDataMap.set('Ladestand (Skaliert)', transformedData);
        }
        // ************************************


        // 4. CHART-DEFINITION (ECharts Option)
        const series = DATAPOINTS_CONFIG.map(dp => {
            const seriesName = dp.is_fuel_charge ? 'Ladestand (Skaliert)' : dp.name;
            const seriesData = seriesDataMap.get(seriesName) || [];

            const seriesConfig: any = { 
                name: dp.name, // Name im Legend/Tooltip
                type: dp.type,
                yAxisIndex: 0, // Nur noch Achse 0
                data: seriesData,
                itemStyle: {
                    color: dp.is_fuel_charge ? dp.color : undefined 
                },
                lineStyle: {
                    width: dp.lineWidth || 1 
                },
                smooth: dp.smooth || false, 
                showSymbol: false,
                z: dp.is_fuel_charge ? 10 : 1, // Ladestand über der Leistung zeichnen
                
                // areaStyle nur für Batterieleistung, mit Transparenz
                areaStyle: (dp.unit === 'kW' && !dp.is_fuel_charge) ? { opacity: 0.6 } : undefined, 
            };
            
            return seriesConfig;
        });
        
        // Wir verwenden nur noch EINE Y-Achse
        const yAxis = [
            // Y-Achse 0 (Links): Leistung (kW) / Skalierter Ladestand
            {
                type: 'value',
                name: 'Leistung (kW)',
                min: -symmetricPowerLimit, 
                max: symmetricPowerLimit,  
                axisLabel: {
                    formatter: (value: number) => value.toFixed(1) + ' kW',
                    color: '#FFFFFF'
                },
                // Null-Linie hervorheben
                axisLine: { onZero: true, lineStyle: { color: '#888' } },
                splitLine: { show: true, lineStyle: { color: '#333333' } } 
            }
        ];
        
        // Visual Map zur Steuerung der Linienfarbe und NEU: Flächenfarbe
        const visualMap = {
            type: 'piecewise',
            seriesIndex: 0, // NUR FÜR DIE LEISTUNG (Index 0 in DATAPOINTS_CONFIG)
            show: true, 
            dimension: 2, 
            // FIX: Farbdefinition über die 'color' Eigenschaft des Piece, um die Fläche zu füllen.
            pieces: [
                { 
                    gt: 0, 
                    label: 'Laden', 
                    name: 'Laden', 
                    color: '#2ECC40', // Füllt die Fläche GRÜN
                    itemStyle: { color: '#2ECC40' } // Linie GRÜN
                }, 
                { 
                    lte: 0, 
                    label: 'Entladen', 
                    name: 'Entladen', 
                    color: '#FF4136', // Füllt die Fläche ROT
                    itemStyle: { color: '#FF4136' } // Linie ROT
                } 
            ],
            textStyle: {
                color: '#FFFFFF'
            },
            bottom: 20
        };

        const option = {
            backgroundColor: 'rgb(17, 18, 23, 0.0)',
            title: { text: 'Batterieübersicht (Laden/Entladen & Ladestand)' },
            visualMap: visualMap,
            tooltip: { 
                trigger: 'axis', 
                axisPointer: { type: 'line' },
                formatter: function (params: any[]) {
                    let res = params[0].name + '<br/>';
                    const powerLimit = symmetricPowerLimit;

                    // Sortiere die Tooltip-Einträge, damit Leistung und Ladestand korrekt dargestellt werden
                    params.sort((a, b) => {
                       const nameA = a.seriesName;
                       const nameB = b.seriesName;
                       // Ladestand (zweite Serie) soll nach der Leistung angezeigt werden
                       if (nameA.includes('Ladestand')) return 1; 
                       if (nameB.includes('Ladestand')) return -1;
                       return 0;
                    });
                    
                    params.forEach((item: any) => {
                        const dpConfig = DATAPOINTS_CONFIG.find(d => d.name === item.seriesName);
                        if (dpConfig && item.value !== null) {
                            
                            let value = item.value;
                            let seriesName = item.seriesName;
                            let unit = dpConfig.unit;
                            
                            if (dpConfig.is_fuel_charge) {
                                // Ladestand: Wert zurückrechnen auf 0-100%
                                value = (value / powerLimit) * 100;
                                seriesName = 'Ladestand (Blau)';
                                unit = '%';
                            } else {
                                // Leistung: Farben und Namen anpassen
                                seriesName = item.value > 0 ? 'Laden (Grün)' : 'Entladen (Rot)';
                            }
                            
                            res += item.marker + seriesName + ': **' + value.toFixed(dpConfig.unit === 'kW' ? 2 : 1) + ' ' + unit + '**<br/>';
                        }
                    });
                    return res;
                }
            },
            legend: { 
                 data: DATAPOINTS_CONFIG.map(item => item.name),
                 bottom: 0,
                 textStyle: { color: '#FFFFFF' }
            },
            grid: {
                left: '2%', right: '5%', bottom: '15%', top: '10%', containLabel: true 
            },
            xAxis: {
                type: 'category',
                data: fullDayTimestamps, 
                axisLabel: { color: '#FFFFFF' }
            },
            yAxis: yAxis,
            series: series
        };

        // 5. SPEICHERUNG IM FLEXCHARTS-STATE
        setState(FLEXCHARTS_TARGET_STATE, stringify.stringify(option), true);
        log(`ECharts-Optionen erfolgreich in State ${FLEXCHARTS_TARGET_STATE} geschrieben.`, 'info');

    } catch (e) {
        log(`Allgemeiner Fehler im Skript oder bei der History-Abfrage: ${e.message}`, 'error');
    }
}

und noch das Chart was rauskommt:

{backgroundColor:'rgb(17, 18, 23, 0.0)',title:{text:'Batterieleistung (Laden/Entladen) & Ladestand (Heutiger Tag)'},tooltip:{trigger:'axis',axisPointer:{type:'line'},formatter:function (params) {
    var res = params[0].name + '<br/>';
    params.forEach(function (item) {
        var dpConfig = DATAPOINTS_CONFIG.find(function (d) { return d.name === item.seriesName; });
        var val = item.value;
        if (dpConfig && val !== null) {
            // Für Entladen, den Wert als negativ anzeigen
            if (dpConfig.name === 'Batterie entladen') {
                val = -val;
            }
            res += item.marker + item.seriesName + ': **' + val.toFixed(dpConfig.unit === 'kW' ? 2 : 1) + ' ' + dpConfig.unit + '**<br/>';
        }
    });
    return res;
}},legend:{data:['Ladestand','Batterie entladen','Batterie laden'],bottom:0,textStyle:{color:'#FFFFFF'}},grid:{left:'2%',right:'10%',bottom:'15%',top:'10%',containLabel:true},xAxis:{type:'category',data:['00:00','00:05','00:10','00:15','00:20','00:25','00:30','00:35','00:40','00:45','00:50','00:55','01:00','01:05','01:10','01:15','01:20','01:25','01:30','01:35','01:40','01:45','01:50','01:55','02:00','02:05','02:10','02:15','02:20','02:25','02:30','02:35','02:40','02:45','02:50','02:55','03:00','03:05','03:10','03:15','03:20','03:25','03:30','03:35','03:40','03:45','03:50','03:55','04:00','04:05','04:10','04:15','04:20','04:25','04:30','04:35','04:40','04:45','04:50','04:55','05:00','05:05','05:10','05:15','05:20','05:25','05:30','05:35','05:40','05:45','05:50','05:55','06:00','06:05','06:10','06:15','06:20','06:25','06:30','06:35','06:40','06:45','06:50','06:55','07:00','07:05','07:10','07:15','07:20','07:25','07:30','07:35','07:40','07:45','07:50','07:55','08:00','08:05','08:10','08:15','08:20','08:25','08:30','08:35','08:40','08:45','08:50','08:55','09:00','09:05','09:10','09:15','09:20','09:25','09:30','09:35','09:40','09:45','09:50','09:55','10:00','10:05','10:10','10:15','10:20','10:25','10:30','10:35','10:40','10:45','10:50','10:55','11:00','11:05','11:10','11:15','11:20','11:25','11:30','11:35','11:40','11:45','11:50','11:55','12:00','12:05','12:10','12:15','12:20','12:25','12:30','12:35','12:40','12:45','12:50','12:55','13:00','13:05','13:10','13:15','13:20','13:25','13:30','13:35','13:40','13:45','13:50','13:55','14:00','14:05','14:10','14:15','14:20','14:25','14:30','14:35','14:40','14:45','14:50','14:55','15:00','15:05','15:10','15:15','15:20','15:25','15:30','15:35','15:40','15:45','15:50','15:55','16:00','16:05','16:10','16:15','16:20','16:25','16:30','16:35','16:40','16:45','16:50','16:55','17:00','17:05','17:10','17:15','17:20','17:25','17:30','17:35','17:40','17:45','17:50','17:55','18:00','18:05','18:10','18:15','18:20','18:25','18:30','18:35','18:40','18:45','18:50','18:55','19:00','19:05','19:10','19:15','19:20','19:25','19:30','19:35','19:40','19:45','19:50','19:55','20:00','20:05','20:10','20:15','20:20','20:25','20:30','20:35','20:40','20:45','20:50','20:55','21:00','21:05','21:10','21:15','21:20','21:25','21:30','21:35','21:40','21:45','21:50','21:55','22:00','22:05','22:10','22:15','22:20','22:25','22:30','22:35','22:40','22:45','22:50','22:55','23:00','23:05','23:10','23:15','23:20','23:25','23:30','23:35','23:40','23:45','23:50','23:55'],axisLabel:{color:'#FFFFFF'}},yAxis:[{type:'value',name:'Leistung (kW)',min:0,max:'dataMax',axisLabel:{formatter:function (value) { return value.toFixed(1) + ' kW'; },color:'#FFFFFF'},splitLine:{show:true,lineStyle:{color:'#333333'}}},{type:'value',name:'Ladestand (%)',min:0,max:100,position:'right',axisLine:{lineStyle:{color:'#0040ff'}},axisLabel:{formatter:function (value) { return value.toFixed(0) + ' %'; },color:'#0040ff'},splitLine:{show:false}}],series:[{name:'Ladestand',type:'line',yAxisIndex:1,data:[0,0,0,0,0,0,0,0,0,0,0,0,0.4,1.86,3.4,4.86,6.5,8,9.5,11.14,12.67,14.33,15.86,17.5,19,20.5,22,23.5,25.14,26.6,28.14,29.67,31.33,32.86,34.4,35.86,37.5,39,40.5,42,43.5,45.14,46.6,48.14,49.6,51.14,52.5,51.6,50.4,50,49.2,49,48.67,48,48,47.8,47,47,46.67,46,45.83,45,45,44.8,44,44,43.8,43,42.83,42,41.4,41,40,39,38.4,37.5,37,36,34.17,31.5,29,27.14,25.5,24.33,23.8,23,22.33,21.33,20.2,19.5,18.83,18,17.4,16.83,16,15.4,15,14,13.5,13,12.8,12,12,12,12,12,12,12,12,12.33,12.5,11.67,11,11,11,10.67,11.17,12,12.8,13.4,13.17,11.67,12.33,13.4,14.4,15.33,16.17,17.4,18.86,20.5,22,23.33,24.2,25,26,27.5,29.33,30.67,32.33,33.86,35.5,37,38.5,39.5,41,42.33,43.86,45.5,47,48,48.6,47.5,46.86,47,47.6,48,48.17,49.4,50.86,52.5,54.14,55.67,57.33,58.86,60.5,62,63.5,65.14,66.6,68.14,69.86,71.4,72.86,74.5,76.14,77.6,78.57,79.5,80,80.67,81,81.67,80.29,79,79.2,80,80,80,80,80,79.4,77.83,76,74.67,73.5,73,72.4,72,71.2,71,70,69.67,69,68,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],itemStyle:{color:'#0040ff'},lineStyle:{width:2},smooth:true,showSymbol:false,stack:undefined},{name:'Batterie entladen',type:'line',yAxisIndex:0,data:[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,0.10503,0.97672,0.8713099999999999,0.33259,0.33822,0.32144,0.25749,0.25627,0.24996000000000002,0.24743,0.24617,0.25359,0.30713,0.33047000000000004,0.33775,0.25223,0.259,0.24580000000000002,0.27075,0.26175,0.26866,0.29633,0.45053,0.51951,0.46149,0.44455,0.9002,0.46326999999999996,0.80455,0.47267000000000003,0.45738,0.87014,1.6027,2.0956300000000003,1.7526300000000001,1.26746,1.17306,0.57569,0.51475,0.47402,0.5478999999999999,1.02722,0.6190599999999999,0.5211,0.52279,0.5198400000000001,0.51001,0.50122,0.47869,0.46435000000000004,0.48264,0.50125,0.44511,0.35714999999999997,0.2387,0.17431,0.12237999999999999,0.18375,0.09159,null,null,null,null,null,0.37686000000000003,0.65477,0.40161,null,null,null,null,null,null,null,1.25641,0.38483999999999996,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,0.40325,0.91599,0.14818,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,1.67222,0.27958,null,null,null,null,null,0.72305,0.9634299999999999,1.44461,1.21182,0.9056000000000001,0.81051,0.27522,0.39432,0.4535,0.44461,0.44277,0.47597,0.47449,0.49116000000000004,0.80188,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],itemStyle:{color:'#FF4136'},lineStyle:{width:2},smooth:true,showSymbol:false,stack:'Leistung'},{name:'Batterie laden',type:'line',yAxisIndex:0,data:[null,null,null,null,null,null,null,null,null,null,null,null,1.1535,1.21996,1.23388,1.2371400000000001,1.23453,1.2371800000000002,1.2366400000000002,1.24018,1.23544,1.23552,1.23559,1.23723,1.23878,1.2354,1.23911,1.23772,1.2404300000000001,null,null,1.23585,1.23682,1.23853,null,1.23853,1.23704,1.23687,1.23509,1.23594,1.23723,1.23771,1.23602,1.23548,null,1.23395,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,0.08084000000000001,0.12513,0.16815,0.22416,0.39165,null,null,null,0.06825,0.02716,0.08624,0.5708,0.57208,0.56178,0.62474,null,null,0.85689,0.83605,0.84945,0.62025,0.65792,1.01559,1.23878,1.2227000000000001,1.21146,0.76361,0.6153500000000001,0.56855,0.94137,1.23853,1.2198,1.23692,1.23585,1.2360799999999998,1.23594,1.23331,0.31944,1.15157,1.2366300000000001,0.77046,1.23602,1.23548,1.02304,0.71169,null,null,null,0.40885000000000005,0.46334,0.35037,0.28632,1.17714,1.23433,null,null,1.2366300000000001,null,1.23567,1.23676,1.2358399999999998,null,1.23791,null,null,null,null,null,null,1.21717,1.1783299999999999,0.48418,0.61614,0.3975,0.33000999999999997,0.39724,0.10887999999999999,null,null,0.40006,0.3115,0.19696,0.0872,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],itemStyle:{color:'#2ECC40'},lineStyle:{width:2},smooth:true,showSymbol:false,stack:'Leistung'}]}

Vielleicht hat ja einer eine Idee?

MCU

@icebear Versuch es hiermit

// Visual Map zur Steuerung der Linien-/Flächenfarbe
const visualMap = {
  type: 'piecewise',
  seriesIndex: 0,   // nur Batterieleistung
  show: true,
  dimension: 0,     // <-- HIER: 0 statt 2
  pieces: [
    {
      gt: 0,
      label: 'Laden',
      name: 'Laden',
      itemStyle: { color: '#2ECC40' },
      areaStyle: { color: '#2ECC40', opacity: 0.6 }
    },
    {
      lte: 0,
      label: 'Entladen',
      name: 'Entladen',
      itemStyle: { color: '#FF4136' },
      areaStyle: { color: '#FF4136', opacity: 0.6 }
    }
  ],
  textStyle: { color: '#FFFFFF' },
  bottom: 20
};

icebear

@mcu said in Test Adapter flexcharts - Stapeldiagramme und mehr:

dimension: 0, // <-- HIER: 0 statt 2

das hatte ich am Anfang, da wird mir aber garnix angezeigt.

icebear

Nur der Vollständigkeit halber, ich hab jetzt eine für mich akzeptable Lösung gefunden, mit der ich leben kann.

Und hier das Script:

// Importiere javascript-stringify
const stringify = require('javascript-stringify'); 

// --- KONFIGURATION ---
const INFLUXDB_INSTANCE = 'influxdb.0'; 
const FLEXCHARTS_TARGET_STATE = '0_userdata.0.Flexcharts.Battery24Hours'; 

// --- ZEIT-KONFIGURATION ---
const TIME_RANGE_MS = 24 * 3600 * 1000; // 24 Stunden (00:00 bis 24:00)
const STEP_5M_MS = 5 * 60 * 1000;       // 5 Minuten Auflösung für die Leistung (Basis für X-Achse)
const STEP_1M_MS = 60 * 1000;           // 1 Minuten Auflösung für den Ladestand (Basis: 60s Speicherung)

// --- FIXE LEISTUNGSGRENZEN (kW) ---
const MAX_DISCHARGE_KW = 2.5; // 2500 W Entladung (negativer Achsenbereich)
const MAX_CHARGE_KW = 1.25;  // 1250 W Ladung (positiver Achsenbereich)
// ------------------------------------

// Definiere die Datenpunkte und ihre Zuordnung zu den Y-Achsen
const DATAPOINTS_CONFIG = [
    // 0. Ladung (kW) - GRÜN
    { id: 'senec.0.ENERGY.GUI_BAT_DATA_POWER', name: 'Laden (kW)', type: 'bar', color: '#2ECC40', is_charge: true, yAxisIndex: 0, unit: 'kW', step_ms: STEP_5M_MS, smooth: false, lineWidth: 3 },
    
    // 1. Entladung (kW) - ROT
    { id: 'senec.0.ENERGY.GUI_BAT_DATA_POWER', name: 'Entladen (kW)', type: 'bar', color: '#FF4136', is_discharge: true, yAxisIndex: 0, unit: 'kW', step_ms: STEP_5M_MS, smooth: false, lineWidth: 3 },
    
    // 2. Ladestand (%) - BLAU
    { id: 'senec.0.ENERGY.GUI_BAT_DATA_FUEL_CHARGE', name: 'Ladestand', type: 'line', color: '#0040ff', is_fuel_charge: true, yAxisIndex: 0, unit: '%', step_ms: STEP_1M_MS, smooth: true, lineWidth: 2 },
];

// ----------------------------------------------------------------------

// Starte das Skript alle 5 Minuten
schedule('*/5 * * * *', async () => { 
    await createAndSetChartData();
});

// Starte das Skript sofort beim Start
createAndSetChartData();


/**
 * Hilfsfunktion zum Abfragen der History-Daten.
 */
function queryHistoryData(id: string, options: any): Promise<any> {
    return new Promise<any>((resolve, reject) => {
        sendTo(INFLUXDB_INSTANCE, 'getHistory', { id: id, options: options }, (result) => {
            if (result && (result as any).error) {
                reject(new Error(result.error));
            } else {
                resolve(result); 
            }
        });
    });
}

/**
 * Normalisiert die History-Antwort.
 */
function extractDataArray(result: any): any[] {
    if (Array.isArray(result)) return result;
    if (result && Array.isArray(result.result)) return result.result;
    if (result && Array.isArray(result.data)) return result.data; 
    return [];
}

/**
 * Generiert alle X-Achsen Zeitstempel von 00:00 bis 23:55 (heute).
 */
function generateFullDayTimestamps(startOfTodayMs: number): string[] {
    const timestamps: string[] = [];
    const endOfTodayMs = startOfTodayMs + TIME_RANGE_MS; 
    
    // Die X-Achse bleibt bei 5-Minuten-Schritten für die Übersichtlichkeit
    for (let ts = startOfTodayMs; ts < endOfTodayMs; ts += STEP_5M_MS) {
        const date = new Date(ts);
        timestamps.push(date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }));
    }
    return timestamps;
}


// Hauptfunktion zur Abfrage der Daten und Erstellung des Charts
async function createAndSetChartData(): Promise<void> {
    
    // 1. ZEITRAUM BERECHNUNG
    const now = Date.now();
    const todayStart = new Date().setHours(0, 0, 0, 0); 
    
    const endTimeHistory = now; 

    // Erzeuge die X-Achse für den kompletten Tag (00:00 bis 23:55)
    const fullDayTimestamps = generateFullDayTimestamps(todayStart);

    try {
        // --- 2. DATENABFRAGE ---
        
        // Wir fragen nur die UNIQUE IDs ab, um History-Anfragen zu sparen
        const uniqueIds = Array.from(new Set(DATAPOINTS_CONFIG.map(dp => dp.id)));
        
        const historyPromises = uniqueIds.map(id => {
            const dpConfig = DATAPOINTS_CONFIG.find(dp => dp.id === id); // Nutze die erste Konfiguration zur Optionsbestimmung
            const step_ms = dpConfig.is_fuel_charge ? STEP_1M_MS : STEP_5M_MS;
            
            const historyOptions = {
                start: todayStart,
                end: endTimeHistory, 
                aggregate: 'average', 
                step: step_ms, 
                limit: 5000, 
                removeBorderValues: false
            };
            return queryHistoryData(id, historyOptions).catch(e => {
                log(`FEHLER bei History-Abfrage ${id}: ${e.message}`, 'error');
                return { result: [] }; 
            });
        });
        
        const historyResults = await Promise.all(historyPromises);
        
        // Mappe Ergebnisse zu IDs
        const historyResultsMap = new Map<string, any>();
        uniqueIds.forEach((id, index) => {
            historyResultsMap.set(id, extractDataArray(historyResults[index]));
        });
        
        
        // 3. DATEN MAPPING & TRANSFORMATION
        
        // Leistung (kW) und Ladestand (%) Daten separat aus den History-Ergebnissen extrahieren
        const rawPowerData = historyResultsMap.get('senec.0.ENERGY.GUI_BAT_DATA_POWER') || [];
        const rawChargeData = historyResultsMap.get('senec.0.ENERGY.GUI_BAT_DATA_FUEL_CHARGE') || [];
        
        const powerDataByTimeKey = new Map<number, number>();
        rawPowerData.forEach((entry: any) => {
            if (entry.val !== null && typeof entry.val === 'number') {
                 // WATT ZU KILOWATT KONVERTIERUNG
                powerDataByTimeKey.set(
                    Math.floor(entry.ts / STEP_5M_MS) * STEP_5M_MS, 
                    parseFloat((entry.val / 1000).toFixed(2))
                );
            }
        });

        const chargeDataByTimeKey = new Map<number, number>();
        let lastValidChargeValue: number | null = 0; 
        rawChargeData.forEach((entry: any) => {
             if (entry.val !== null && typeof entry.val === 'number') {
                chargeDataByTimeKey.set(
                    Math.floor(entry.ts / STEP_1M_MS) * STEP_1M_MS, 
                    parseFloat(entry.val.toFixed(2))
                );
             }
        });
        
        // ZWEI neue Leistungs-Arrays + EIN Ladestand-Array
        const data_charge: (number | null)[] = []; // Grün: > 0
        const data_discharge: (number | null)[] = []; // Rot: < 0
        const data_fuel_charge: (number | null)[] = []; // Blau: %
        
        let currentTimelineMs = todayStart;
        for (let i = 0; i < fullDayTimestamps.length; i++) {
            const timeKey = Math.floor(currentTimelineMs / STEP_5M_MS) * STEP_5M_MS;
            const powerValue = powerDataByTimeKey.get(timeKey) || 0; // Standard 0 kW wenn kein Wert

            // --- 1. Leistung aufteilen ---
            if (currentTimelineMs > now) {
                // Zukunft: Daten beenden
                data_charge.push(null);
                data_discharge.push(null);
            } else {
                if (powerValue > 0) {
                    data_charge.push(powerValue);
                    data_discharge.push(0);
                } else if (powerValue < 0) {
                    data_charge.push(0);
                    data_discharge.push(powerValue); // Entladung ist negativ
                } else {
                    data_charge.push(0);
                    data_discharge.push(0);
                }
            }

            // --- 2. Ladestand hinzufügen ---
            const chargeTimeKey = Math.floor(currentTimelineMs / STEP_1M_MS) * STEP_1M_MS;
            let chargeValue = chargeDataByTimeKey.get(chargeTimeKey);
            
            if (currentTimelineMs <= now) {
                if (chargeValue !== undefined && chargeValue !== null) {
                    lastValidChargeValue = chargeValue; 
                } else {
                    chargeValue = lastValidChargeValue;
                }
                data_fuel_charge.push(chargeValue);
            } else {
                data_fuel_charge.push(null);
            }
            
            currentTimelineMs += STEP_5M_MS; 
        }

        // Füllen der seriesDataMap mit den aufgeteilten Daten
        const seriesDataMap = new Map<string, (number | null)[]>();
        seriesDataMap.set('Laden (kW)', data_charge);
        seriesDataMap.set('Entladen (kW)', data_discharge);
        seriesDataMap.set('Ladestand', data_fuel_charge);
        
        // Asymmetrische Achsengrenzen mit Puffer (0.5 kW)
        const maxLimit = MAX_CHARGE_KW + 0.5; 
        const minLimit = MAX_DISCHARGE_KW + 0.5; 
        
        // *** TRANSFORMATION DES LADESTANDS ***
        const fuelChargeData = seriesDataMap.get('Ladestand');
        if (fuelChargeData) {
            const transformedData = fuelChargeData.map(val => {
                if (val === null) return null;
                // Skalierung von 0 bis maxLimit für Ladestand
                return (val / 100) * maxLimit; 
            });
            seriesDataMap.set('Ladestand (Skaliert)', transformedData);
        }
        // ************************************


        // 4. CHART-DEFINITION (ECharts Option)
        const series = DATAPOINTS_CONFIG.map(dp => {
            const seriesName = dp.is_fuel_charge ? 'Ladestand (Skaliert)' : dp.name;
            const seriesData = seriesDataMap.get(seriesName) || [];

            const seriesConfig: any = { 
                name: dp.name, 
                type: dp.type,
                yAxisIndex: 0, 
                data: seriesData,
                itemStyle: {
                    color: dp.color 
                },
                lineStyle: {
                    width: dp.lineWidth || 1 
                },
                smooth: dp.smooth || false, 
                showSymbol: false,
                z: dp.is_fuel_charge ? 10 : 1, 
                
                // Animation für Säulen (type: 'bar')
                animationDelay: dp.type === 'bar' ? function (idx: number) { return idx * 10; } : undefined,
                animationDelayUpdate: dp.type === 'bar' ? function (idx: number) { return idx * 5; } : undefined,
            };
            
            return seriesConfig;
        });
        
        // Wir verwenden nur noch EINE Y-Achse
        const yAxis = [
            {
                type: 'value',
                name: 'Leistung (kW)',
                min: -minLimit, // -3.0 kW
                max: maxLimit,  // 1.75 kW
                axisLabel: {
                    formatter: (value: number) => value.toFixed(1) + ' kW',
                    color: '#FFFFFF'
                },
                axisLine: { onZero: true, lineStyle: { color: '#888' } },
                splitLine: { show: true, lineStyle: { color: '#333333' } } 
            }
        ];
        
        // *** VISUAL MAP IST HIER ENTFERNT ***
        
        const option = {
            backgroundColor: 'rgb(17, 18, 23, 0.0)',
            title: { text: 'Batterieübersicht (Laden/Entladen & Ladestand)' },
            // visualMap fehlt hier absichtlich
            tooltip: { 
                trigger: 'axis', 
                axisPointer: { type: 'shadow' }, 
                formatter: function (params: any[]) {
                    let res = params[0].name + '<br/>';
                    const chargeMax = maxLimit; 

                    // Sortiere die Tooltip-Einträge: Ladestand zuletzt, dann Entladen, dann Laden
                    params.sort((a, b) => {
                       const nameA = a.seriesName;
                       const nameB = b.seriesName;
                       if (nameA.includes('Ladestand')) return 1; 
                       if (nameB.includes('Ladestand')) return -1;
                       if (nameA.includes('Entladen')) return 1; // Entladen vor Laden
                       if (nameB.includes('Entladen')) return -1;
                       return 0;
                    });
                    
                    params.forEach((item: any) => {
                        const dpConfig = DATAPOINTS_CONFIG.find(d => d.name === item.seriesName);
                        if (dpConfig && item.value !== null && item.value !== 0) { // Null- oder Nullwerte der unsichtbaren Serie ignorieren
                            
                            let value = item.value;
                            let seriesName = item.seriesName;
                            let unit = dpConfig.unit;
                            
                            if (dpConfig.is_fuel_charge) {
                                value = (value / chargeMax) * 100;
                                seriesName = 'Ladestand';
                                unit = '%';
                            } else {
                                // Ladung/Entladung werden mit ihren echten Namen angezeigt
                                unit = 'kW';
                            }
                            
                            res += item.marker + seriesName + ': **' + value.toFixed(dpConfig.unit === 'kW' ? 2 : 1) + ' ' + unit + '**<br/>';
                        }
                    });
                    // Wenn keine Leistung angezeigt wird, zeige nur Ladestand an
                    if (res.endsWith('<br/>')) {
                         res = res.substring(0, res.lastIndexOf('<br/>'));
                    }
                    return res;
                }
            },
            legend: { 
                 data: DATAPOINTS_CONFIG.map(item => item.name),
                 bottom: 0,
                 textStyle: { color: '#FFFFFF' }
            },
            grid: {
                left: '2%', right: '5%', bottom: '15%', top: '10%', containLabel: true 
            },
            xAxis: {
                type: 'category',
                data: fullDayTimestamps, 
                axisLabel: { color: '#FFFFFF' }
            },
            yAxis: yAxis,
            series: series,
            animationEasing: 'elasticOut', 
        };

        // 5. SPEICHERUNG IM FLEXCHARTS-STATE
        setState(FLEXCHARTS_TARGET_STATE, stringify.stringify(option), true);
        log(`ECharts-Optionen (Bar/Bar/Line Kombi mit Farb-Fix) erfolgreich in State ${FLEXCHARTS_TARGET_STATE} geschrieben.`, 'info');

    } catch (e) {
        log(`Allgemeiner Fehler im Skript oder bei der History-Abfrage: ${e.message}`, 'error');
    }
}

icebear

Ich schon wieder, mir ist es jetzt gelungen in Flexchart eine Timeline mit den Wetterkonditionen darzustellen, siehe :

Diese zeigt zu jeder Stunde anhand des farbigen Rectangle die Wetterkondition.
Jetzt wollte ich als i-Tüpfelchen noch ein Icon anzeigen lassen, aber ich sehe nur das kleine 'grüne' Viereck in der Mitte (wahrscheinlich ein Platzhalter weil das Icon nicht gefunden wird.

Frage ist jetzt, geht das mit dem Flexchart Adapter überhaupt? In welchem Format muß das Icon vorliegen? Wo sollte es sich befinden (Speicherort) ?

Zum Nachvollziehen, das Script welches ich verwende:

// ====================================================================================
// KONFIGURATION UND BASE64-PLATZHALTER
// ====================================================================================
const SOURCE_ID = '0_userdata.0.weather.meteosource_cond';
const TARGET_ID = '0_userdata.0.Flexcharts.weatherIcon';

interface WeatherEntry {
    time: string;
    summary: string;
}

// 🚨 WICHTIG: ERSETZEN SIE DIESE PLATZHALTER mit den Base64-Strings IHRER SVG-Dateien.
// (Beispiel: data:image/svg+xml;base64,PHN2ZyB... DIES MUSS KORREKT SEIN!)
const BASE64_CLOUDY = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMi4wMSA2YzIuNjEgMCA0Ljg5IDEuODYgNS40IDQuNDNsLjMgMS41bDEuNTIuMTFjMS41Ni4xMSAyLjc4IDEuNDEgMi43OCAyLjk2YzAgMS42NS0xLjM1IDMtMyAzaC0xM2MtMi4yMSAwLTQtMS43OS00LTRjMC0yLjA1IDEuNTMtMy43NiAzLjU2LTMuOTdsMS4wNy0uMTFsLjUtLjk1QTUuNDU3IDUuNDU3IDAgMCAxIDEyLjAxIDZtMC0yQzkuMTIgNCA2LjYgNS42NCA1LjM1IDguMDRDMi4zNSA4LjM2LjAxIDEwLjkxLjAxIDE0YzAgMy4zMSAyLjY5IDYgNiA2aDEzYzIuNzYgMCA1LTIuMjQgNS01YzAtMi42NC0yLjA1LTQuNzgtNC42NC00Ljk2QzE4LjY4IDYuNTkgMTUuNjUgNCAxMi4wMSA0eiIvPjwvc3ZnPg==";
const BASE64_SUNNY = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik02Ljc2IDQuODRsLTEuOC0xLjc5bC0xLjQxIDEuNDFsMS43OSAxLjc5ek0xIDEwLjVoM3YySDF6TTExIC41NWgyVjMuNWgtMnptOC4wNCAyLjQ5NWwxLjQwOCAxLjQwN2wtMS43OSAxLjc5bC0xLjQwNy0xLjQwOHptLTEuOCAxNS4xMTVsMS43OSAxLjhsMS40MS0xLjQxbC0xLjgtMS43OXpNMjAgMTAuNWgzdjJoLTN6bS04LTVjLTMuMzEgMC02IDIuNjktNiA2czIuNjkgNiA2IDZzNi0yLjY5IDYtNnMtMi42OS02LTYtNnptMCAxMGMtMi4yMSAwLTQtMS43OS00LTRzMS43OS00IDQtNHM0IDEuNzkgNCA0cy0xLjc5IDQtNCA0em0tMSA0aDJ2Mi45NWgtMnptLTcuNDUtLjk2bDEuNDEgMS40MWwxLjc5LTEuOGwtMS40MS0xLjQxeiIvPjwvc3ZnPg==";
const BASE64_UNKNOWN = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjYuNDU4MzM4bW0iIGhlaWdodD0iMjYuNDU4MzI2bW0iIHZpZXdCb3g9IjAgMCA3NS4wMDAxNiA3NS4wMDAwNzEiIGlkPSJzdmcxNjUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnMgaWQ9ImRlZnMxNjUiIC8+PGcgaWQ9ImxheWVyMSIgc3R5bGU9Im9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwOC43NTExNCwtMTczMi41MDI5KSI+PGcgaWQ9ImczNDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjAzOTU4MjUyLDkuMTIyNjU3NCkiPjxwYXRoIGlkPSJwYXRoMzM3LTIiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6Mi4xMjQxNztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNzQ4Ljg3MzQzLDE3NTEuOTU1MSBjIC03LjQyODUzLDAgLTEzLjQ1MDQ5LDYuMDI4OCAtMTMuNDUwMzEsMTMuNDY1NiAwLjAxLDAuODU5NSAwLjEwMTE3LDEuNzE2MyAwLjI3MzgyLDIuNTU4NCAtMC40NDA4OCwtMC4wNiAtMC44ODUzNCwtMC4wOTIgLTEuMzMwMzgsLTAuMDkyIC01LjQ2ODYzLC0xMGUtNSAtOS45MDE4NCw0LjQzODEgLTkuOTAxNzMsOS45MTI4IC0xLjFlLTQsNS40NzQ3IDQuNDMzMSw5LjkxMjggOS45MDE3Myw5LjkxMjcgNy4wNjk1MywxMGUtNSAyNy44MzYzNywtMC4xMDU4IDM0LjA4OTA3LC0wLjEgNi45NzYyNCwyZS00IDEyLjYzMTY4LC01LjY2MTQgMTIuNjMxNjIsLTEyLjY0NTQgMS4xZS00LC02Ljk4MzkgLTUuNjU1MzUsLTEyLjY0NTYgLTEyLjYzMTYyLC0xMi42NDU1IC0yLjE4Mjg1LDAgLTQuMzI3ODgsMC41NzA2IC02LjIyNTkzLDEuNjQ5OSAtMC43Mzg0LC02LjgyOTggLTYuNDk0MTYsLTEyLjAwODEgLTEzLjM1NjI3LC0xMi4wMTYzIHoiIC8+PGcgaWQ9ImcyMzAtNSIgdHJhbnNmb3JtPSJtYXRyaXgoMC4wODg1OTEyMiwwLDAsMC4wODg1OTEyMiw3MTAuNDMyMjQsMTczMi45ODU3KSIgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yO2ZpbGwtb3BhY2l0eToxIj48cGF0aCBkPSJNIDM1Ni41NzY0OSwxODcuODg3ODYgQyAzMzcuNjU3OSwxMzkuMTk1MjcgMjkwLjM2NjUsMTA0LjY2ODU3IDIzNSwxMDQuNjA1NDcgYyAtNzIuMDE1NjMsMCAtMTMwLjM5NDUzLDU4LjM3ODkgLTEzMC4zOTQ1MywxMzAuMzk0NTMgMCw3Mi4wMTU2MiA1OC4zNzg5LDEzMC4zOTQ1MyAxMzAuMzk0NTMsMTMwLjM5NDUzIiBpZD0icGF0aDEtNDE5LTgiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MjMuOTc3MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz48cGF0aCBkPSJNIDI0NSw2MSBWIDEwIEMgMjQ1LDQuNDc2NTYyIDI0MC41MjM0NCwwIDIzNSwwIDIyOS40NzY1NiwwIDIyNSw0LjQ3NjU2MiAyMjUsMTAgdiA1MSBjIDAsNS41MjM0MzggNC40NzY1NiwxMCAxMCwxMCA1LjUyMzQ0LDAgMTAsLTQuNDc2NTYyIDEwLC0xMCB6IG0gMCwwIiBpZD0icGF0aDItNjk4LTMiIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvcjtmaWxsLW9wYWNpdHk6MSIgLz48cGF0aCBkPSJtIDcxLDIzNSBjIDAsLTUuNTIzNDQgLTQuNDc2NTYyLC0xMCAtMTAsLTEwIEggMTAgYyAtNS41MjM0MzgsMCAtMTAsNC40NzY1NiAtMTAsMTAgMCw1LjUyMzQ0IDQuNDc2NTYyLDEwIDEwLDEwIGggNTEgYyA1LjUyMzQzOCwwIDEwLC00LjQ3NjU2IDEwLC0xMCB6IG0gMCwwIiBpZD0icGF0aDUtMTItMyIgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yO2ZpbGwtb3BhY2l0eToxIiAvPjxwYXRoIGQ9Ik0gMzY1LjI1NzgxLDExOC44ODI4MSA0MDAuNzMwNDcsODMuNDEwMTU2IEMgNDA0LjYwOTM3LDc5LjUgNDA0LjU5Mzc1LDczLjE5MTQwNiA0MDAuNjk5MjIsNjkuMzAwNzgxIDM5Ni44MDg1OSw2NS40MDYyNSAzOTAuNSw2NS4zOTA2MjUgMzg2LjU4OTg0LDY5LjI2OTUzMSBsIC0zNS40NzI2NSwzNS40NzI2NTkgYyAtMi41NDI5NywyLjUxOTUzIC0zLjU0Njg4LDYuMjEwOTQgLTIuNjI1LDkuNjc1NzggMC45MjU3OCwzLjQ2MDk0IDMuNjI4OSw2LjE2NDA2IDcuMDg5ODQsNy4wODk4NCAzLjQ2NDg0LDAuOTIxODggNy4xNTYyNSwtMC4wODIgOS42NzU3OCwtMi42MjUgeiBtIDAsMCIgaWQ9InBhdGg2LTUwLTciIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvcjtmaWxsLW9wYWNpdHk6MSIgLz48cGF0aCBkPSJtIDEwNC43NDIxOSwzNTEuMTE3MTkgLTM1LjQ3MjY1OSwzNS40NzI2NSBjIC0yLjU0Njg3NSwyLjUyMzQ0IC0zLjU0Njg3NSw2LjIxNDg1IC0yLjYyNSw5LjY3NTc4IDAuOTIxODc1LDMuNDYwOTQgMy42Mjg5MDcsNi4xNjc5NyA3LjA4OTg0NCw3LjA4OTg1IDMuNDYwOTM3LDAuOTIxODcgNy4xNTIzNDQsLTAuMDc4MSA5LjY3NTc4MSwtMi42MjUgbCAzNS40NzI2NTQsLTM1LjQ3MjY2IGMgMi41NDI5NywtMi41MTk1MyAzLjU0Njg4LC02LjIxMDkzIDIuNjI1LC05LjY3NTc4IC0wLjkyNTc4LC0zLjQ2MDk0IC0zLjYyODksLTYuMTY0MDYgLTcuMDg5ODQsLTcuMDg5ODQgLTMuNDY0ODQsLTAuOTIxODggLTcuMTU2MjUsMC4wODIgLTkuNjc1NzgsMi42MjUgeiBtIDAsMCIgaWQ9InBhdGg3LTgtOSIgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yO2ZpbGwtb3BhY2l0eToxIiAvPjxwYXRoIGQ9Im0gMTA0Ljc0MjE5LDExOC44ODI4MSBjIDIuNTE5NTMsMi41NDI5NyA2LjIxMDk0LDMuNTQ2ODggOS42NzU3OCwyLjYyNSAzLjQ2MDk0LC0wLjkyNTc4IDYuMTY0MDYsLTMuNjI4OSA3LjA4OTg0LC03LjA4OTg0IDAuOTIxODgsLTMuNDY0ODQgLTAuMDgyLC03LjE1NjI1IC0yLjYyNSwtOS42NzU3OCBMIDgzLjQxMDE1Niw2OS4yNjk1MzEgQyA3OS41LDY1LjM5MDYyNSA3My4xOTE0MDYsNjUuNDA2MjUgNjkuMzAwNzgxLDY5LjMwMDc4MSA2NS40MDYyNSw3My4xOTE0MDYgNjUuMzkwNjI1LDc5LjUgNjkuMjY5NTMxLDgzLjQxMDE1NiBaIG0gMCwwIiBpZD0icGF0aDktOS05IiBzdHlsZT0iZmlsbDpjdXJyZW50Q29sb3I7ZmlsbC1vcGFjaXR5OjEiIC8+PC9nPjwvZz48ZyBpZD0iZzM0NCIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MDAwMDAwMDtmaWxsLW9wYWNpdHk6MC4yMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjYxNzY2OGUtNiw1LjYwMTY1NjhlLTUpIj48cGF0aCBkPSJtIDcwOC43NTExNCwxNzMyLjUwMjggdiA3NS4wMDAxIGggNzUuMDAwMTMgdiAtNzUuMDAwMSB6IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDojODAwMDAwMDA7ZmlsbC1vcGFjaXR5OjAuMjI1O3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDowLjc1MzM3NjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJwYXRoMTU0LTUtNy05LTIyLTAtOS0wLTUiIC8+PC9nPjwvZz48c3R5bGUgdHlwZT0idGV4dC9jc3MiIGlkPSJzdHlsZTEiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MntmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qze2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDV7ZmlsbDojRkZGRkZGO30uc3Q2e3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q3e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDh7ZmlsbDpub25lO30uc3Q5e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fTwvc3R5bGU+PHN0eWxlIHR5cGU9InRleHQvY3NzIiBpZD0ic3R5bGUxLTUiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MntmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qze2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDV7ZmlsbDojRkZGRkZGO30uc3Q2e3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q3e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDh7ZmlsbDpub25lO30uc3Q5e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fTwvc3R5bGU+PC9zdmc+Cg==";


// Definition der Wetter-Kategorien und Farben
const CATEGORIES = ['Timeline'];

const WEATHER_TYPES = [
    { name: 'Light rain', color: '#81b0e9' },
    { name: 'Rain', color: '#6baeff' },
    { name: 'Rain shower', color: '#7eb0ed' },
    { name: 'Possible rain', color: '#97b2d3' },
    { name: 'Cloudy', color: '#8795ab' },
    { name: 'Overcast', color: '#e1e4ea' },
    { name: 'Partly clody', color: '#d5dae2' },
    { name: 'Mostly clody', color: '#b4bdcb' },
    { name: 'Partly sunny', color: '#e1d570' },
    { name: 'Mostly sunny', color: '#ffee52' },
    { name: 'Sunny', color: '#FFA500' },
    { name: 'Clear', color: '#4682B4' },
    { name: 'Mostly clear', color: '#edf3f8' },
    { name: 'Default', color: '#5B9DD9' }
];

// Mapping der Wetter-Summaries zu den BASE64-Strings
const WEATHER_ICONS: { [key: string]: string } = {
    'light rain': BASE64_CLOUDY,
    'Cloudy': BASE64_CLOUDY,
    'partly sunny': BASE64_SUNNY,
    'mostly sunny': BASE64_SUNNY,
    'Sunny': BASE64_SUNNY,
    'clear': BASE64_SUNNY,
    'default': BASE64_UNKNOWN
};

// ====================================================================================
// HILFSFUNKTIONEN
// ====================================================================================

function getCategoryColor(summary: string | null | undefined): string {
    if (!summary || typeof summary !== 'string' || summary.length === 0) {
        return '#5B9DD9';
    }

    const lowerSummary = summary.toLowerCase();

    const type = WEATHER_TYPES.find(t => t.name.toLowerCase() === lowerSummary);
    return type ? type.color : WEATHER_TYPES.find(t => t.name === 'Default').color;
}

/**
 * Holt den Base64-String für eine Wetter-Summary.
 */
function getWeatherIconPath(summary: string | null | undefined): string {
    if (!summary || typeof summary !== 'string' || summary.length === 0) {
        return WEATHER_ICONS['default'];
    }
    const lowerSummary = summary.toLowerCase();
    return WEATHER_ICONS[lowerSummary] || WEATHER_ICONS['default'];
}

/**
 * Erstellt ein separates 1-Stunden-Segment für jeden Eintrag (lückenfrei).
 */
function transformDataToScatterGantt(rawData: WeatherEntry[]): any[] {
    if (rawData.length === 0) return [];
    
    const validData = rawData.filter(item => {
        return item && item.time && item.summary && !isNaN(new Date(item.time).getTime());
    });
    
    if (validData.length === 0) return [];

    const scatterData = [];
    const oneHourInMs = 60 * 60 * 1000;

    for (const entry of validData) {
        const currentSummary = entry.summary;
        const startTime = new Date(entry.time).getTime();
        const segmentEndTime = startTime + oneHourInMs;

        const uniqueName = `${currentSummary}_${startTime}`; 

        scatterData.push({
            name: uniqueName, 
            // [Start-Timestamp, Y-Kategorie (0), End-Timestamp, Summary]
            value: [startTime, 0, segmentEndTime, currentSummary], 
            itemStyle: { color: getCategoryColor(currentSummary) }
        });
    }
    
    return scatterData;
}

// ====================================================================================
// ECHARTS GENERIERUNG (Zwei Scatter-Serien)
// ====================================================================================

function createEChartOptions(scatterGanttData: any[], minTime: string, maxTime: string): string {
    const minTimeMs = new Date(minTime).getTime();
    const maxTimeMs = new Date(maxTime).getTime();

    // 1. Daten für die Timeline (Rechtecke und Text)
    const dataForTimeline = scatterGanttData.map(item => ({
        name: item.name, 
        value: [item.value[0], item.value[1], item.value[2], item.value[3]], 
        itemStyle: item.itemStyle,
        label: {
            show: true,
            // Zeigt NUR den Text an (kein Bild/Emoji)
            formatter: function(params: any) { 
                return params.value[3];
            },
            position: 'inside', 
            color: '#000',
            fontWeight: 'bold'
        }
    }));
    
    // 2. Daten für die Icons (Symbol-Serie)
    const dataForIcons = scatterGanttData.map(item => ({
        name: item.name + '_icon', 
        // Icon-Symbol soll am Anfang des Rechtecks (StartTime) positioniert werden
        value: [item.value[0], item.value[1]], // [Start-Timestamp, 0]
        symbol: getWeatherIconPath(item.value[3]), // Fügt das Base64-Icon als Symbol hinzu
        symbolSize: [20, 20], // Größe des Icons (anpassen)
        itemStyle: { 
            opacity: 1 // Muss sichtbar sein
        },
        label: {
            show: false // Kein Label für diese Serie
        }
    }));


    const options = {
        backgroundColor: '#111217',
        title: {
            text: 'Wetter-Timeline',
            left: 'center',
            textStyle: { fontSize: 14 }
        },
        tooltip: {
            // ... Tooltip bleibt gleich wie in der letzten Base64-Version
            formatter: function (params: any) {
                if (params.seriesType !== 'scatter' || params.seriesName === 'Icons') return; 

                const summary = params.value[3];
                const startTime = new Date(params.value[0]).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
                const endTime = new Date(params.value[2]).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
                
                const iconPath = getWeatherIconPath(summary);
                
                return `<div><img src="${iconPath}" style="width:20px; height:20px; vertical-align:middle; margin-right:5px;"><b>${summary}</b></div>${startTime} – ${endTime}`;
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: '5%',
            containLabel: true,
            height: '100' 
        },
        xAxis: {
            type: 'time', 
            min: minTimeMs, 
            max: maxTimeMs, 
            axisLabel: {
                formatter: '{HH}:{mm}' 
            }
        },
        yAxis: {
            type: 'category',
            data: CATEGORIES, 
            show: true
        },
        series: [
            // Serie 1: Die eigentliche Timeline (Rechtecke und Text)
            {
                name: 'Wetterereignisse',
                type: 'scatter',
                symbol: 'rect', 
                symbolSize: [60, 40], 
                data: dataForTimeline
            },
            // Serie 2: Die Icons (überlagert die Timeline)
            {
                name: 'Icons',
                type: 'scatter',
                symbolSize: [0, 0], // Macht den Punkt unsichtbar
                data: dataForIcons
            }
        ]
    };

    return JSON.stringify(options);
}

// ... (HAUPT-SKRIPT-AUSFÜHRUNG MIT SCHEDULER bleibt gleich) ...

function updateWeatherTimeline(): void {
    const state = getState(SOURCE_ID);

    if (!state || !state.val) {
        log(`FEHLER: Quelldatenpunkt ${SOURCE_ID} ist leer oder ungültig.`, 'warn');
        return;
    }

    const parsedData = state.val as WeatherEntry[]; 

    if (!Array.isArray(parsedData) || parsedData.length === 0) {
         log(`FEHLER: Daten in ${SOURCE_ID} sind kein Array oder leer.`, 'error');
         return;
    }

    try {
        const scatterGanttData = transformDataToScatterGantt(parsedData);
        
        const minTime = parsedData[0].time; 
        
        const lastData = scatterGanttData[scatterGanttData.length - 1];
        const maxTime = new Date(lastData.value[2]).toISOString(); 

        const optionsJson = createEChartOptions(scatterGanttData, minTime, maxTime);

        setState(TARGET_ID, optionsJson, true);
        log(`ECharts-Timeline erfolgreich unter ${TARGET_ID} gespeichert.`);

    } catch (e) {
        log(`Fehler bei der Transformation oder Speicherung der Daten: ${e}`, 'error');
    }
}

schedule('0 * * * *', updateWeatherTimeline);
updateWeatherTimeline();

und wer es nachstellen will, das Liste (array) wo die Daten hermommen:

[{"time":"2025-11-22T13:00:00","summary":"Mostly cloudy"},{"time":"2025-11-22T14:00:00","summary":"Mostly cloudy"},{"time":"2025-11-22T15:00:00","summary":"Mostly cloudy"},{"time":"2025-11-22T16:00:00","summary":"Partly sunny"},{"time":"2025-11-22T17:00:00","summary":"Clear"},{"time":"2025-11-22T18:00:00","summary":"Clear"},{"time":"2025-11-22T19:00:00","summary":"Mostly clear"},{"time":"2025-11-22T20:00:00","summary":"Clear"},{"time":"2025-11-22T21:00:00","summary":"Partly clear"},{"time":"2025-11-22T22:00:00","summary":"Partly clear"},{"time":"2025-11-22T23:00:00","summary":"Mostly clear"},{"time":"2025-11-23T00:00:00","summary":"Mostly clear"},{"time":"2025-11-23T01:00:00","summary":"Overcast"},{"time":"2025-11-23T02:00:00","summary":"Overcast"},{"time":"2025-11-23T03:00:00","summary":"Overcast"},{"time":"2025-11-23T04:00:00","summary":"Overcast"},{"time":"2025-11-23T05:00:00","summary":"Overcast"},{"time":"2025-11-23T06:00:00","summary":"Snow shower"},{"time":"2025-11-23T07:00:00","summary":"Light snow"},{"time":"2025-11-23T08:00:00","summary":"Overcast"},{"time":"2025-11-23T09:00:00","summary":"Overcast"},{"time":"2025-11-23T10:00:00","summary":"Overcast"},{"time":"2025-11-23T11:00:00","summary":"Overcast"},{"time":"2025-11-23T12:00:00","summary":"Overcast"}]

Vielleicht hat ja einer ein Idee, oder findet den Fehler

jrbwh

@icebear ECharts scheint Deine Symbol-Definition nicht zu verstehen. Wenn ich alle Systemdefinitionen durch eine Beispieldefinition von ECharts ersetze, sehe ich dieses Chart:

Ich habe diese Symboldefinition verwendet:

          "symbol": "image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7",

icebear

@jrbwh

Danke für deinen Hinweis, jetzt funktioniert es.

Ich hatte allerdings noch ein anderes Problem, die Bezeichner der Wetterkonditionen enthielten 'Leerzeichen' also z.B. 'Light rain' oder 'Partly cloudy' deshalb ist er immer auf das 'Default Icon' gefallen.

Aber nun geht es wie man sieht, also nochmals vielen Dank an deinen Hinweis

Oli

@jrbwh @icebear

ist ja echt Wahnsinn, was mit dem Adapter alles funktioniert, ich muss mich damit unbedingt näher beschäftigen.

Ich bin gerade dabei von VIS auf VIS 2 umzusteigen, unter VIS habe ich das JSON Chart Widget vom Material Design Widgets Adapter benutzt. Damit konnte man echt coole Charts kreieren.

Jetzt suche ich natürlich nach einer Alternative und bin auf diesen Adapter gestoßen.

Ich möchte z.B. dieses Chart nachbauen

Die Daten kommen aus einen Wetter-Adapter, den Chart lasse ich mir einmal kurz nach Mitternacht erstellen. Bei der Temperatur ist ein Farbverlauf hinterlegt, der je nach Temperatur von dunkelblau bis dunkelrot geht.

Ist sowas mit dem Adapter möglich und wenn ja wie?

Ich muss dazusagen dass ich mich mit Javascript nicht wirklich auskennen und das obere Beispiel auch nur kopiert habe.

jrbwh

@Oli Ich sehe keinen Grund, warum das mit Flexcharts nicht gehe sollte. Ein wenig Javascript dürfte aber schon notwendig sein.
Bitte die Quelldaten und die aktuelle Chart-Definition (JSON) bereitstellen. Vielleicht kann ich daraus eine prototypische Umsetzung basteln. Ich kenne allerdings das "JSON Chart Widget" nicht.

Oli

@jrbwh
erst einmal danke für deine Unterstützung

Hier ist die JSON des Charts

{
 "axisLabels": [
   "1h",
   "2h",
   "3h",
   "4h",
   "5h",
   "6h",
   "7h",
   "8h",
   "9h",
   "10h",
   "11h",
   "12h",
   "13h",
   "14h",
   "15h",
   "16h",
   "17h",
   "18h",
   "19h",
   "20h",
   "21h",
   "22h",
   "23h",
   "24h"
 ],
 "graphs": [
   {
     "data": [
       1,
       1,
       1,
       1,
       1,
       1,
       1,
       1,
       1,
       2,
       2,
       2,
       3,
       3,
       2,
       2,
       2,
       2,
       2,
       2,
       2,
       2,
       1,
       1
     ],
     "type": "line",
     "color": "gray",
     "legendText": "Temperatur",
     "line_pointSizeHover": 5,
     "line_pointSize": 0,
     "line_Tension": 0.3,
     "yAxis_show": false,
     "yAxis_gridLines_show": false,
     "yAxis_gridLines_ticks_length": 5,
     "yAxis_min": 0,
     "yAxis_max": 10,
     "yAxis_step": 5,
     "yAxis_position": "left",
     "yAxis_appendix": " °C",
     "yAxis_zeroLineWidth": 0.1,
     "yAxis_zeroLineColor": "black",
     "displayOrder": 0,
     "tooltip_AppendText": " °C",
     "datalabel_backgroundColor": [
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3886a9",
       "#3886a9",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#2d7aa7",
       "#2d7aa7"
     ],
     "datalabel_color": "white",
     "datalabel_offset": -10,
     "datalabel_fontFamily": "Arial, Helvetica, sans-serif, Helvetica, sans-serif",
     "datalabel_fontSize": 12,
     "datalabel_borderRadius": 6,
     "datalabel_show": "auto",
     "line_PointColor": [
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3886a9",
       "#3886a9",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#2d7aa7",
       "#2d7aa7"
     ],
     "line_PointColorBorder": [
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3886a9",
       "#3886a9",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#2d7aa7",
       "#2d7aa7"
     ],
     "line_PointColorHover": [
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3886a9",
       "#3886a9",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#2d7aa7",
       "#2d7aa7"
     ],
     "line_PointColorBorderHover": [
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#2d7aa7",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3886a9",
       "#3886a9",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#3380a8",
       "#2d7aa7",
       "#2d7aa7"
     ],
     "use_gradient_color": true,
     "gradient_color": [
       {
         "value": -20,
         "color": "#5b2c6f66"
       },
       {
         "value": 0,
         "color": "#2874a666"
       },
       {
         "value": 14,
         "color": "#73c6b666"
       },
       {
         "value": 22,
         "color": "#00800066"
       },
       {
         "value": 27,
         "color": "#ffa50066"
       },
       {
         "value": 35,
         "color": "#ff000066"
       }
     ],
     "use_line_gradient_fill_color": true,
     "line_gradient_fill_color": [
       {
         "value": -20,
         "color": "#5b2c6f66"
       },
       {
         "value": 0,
         "color": "#2874a666"
       },
       {
         "value": 14,
         "color": "#73c6b666"
       },
       {
         "value": 22,
         "color": "#00800066"
       },
       {
         "value": 27,
         "color": "#ffa50066"
       },
       {
         "value": 35,
         "color": "#ff000066"
       }
     ]
   },
   {
     "data": [
       5,
       13,
       27,
       34,
       40,
       34,
       31,
       28,
       24,
       22,
       18,
       14,
       12,
       9,
       15,
       25,
       30,
       34,
       41,
       49,
       57,
       63,
       64,
       62
     ],
     "type": "line",
     "color": "#0d47a1",
     "legendText": "Niederschlagswahrscheinlichkeit",
     "line_UseFillColor": true,
     "line_pointSize": 0,
     "line_pointSizeHover": 5,
     "yAxis_min": 0,
     "yAxis_max": 100,
     "yAxis_maxSteps": 10,
     "yAxis_position": "left",
     "yAxis_gridLines_show": false,
     "yAxis_gridLines_border_show": false,
     "yAxis_zeroLineWidth": 0.1,
     "yAxis_zeroLineColor": "black",
     "yAxis_appendix": " %",
     "displayOrder": 1,
     "tooltip_AppendText": " %",
     "datalabel_show": false
   },
   {
     "data": [
       0,
       0.1,
       0.1,
       0.1,
       0.1,
       0.1,
       0.1,
       0.1,
       0.1,
       0.1,
       0,
       0,
       0,
       0,
       0,
       0,
       0.1,
       0.1,
       0.2,
       0.2,
       0.3,
       0.3,
       0.3,
       0.3
     ],
     "type": "bar",
     "color": "#6dd600",
     "legendText": "Niederschlag",
     "yAxis_min": 0,
     "yAxis_max": 10,
     "yAxis_maxSteps": 10,
     "yAxis_position": "right",
     "yAxis_gridLines_show": false,
     "yAxis_appendix": " mm",
     "yAxis_gridLines_border_show": false,
     "yAxis_zeroLineWidth": 0.1,
     "yAxis_zeroLineColor": "black",
     "displayOrder": 1,
     "tooltip_AppendText": " mm",
     "datalabel_show": false
   }
 ]
}

Die Quelldaten kommen aus dem Bright Sky Adapter aus folgenden Datenpunkten

Niederschlagsmenge:
brightsky.0.hourly.00.precipitation

Niederschlagswahrscheinlichkeit:
brightsky.0.hourly.00.precipitation_probability

Temperatur:
brightsky.0.hourly.00.temperature

hourly.00. ist immer die aktuelle Stunde, darum lasse ich den Chart einmal am Tag um kurz nach Mitternacht anlegen.

Die Datenpunkte werden von hourly.00. bis hourly.24 aufgeführt.

Falls du noch andere Informationen benötigst, dann bitte einfach melden.

jrbwh

@Oli Sorry, hat jetzt etwas gedauert, bis ich mir das anschauen konnte. Ich habe Deine Chart-Definition in Gemini rein geworfen, mit der Aufforderung aus dem jsonchart ein Apache EChart zu machen. Das Ergebnis hat auf Anhieb funktioniert, hatte aber noch ein paar Unstimmigkeiten. Nach ein wenig Nacharbeit ist jetzt folgendes Skript entstanden, dass direkt mit Flexcharts funktioniert:

// Chart-Definition für Apache ECharts:
var option = {
    // Titel und Tooltip Konfiguration
    title: {
        text: 'Wetterdaten (Flexcharts)',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        },
        // Benutzerdefinierte Formatierung für Tooltips (fügt Einheiten hinzu)
        formatter: function (params) {
            let tooltipContent = params[0].name + '<br/>';
            params.forEach(function(item) {
                let unit = '';
                // Bestimmung der Einheit basierend auf dem Seriennamen
                if (item.seriesName === 'Temperatur') unit = ' °C';
                else if (item.seriesName === 'Niederschlagswahrscheinlichkeit') unit = ' %';
                else if (item.seriesName === 'Niederschlag') unit = ' mm';
                
                tooltipContent += item.marker + item.seriesName + ': ' + item.value + unit + '<br/>';
            });
            return tooltipContent;
        }
    },
    legend: {
        data: ['Temperatur', 'Niederschlagswahrscheinlichkeit', 'Niederschlag'],
        bottom: 10
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
    },
    // X-Achse verwendet die axisLabels aus dem Quell-JSON
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ["1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h", "9h", "10h", "11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h", "22h", "23h", "24h"]
    },
    // Y-Achsen Konfiguration (ECharts unterstützt mehrere Y-Achsen)
    yAxis: [
        {
            // Y-Achse Links (Standard) für Niederschlagswahrscheinlichkeit
            type: 'value',
            name: 'Wk.keit (%)',
            min: 0, // min/max werden aus jsonchart übernommen, aber hier vereinfacht
            max: 100,
            position: 'left',
            axisLabel: {
                // ECharts fügt automatisch die richtige Einheit hinzu, indem es die Serie zuordnet (in diesem Beispiel nur visuell demonstriert)
            },
            axisLine: { show: true },
            axisTick: { show: true },
            splitLine: { show: false } // Gitterlinien ausgeblendet wie im Original
        },
        {
            // Y-Achse Rechts für Niederschlag
            type: 'value',
            name: 'Niederschlag (mm)',
            min: 0,
            max: 10,
            position: 'right',
            axisLine: { show: true },
            axisTick: { show: true },
            splitLine: { show: false }
        },
        {
            // 3. Y-Achse Temperatur - nicht sichtbar
            type: 'value',
            show: false,
            name: 'Temperatur (°C)'
            //min: 0,
            //max: 10
        }
    ],
    // Serien (Graphen) Konfiguration
    series: [
        {
            // Graph 1: Temperatur
            name: 'Temperatur',
            type: 'line', // "line"
            smooth: 0.3, // "line_Tension": 0.3
            data: [],
            itemStyle: { color: 'gray' }, // "color": "gray"
            yAxisIndex: 2, // Zugeordnet zur 3. Y-Achse
            // Bereichsfärbung (UseFillColor/Gradient): 
            // Diese spezifische Farbverlaufskonfiguration ist in ECharts komplexer zu mappen, 
            // da ECharts Farbverläufe meist relativ zur Achse oder global definiert.
            areaStyle: {
                opacity: 0.6,
                // Um das genaue jsonchart Farbverlaufschema zu replizieren, 
                // müsste man eine komplexe 'linearGradient' Funktion verwenden, 
                // die auf den Datenwerten basiert, was über diese einfache Konvertierung hinausgeht. 
                // Hier nur eine einfache Füllung:
                color: 'rgba(128, 128, 128, 0.3)' 
            },
            label: {
                show: 'auto', // "datalabel_show": "auto"
                position: 'top',
                color: 'black', // "datalabel_color": "black" statt "white"
                // Die spezifischen Hintergrundfarben pro Datenpunkt sind komplex und werden hier weggelassen.
            }
        },
        {
            // Graph 2: Niederschlagswahrscheinlichkeit
            name: 'Niederschlagswahrscheinlichkeit',
            type: 'line',
            data: [],
            itemStyle: { color: '#0d47a1' },
            yAxisIndex: 0, // Zugeordnet zur linken Y-Achse
            areaStyle: { // "line_UseFillColor": true
                color: '#0d47a166' 
            },
            label: { show: false } // "datalabel_show": false
        },
        {
            // Graph 3: Niederschlag (Barren-Diagramm)
            name: 'Niederschlag',
            type: 'bar', // "type": "bar"
            data: [],
            itemStyle: { color: '#6dd600' },
            yAxisIndex: 1, // Zugeordnet zur rechten Y-Achse
            label: { show: false } // "datalabel_show": false
        }
    ]
};

var strify = require('javascript-stringify');

onMessage('wetter', (httpParams, callback) => {
    // Aktuelle Vorhersagedaten im Chart speichern:
    option.series[0].data = [1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 4, 5, 6, 7, 6, 5, 4, 3, 2, 2, 1, 1];   // Temperatur
    option.series[1].data = [5, 13, 27, 34, 40, 34, 31, 28, 24, 22, 18, 14, 12, 9, 15, 25, 30, 34, 41, 49, 57, 63, 64, 62]; // Niederschlagswahrscheinlichkeit
    option.series[2].data = [0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0, 0, 0, 0, 0, 0, 0.1, 0.1, 0.2, 0.2, 0.3, 0.3, 0.3, 0.3]; // Niederschlag
    // Chart zurückliefern:
    callback(strify.stringify(option));
});

Es sind im Moment nur Demo-Daten drin. Du hast ja sicherlich bereits ein Skript, um die Daten aus der Objektstruktur von Bright Sky zu extrahieren. Da musst Du die Zeilen option.series[0].data = usw. entsprechend anpassen.

Um das in Flexcharts darszustellen gehst Du so vor:

Flexcharts-Adapter installieren, falls noch nicht passiert
Das npm-Modul javascript-stringify installieren, wie im Readme beschrieben
Skript mit obigem Inhalt anlegen und starten
Im Browser folgende Adresse aufrufen (localhost passend durch Deinen ioBroker-Rechner ersetzen): http://localhost:8082/flexcharts/echarts.html?source=script&message=wetter

Nun sollte dieses Chart erscheinen:

Da gibt es noch einiges Verbesserungspotenzial, aber als Grundgerüst sollte das funktionieren.

Oli

@jrbwh
erstmal vielen herzlichen Dank, für das Script, aber leider wird mir die JSON nicht in den entsprechenden Datenpunkt geschrieben

Adapter ist installiert Version 0.0.6
npm-Modul wurde installiert

Datenpunkt wurde angelegt

{
  "common": {
    "name": "wetter",
    "desc": "Manuell erzeugt",
    "role": "state",
    "type": "json",
    "read": true,
    "write": true,
    "def": ""
  },
  "type": "state",
  "native": {},
  "_id": "0_userdata.0.echarts.wetter",
  "acl": {
    "object": 1636,
    "state": 1636,
    "owner": "system.user.admin",
    "ownerGroup": "system.group.administrator"
  },
  "from": "system.adapter.admin.0",
  "user": "system.user.admin",
  "ts": 1765882489492
}

Hast du eine Idee woran das liegen kann?

jrbwh

@Oli Was für einen Datenpunkt meinst Du? Du musst im Javascript-Adapter ein neues Skript anlegen, Typ "JavaScript" und das von mir gepostete Skript reinkopieren, speichern und starten. Wie das Skript heißt, ist vollkommen egal.

Der Aufruf http://localhost:8082/flexcharts/echarts.html?source=script&message=wetter im Browser sendet dann die Message "wetter", das Skript reagiert darauf und liefert das Chart zurück.

Community Forum

NEWS

Test Adapter flexcharts - Stapeldiagramme und mehr

Support us

804

32.5k

81.8k

1.3m