NEWS
Test Adapter flexcharts - Stapeldiagramme und mehr
-
@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
&themev5werden 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.
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 DiagrammsAnzeige 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?
Vorab schon mal danke für die Hilfe
Proxmox auf iNuc, VM's IOB, Raspberrymatic, lxc für InfluxDB2, Grafana, u.a. *** Homematic & Homematic IP, Shellies etc
-
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 DiagrammsAnzeige 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?
Vorab schon mal danke für die Hilfe
@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
refreshbewirkt, 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 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
refreshbewirkt, 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 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
refreshbewirkt, 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?
@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.
Nach über vier Jahren Leidenszeit unter Qivicon/MSH vor den Telekomikern zu ioBroker geflüchtet.
Raspberry Pi 4 mit 8GB + ArgonOneM.2 + 120GB SSD + Coordinator CC26X2R1 + ioBroker + piVCCU3 -
@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.
-
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); } }); }); } -
@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. -
@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.
-
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); } }); }); } -
@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... 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?
-
@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.
@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.
-
@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.
@jrbwh said in Test Adapter flexcharts - Stapeldiagramme und mehr:
Aber wie wird bewerkstelligt, dass dann auch das Chart aktualisiert wird? Das hab ich noch nicht kapiert.
Das Chart hab ich in der vis-2 in einem iFrame und da dann ganz normal die Häckchen bei 'Update beim Aufwachen', 'Update beim View Wechsel' und Updatezeit bei 180000.
Sieht dann in der Runtime so aus:
-
@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.
@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 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.@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 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.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' } } -
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' } }@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". -
@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". -
@ullij sagte in Test Adapter flexcharts - Stapeldiagramme und mehr:
HTML-Seite mit socketio
Zeig mal bitte das HTML, mit JS erstellt?
@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> -
@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.
-
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?
Support us
744
Online32.4k
Benutzer81.5k
Themen1.3m
Beiträge