UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?

[jrbwh]

@iob69

Weisst du wie ich funktionen einbauen kann?

Schau mal ins Readme, da ist das beschrieben.

[jrbwh]

Apache hat die Version 6.0.0 von ECharts veröffentlicht, hier sind die Neuerungen im Detail beschrieben. Das Standard-Thema, also das visuelle Erscheinungsbild, wurde deutlich verändert, es gibt einige neue Funktionen und Diagrammtypen und man kann nun dynamisch zwischen hellem und dunklem Design umschalten, getriggert durch die Systemeinstellung.

Ich habe Flexcharts entsprechend erweitert:

• mit &themev5 kann man dafür sorgen, dass das alte Erscheinungsbild (Version 5) bestehen bleibt
• mit &darkmode=auto aktiviert man die erwähnte dynamische Umschaltung
• es ist jetzt möglich, eigene Themen zu definieren und an Flexcharts zu übergeben
• zusätzliche Funktionsdefinitionen können nun in unbegrenzter Anzahl übergeben werden

Gerne mal ausprobieren, vor allem auch die Abwärtskompatibilität. Es sollte alles funktionieren wie bisher. Evtl. sehen die Chart visuell anders aus, dann sollte &themev5 das alte Erscheinungsbild zurück bringen. Die Version ist im Beta-Repo verfügbar.

Im Readme sind die neuen Möglichkeiten beschrieben. Auch ein einfaches Beispiel wie man die Themen nutzen kann, ist enthalten.

Freue mich auf euer Feedback.

Viele Grüße
Jürgen

[legro]

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

Ich habe Flexcharts entsprechend erweitert:

• mit &themev5 kann man dafür sorgen, dass das alte Erscheinungsbild (Version 5) bestehen bleibt ..

VORSICHT: Das funktioniert wohl nur, wenn man nicht den Parameter ..&darkmode.. im HTTP-Aufruf verwendet.

[jrbwh]

@legro Stimmt.

Das liegt daran, dass Apache ECharts für den light Mode das Thema "default" und für den den dark Mode das Thema "dark" verwendet. Für das "default" Thema stellt Apache ein Thema "v5" bereit, das mit dem Flexchart-Parameter "themev5" aktiviert wird, aber nur das Thema "default" ersetzt. Schaltet man auf den dark Mode um, ist der Parameter wirkungslos.

Ich habe ein Issue bei ECharts erstellt, mit der Bitte, ein entsprechendes Thema "v5dark" bereitzustellen.

Workaround:
Neben der Farbgestaltung ist vor allem die Legende betroffen, die unten statt oben dargestellt wird. Wenn man das ändern möchte, kann man entsprechende Definitionen in die Chart-Definition aufnehmen oder das Thema "dark" modifizieren. Wie Definition und Übergabe eigener Themen funktioniert, ist in der Readme beschrieben.

[legro]

@jrbwh in Test Adapter flexcharts - Stapeldiagramme und mehr:

Ich habe ein Issue bei ECharts erstellt, mit der Bitte, ein entsprechendes Thema "v5dark" bereitzustellen.

Da bin aber mal gespannt, ob die sich rühren.:thinking_face:

Angesichts der vielen Diagramme, die ich im Laufe der Zeit erstellt habe, wäre das eine schöne Sache. Wenn ich daran denke, alle Diagramme überarbeiten zu müssen, vergeht mir der Spaß. Nach meinen ersten Erfahrungen ändert sich nicht nur die Position der Legende, auch andere Dinge sind betroffen. So fehlen die ‚Ticks‘ auf der x-Achse, die Schriftgrößen - obwohl im Chart explizit definiert - werden größer dargestellt, ..

[Merlin123]

Danke für das Update und die Infos...
Bin wohl mit nem blauen Auge davon gekommen... Musste teilweise die Größe etwas anpassen, sonst scheint es zu passen.....

[jrbwh]

@merlin123 @legro Danke für eure Rückmeldungen. Bei Apache ECharts gibt es knapp 1.800 offene Issues - das kann also ein wenig dauern, bis ein v5 Dark-Thema bereitgestellt wird. Ich habe deshalb selbst eins gebastelt, basierend auf dem Dark-Thema von ECharts V5.6.0. Mit dem Parameter &themev5 werden also Light- und Dark-Thema umgeschaltet.

Würdet ihr das bitte ausprobieren und eure Eindrücke und ggf. festgestellte Abweichungen hier zurück melden? Die Version liegt wieder im Branch develop: https://github.com/MyHomeMyData/ioBroker.flexcharts/tree/develop

Zurück zu Flexcharts 0.5.0 geht es bei Bedarf am besten durch komplette Deinstallation des Adapters und Neuinstallation aus dem Stable-Repository.

STOPP: Irgendwas ist beim letzten Push nach Github schief gegangen. Bitte noch warten, muss das zuerst klären!

OK: Branch develop auf Github ist bereinigt und kann genutzt werden.

[Merlin123]

@jrbwh Da komm ich leider nicht zeitnah dazu....

[legro]

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

.. Bei Apache ECharts gibt es knapp 1.800 offene Issues - das kann also ein wenig..

Wenn ich an meine Erfahrungen in Sachen InfluxDB und Grafana denke, habe ich wenig Hoffnung, dass zu meinen Lebzeiten sich etwas tut.:cry: Über die Jahre gesehen hat sich hier nur vieles verschlechtert: Ankündigung von Flux und Abkündigung InfluxQL. Nun heißt‘s Abkündigung von Flux zurück zu InfluxQL; also rein in die Kartoffeln, raus aus den Kartoffeln. Die verwirrenden Konfigurationen in Grafana kommen mir vor wir Kraut und Rüben. Von derartiger Agrarinformatik habe ich die Nase voll.

Dank deiner großartigen Arbeit (FlexCharts-Adapter) konnte ich in kürzester Zeit all das realisieren, was mir bei Grafana über Jahre mehr schlecht als recht gelungen ist.:+1:

Ich habe deshalb selbst eins gebastelt, basierend auf dem Dark-Thema von ECharts V5.6.0. Mit dem Parameter &themev5 werden also Light- und Dark-Thema umgeschaltet.

Super!:+1:

Würdet ihr das bitte ausprobieren und eure Eindrücke und ggf. festgestellte Abweichungen hier zurück melden?

Das werde ich sehr gerne tun. Ich denke, dass ich diese Woche die nötige Ruhe und Zeit finde. Schon jetzt: Vielen Dank für deine Arbeit.

[UlliJ]

@jrbwh

kann mir (JS ist ein Buch mit 7 Siegeln für mich) erklären, wie die automatische Aktualisierung von Diagrammen umgesetzt werden kann...

Was ich habe:
Script mit Definition eines Diagramms

Spoiler

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

onMessage('chartCOP', (httpParams, callback) => {
   const myJsonParams  = (httpParams.myjsonparams ? JSON.parse(httpParams.myjsonparams) : {} );
   console.log(`httpParams = ${JSON.stringify(httpParams)}`);
   console.log(`myJsonParams = ${JSON.stringify(myJsonParams)}`);
   chartCOP(result => callback(result));
});
   
function chartCOP(callback) {
   const numVLact=getState("alias.0.1000_Heizung.WP.VLTemperatur").val;
   const numATact=getState("alias.0.1000_Heizung.Klima.AussenTemperatur").val;
   const numCOPact=getState("0_userdata.0.1000_Heizung.WP.COP").val;
   const VLmin=30;
   const VLmax=65;
   const ATmin=-10;
   const ATmax=20;
   const option = {
 "tooltip": {
   "show": false,
   "formatter": function (param) {
     return (
       "AT: " + param.value[0].toFixed(1) + "°C<br>" +
       "VL: " + param.value[1].toFixed(1) + "°C<br>" +
       "COP: " + param.value[2].toFixed(2)
     );
   }
 },
 "visualMap": {
   "show": false,
   "dimension": 2,
   "seriesIndex": 0,
   "min": 1,
   "max": 6,
   "inRange": {
     "color": [
       "rgba(139, 0, 0, 0.9)",    // Dunkelrot – niedriger COP
       "rgba(255, 69, 0, 0.85)",  // Orange-Rot
       "rgba(255, 205, 0, 0.8)",  // Gelb
       "rgba(0, 255, 127, 0.75)", // Hellgrün
       "rgba(64, 224, 208, 0.75)", // Türkis / Mittelblau
       "rgba(30, 144, 255, 0.8)",  // Kräftiges Blau
       "rgba(0, 0, 200, 0.85)"     // Tiefblau – hoher COP
     ]
   },
   "text": ["COP hoch", "COP niedrig"],
   "calculable": true
 },
 "xAxis3D": { "type": "value", "name": "AT (°C)", "min": ATmin, "max": ATmax, "interval": 5 },
 "yAxis3D": { "type": "value", "name": "VL (°C)", "min": VLmin, "max": VLmax, "interval": 5 },
 "zAxis3D": { "type": "value", "name": "COP", "min": 0, "max": 8, "interval": 1 },
 "grid3D": {
   "boxWidth": 100,
   "boxDepth": 60,
   "boxHeight": 45,
   "environment": "auto",
   "viewControl": {
     "alpha": 30,
     "beta": 225,
     "distance": 150,
     "minBeta": -360,
     "maxBeta": 360,
     "autoRotate": false,
     "center": [
       0,
       -12,
       0
     ]
   },
   "light": {
     "main": {
       "intensity": 1.4,
       "shadow": true,
       "alpha": 30,
       "beta": 120
     },
     "ambient": {
       "intensity": 0.5
     }
   }
 },
 "series": [
   {
     "type": "surface",
     "name": "statisches COP Netz",
     "wireframe": { "show": false },
     "shading": "realistic",
     "itemStyle": {
       "color": "rgba(0,150,255,0.4)",
       "opacity": 0.8
     },
     "realisticMaterial": {
       "roughness": 0.1,
       "metalness": 0
     },
     "data": (function() {
       const data = [];
       for (let AT = ATmin; AT <= ATmax; AT += 1) {
         for (let VL = VLmin; VL <= VLmax; VL += 1) {
           const COP = 6.65 - 3.8 * Math.exp(-0.165 * (AT + 10)) +
                       0.00015 * VL * VL - 0.035 * VL;
           if (COP > 1) {
               data.push([AT, VL, COP]);
           }
         }
       }
       return data;
     })()
   },
   {
     "type": "line3D",
     "name": "VL = aktuelle Temperatur",
     "lineStyle": { "width": 3, "color": "rgba(255,69,0,0.9)" },
     "data": (function() {
       const arrLine1 = [];
       let VL = numVLact;
       for (let AT = ATmin; AT <= ATmax; AT += 1) {
           const COP = 6.65 - 3.8 * Math.exp(-0.165 * (AT + 10)) +
                     0.00015 * VL * VL - 0.035 * VL;
           arrLine1.push([AT, VL, COP]);
       }
       return arrLine1;
     })()
   },
   {
     "type": "line3D",
     "name": "AT = aktuelle Temperatur",
     "lineStyle": { "width": 3, "color": "rgba(255,69,0,0.9)" },
     "data": (function() {
       const arrLine2 = [];
       for (let VL = VLmin; VL <= VLmax; VL += 1) {
         const COP = 6.65 - 3.8 * Math.exp(-0.165 * (numATact + 10)) +
                     0.00015 * VL * VL - 0.035 * VL;
         arrLine2.push([numATact, VL, COP]);
       }
       return arrLine2;
     })()
   },
   {
       type: "line3D",
       name: "COP = 4.3 Kontur",
       lineStyle: { color: "rgba(139, 0, 0, 0.7)", width: 2 },
       data: (function () {
       const arrcop = [];
       for (let AT = ATmin; AT <= ATmax; AT += 0.05) {
           for (let VL = VLmin; VL <= VLmax; VL += 0.05) {
           const cop = 6.65 - 3.8 * Math.exp(-0.165 * (AT + 10))
                  + 0.00015 * VL * VL - 0.035 * VL;
           if (Math.abs(cop - 4.3) < 0.05) {  
         arrcop.push([AT, VL, cop]);
           }
       }
       }
       return arrcop;
   })()
   },
   {
     "type": "scatter3D",
     "name": "real",
     //"symbol": "pin",
     "visualMap": false,
     "symbolSize": 20,
     "animation": true,
     "animationDuration": 800,
     "animationEasing": "cubicOut",
     "itemStyle": { "color": "rgba(0, 0, 200, 0.95)" },
     "data": (function() {
       return [[numATact, numVLact, numCOPact]];
     })()
   },
   {
       "type": "scatter3D",
       "name": "Projektion CHA",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(0, 0, 200, 0.95)" },
       "data": [
       [ATmax, VLmax, numCOPact]
       ]
   },
   {
     "type": "scatter3D",
     "name": "Betriebspunkt",
     //"symbol": "pin",
     "visualMap": false,
     "symbolSize": 10,
     "animation": true,
     "animationDuration": 800,
     "animationEasing": "cubicOut",
     "itemStyle": { "color": "rgba(255,69,0,0.9)" },
     "data": (function() {
       const COPaktuell = 6.65 - 3.8 * Math.exp(-0.165 * (numATact + 10)) +
                          0.00015 * numVLact * numVLact - 0.035 * numVLact;
       return [[numATact, numVLact, COPaktuell]];
     })()
   },
   {
       "type": "scatter3D",
       "name": "Projektion auf AT-Ebene",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(255,69,0,0.9)" },
       "data": [
           [ATmin, numVLact, 0]
       ]
   },
   {
       "type": "scatter3D",
       "name": "Projektion auf VL-Ebene",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(255,69,0,0.9)" },
       "data": [
       [ATmax, VLmax, (6.65 - 3.8 * Math.exp(-0.165 * (numATact + 10)) +
                          0.00015 * numVLact * numVLact - 0.035 * numVLact)]
       ]
   },
   {
       "type": "scatter3D",
       "name": "Projektion auf COP-Basis",
       "symbolSize": 6,
       "visualMap": false,
       "itemStyle": { "color": "rgba(255,69,0,0.9)" },
       "data": [
           [numATact, VLmax, 0]
       ]
   }
 ]
};

   callback(strify.stringify(option));
};

Anzeige im Browser funktioniert

Aktualisiert werden die Daten bei einem refresh im Browser. Ich hätte das aber gerne bei Änderung der relevanten Datenpunkte ohne refresh... und das will nicht!
Wie muss ich die Trigger im Spoiler an den Adapter übergeben?

Spoiler

//Trigger für update des Charts
on({id: [
 "alias.0.1000_Heizung.WP.VLTemperatur",
 "alias.0.1000_Heizung.Klima.AussenTemperatur",
 "0_userdata.0.1000_Heizung.WP.COP"
], change: "any"}, function (obj) {
   const numVLact = getState("alias.0.1000_Heizung.WP.VLTemperatur").val;
   const numATact = getState("alias.0.1000_Heizung.Klima.AussenTemperatur").val;
   const numCOPact = getState("0_userdata.0.1000_Heizung.WP.COP").val;

   const update = {
       series: [
           { name: "real", data: [[numATact, numVLact, numCOPact]] }/*,
           { name: "Projektion auf AT-Ebene", data: [[numATact, 20, numCOPact]] },
           { name: "Projektion auf VL-Ebene", data: [[numATact, numVLact, 0]] }*/
       ]
   };
   sendTo("flexcharts.0", "setOption", {
       id: "chartCOP",                  // Chart-ID im Frontend
       option: update,                  // Update-Objekt
       notMerge: false,
       lazyUpdate: false,
       transition: { duration: 800 }
   });
})

Vorab schon mal danke für die Hilfe

[jrbwh]

@ullij Ich kann Deinen Wunsch gut verstehen und der Ansatz über sendTo() ist im Prinzip genau richtig, aber leider mit dem aktuellen Konzept nicht umsetzbar.

Flexcharts arbeitet als Web-Extension des Web-Adapters und hat gar keine eigene permanente Laufzeit-Routine. Der Flexcharts-Code wird vom Web-Adapter aufgerufen, liefert eine HTML-Seite zurück und beendet sich wieder. Der einzige Entry-Point ist also der HTML-Aufruf im Browser. Der Parameter refresh bewirkt, dass der Browser die Abfrage regelmäßig wiederholt.

Ich sehe im Moment keine Möglichkeit, im Rahmen dieses Konzepts einen externen Trigger zu realisieren.

Vielleicht hat jemand im Forum ein Idee?

[UlliJ]

@jrbwh
danke Dir für die Antwort... :relaxed:
Dennoch ein tolles feature für iobroker

[legro]

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

Vielleicht hat jemand im Forum ein Idee?

Irgendwie kommt mir diese Diskussion bekannt vor.:thinking_face: Wenn ich mich recht entsinne, ging es damals darum, wie man ein in einer View integriertes Diagramm aktualisieren kann.

Die damals entwickelte Technik könnte ja ggf. auch hier greifen: Ein Klick auf einen Button in der View sorgt dafür, dass das Diagramm - inklusive einer Abfrage der Datenquellen - neu aufgebaut und dargestellt wird. So kann etwa auch mittels schedule für eine regelmäßiges Aktualisieren gesorgt werden, oder man setzt Trigger auf die sich ändernden Datenpunkte.

[jrbwh]

@legro Ein Button in der View führt zu einem erneuten Aufruf der HTML-Seite. Kann man das Aktualisieren der View durch eine Änderung der Quelldaten triggern, so dass die HMTL-Seite neu geladen wird?

@UlliJ In welchem Kontext soll das Chart dargestellt werden? vis, jarvis, ...?

[icebear]

Also ich lass mir die Diagramme über TypeScripte erstellen, die ein Schedule haben um die Daten zu aktualisieren und da wird dann auch jedesmal das Diagramm aktualisiert.

Beispiel:

// Importiere javascript-stringify (wird nur zur Laufzeit benötigt, da es ein zusätzliches NPM-Modul ist)
const stringify = require('javascript-stringify');

// --- KONFIGURATION ---
const INFLUXDB_INSTANCE = 'influxdb.0'; 
const DATAPOINT_ID_SUPPLY = 'ebus.0.hmu.messages.SupplyTemp.fields.temps2.value';
const DATAPOINT_ID_RETURN = 'ebus.0.hmu.messages.ReturnTemp.fields.temps2.value';
const FLEXCHARTS_TARGET_STATE = '0_userdata.0.Flexcharts.wpSupplyTemp';

// Timer für die periodische Aktualisierung des Charts (z.B. alle 5 Minuten)
schedule('*/5 * * * *', async () => {
    await createAndSetChartData();
});

// Führe das Skript einmalig beim Start aus
createAndSetChartData();

// Hauptfunktion zur Abfrage der Daten und Erstellung des Charts
async function createAndSetChartData() {
    
    // 1. ZEITRAUM BERECHNUNG
    const today = new Date();
    today.setHours(0, 0, 0, 0); 
    const startTime = today.getTime();
    const endTime = Date.now(); 

    // Optionen für die History-Abfrage
    const historyOptions = {
        start: startTime,
        end: endTime,
        aggregate: 'none', 
        limit: 5000, 
        returnNewestEntries: true,
        removeBorderValues: false 
    };

    let dataSupply = []; 
    let dataReturn = [];

    try {
// 2a. DATENABFRAGE für VORLAUF (SupplyTemp)
        const resultSupply = await sendToAsync(INFLUXDB_INSTANCE, 'getHistory', {
            id: DATAPOINT_ID_SUPPLY,
            options: historyOptions
        });
        
        // --- KORRIGIERTE DATENEXTRAKTION VORLAUF ---
        // resultSupply wird als 'unknown' behandelt, daher Type Assertion ('as any')
        const supplyDataFromObject = (resultSupply as any).result; 

        if (Array.isArray(resultSupply)) {
             dataSupply = resultSupply;
        } else if (resultSupply && Array.isArray(supplyDataFromObject)) {
             dataSupply = supplyDataFromObject; // Zugriff über die Type Assertion
        } else if (resultSupply && Array.isArray((resultSupply as any)[DATAPOINT_ID_SUPPLY])) {
             dataSupply = (resultSupply as any)[DATAPOINT_ID_SUPPLY]; 
        }
        
        // 2b. DATENABFRAGE für RÜCKLAUF (ReturnTemp)
        const resultReturn = await sendToAsync(INFLUXDB_INSTANCE, 'getHistory', {
            id: DATAPOINT_ID_RETURN,
            options: historyOptions
        });
        
        // --- KORRIGIERTE DATENEXTRAKTION RÜCKLAUF ---
        const returnDataFromObject = (resultReturn as any).result;

        if (Array.isArray(resultReturn)) {
             dataReturn = resultReturn;
        } else if (resultReturn && Array.isArray(returnDataFromObject)) {
             dataReturn = returnDataFromObject; // Zugriff über die Type Assertion
        } else if (resultReturn && Array.isArray((resultReturn as any)[DATAPOINT_ID_RETURN])) {
             dataReturn = (resultReturn as any)[DATAPOINT_ID_RETURN];
        }

        // --- 3. DATENFORMATIERUNG ---
        const seriesDataSupply = dataSupply
            .filter(entry => entry && entry.val !== null && typeof entry.val === 'number')
            .map(entry => [entry.ts, entry.val]);
        
        const seriesDataReturn = dataReturn
            .filter(entry => entry && entry.val !== null && typeof entry.val === 'number')
            .map(entry => [entry.ts, entry.val]);


        // --- 4. CHART-DEFINITION (ECharts Option) ---
        const option = {
            grid: { left: '10px', right: '15px', bottom: '10px', top: '30px', containLabel: false },
            tooltip: { 
                trigger: 'axis',
                formatter: function (params) {
                    let res = new Date(params[0].value[0]).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }) + '<br/>';
                    params.forEach(function (item) {
                        res += item.marker + item.seriesName + ': ' + item.value[1].toFixed(1) + ' °C<br/>';
                    });
                    return res;
                }
            },
            xAxis: {
                type: 'time', 
                axisLabel: {
                    formatter: function (value, index) {
                        const date = new Date(value);
                        return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
                    }
                },
            },
            yAxis: {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: '#808080'
                    }
                },
                name: 'Temperatur (°C)',
                min: 'dataMin', 
                max: 'dataMax',
            },
            series: [
                {
                    name: 'Vorlauf',
                    type: 'line',
                    data: seriesDataSupply, 
                    smooth: true, 
                    itemStyle: { color: '#D9534F' }, 
                    showSymbol: false 
                },
                {
                    name: 'Rücklauf',
                    type: 'line',
                    data: seriesDataReturn, 
                    smooth: true,
                    itemStyle: { color: '#5BC0DE' }, 
                    showSymbol: false
                }
            ]
        };

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

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

// Hilfsfunktion, um sendTo in ein Promise zu verpacken (korrigiert)
function sendToAsync(adapter, command, data) {
    return new Promise((resolve, reject) => {
        // Der ioBroker sendTo Callback liefert ein Ergebnisobjekt
        sendTo(adapter, command, data, (result) => {
            
            // Verwende 'any' (Type Assertion), um auf 'error' und 'result' zuzugreifen
            const resultObj = result as any; 
            
            if (resultObj && resultObj.error) {
                // Bei einem Fehler wird der Fehlertext zurückgegeben
                reject(resultObj.error);
            } else {
                // Bei Erfolg: Das gesamte Ergebnisobjekt wird resolved, 
                // da die Struktur je nach Abfrage (Einzel-ID vs. Mehrfach-ID) variiert.
                resolve(resultObj); 
            }
        });
    });
}

[UlliJ]

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

In welchem Kontext soll das Chart dargestellt werden? vis, jarvis, ...?

nutze Vis-2.
Die Aktualisierung selbst ist nicht das Problem. Mich stört nur das "flackern" beim neuaufbau, speziell wenn die Aktualisierungsrate hoch ist. Oder habt ihr das nicht?
anders gesagt: die Animationsfunktionen von echarts funktionieren (bei mir) nicht.

[legro]

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

@legro Ein Button in der View führt zu einem erneuten Aufruf der HTML-Seite. Kann man das Aktualisieren der View durch eine Änderung der Quelldaten triggern, so dass die HMTL-Seite neu geladen wird?

Hier zeige ich in einem kleinen Video wie sich das Ganze in der Praxis darstellt. Sowohl ein Klick auf den Aktualusierungsbutton (Schaltfläche mit dem Kreis) als auch die Auswahl von Jahr/Monat in den beiden drop/down-Menüs bewirkt die Aktualisierung der Diagramme.

Bei diesem Vorgehen wird jedoch nicht die View, sondern bloß das Diagramm im iFrame neu dargestellt.

Da für @UlliJ das Aktualisieren ja kein Problem ist, möchte ich nur auf Nachfrage mir die Mühe machen, mein Vorgehen im Detail hier zu beschreiben.

[jrbwh]

@icebear Ok, mit dem Skript erzeugst Du alle 5 Minuten die Diagrammdaten in den States neu. Aber wie wird bewerkstelligt, dass dann auch das Chart aktualisiert wird? Das hab ich noch nicht kapiert.

[legro]

@ullij

.. Mich stört nur das "flackern" beim neuaufbau, speziell wenn die Aktualisierungsrate hoch ist. ..

In einem anderen Zusammenhang habe ich dieses Problem gelöst: Ich stelle in einer View die Auswahl von Energie in KWh oder Kosten in € zur Verfügung. Über Radio-Buttons schalte ich zwischen diesen zuvor erzeugten Anzeigen um, indem ich die Sichtbarkeit der beteiligten Widgets ändere.

Du könntest also mit zwei iFrames arbeiten: Das Widget, das gerade neu mit Daten gefüllt wird, erzeugst du während es (noch) ausgeblendet ist. Sobald die Aktualisierung abgeschlossen ist, schaltest du die Sichtbarkeit um.

Aber ob sich solch ein Aufwand lohnt?

[legro]

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

.. Aber wie wird bewerkstelligt, dass dann auch das Chart aktualisiert wird? Das hab ich noch nicht kapiert.

Genau das hatten wir doch vor einiger Zeit in einem Thread diskutiert. Leider finde ich den nicht auf Anhieb.

Hier mein Vorgehen ..

Das verwendete iFrame besitzt ein Feld Updatezeit (ms).

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.