Hallo Zusammen,
erstmal ein sehr großes lob an Scrounger für das Super-Widget und an Frank der eine coole Anleitung gemacht hat, mit der sogar mir es möglich ist dieses Widget zu benutzen.
Echt coole Arbeit und die Performance der InfluxDB Abfrage ist unschlagbar.
Ich bin leider an ein Phänomen gestoßen, wo ich selber nicht weiter komme und möchte euch um Unterstützung bitten.
Die Zeit an der X-Achse ist sehr seltsam verschoben. es fängt mit 3:00 an und hört mit 1:00. Es sind auch nur 23 Stunden abgebildet. Der Balken bei 2 Uhr fehlt komplett. Wenn ich die JSON anschaue sind die Daten aber alle vorlaufend vorhanden.
Kennt jemand dieses Verhalten und wie kann man gegensteuern?
So sieht mein Graph aus:
Hier noch die JSON:
{
"graphs": [
{
"type": "bar",
"barIsStacked": true,
"barStackId": 1,
"color": "#2200FF",
"legendText": "WW",
"yAxis_id": 0,
"yAxis_show": true,
"yAxis_minimumDigits": 1,
"yAxis_maximumDigits": 1,
"yAxis_appendix": " kW",
"yAxis_min": 0,
"datalabel_show": false,
"line_pointSize": 50,
"xAxis_bounds": "tick",
"xAxis_timeFormats": {
"millisecond": "H:mm:ss.SSS",
"second": "H:mm:ss",
"minute": "H:mm",
"hour": "H:mm",
"day": "DD.MM",
"week": "DD.MM",
"month": "MMMYYYY",
"quarter": "[Q]Q - YYYY",
"year": "YYYY"
},
"data": [
{
"t": 1687302000000,
"y": 0
},
{
"t": 1687298400000,
"y": 0
},
{
"t": 1687294800000,
"y": 0
},
{
"t": 1687291200000,
"y": 0
},
{
"t": 1687287600000,
"y": 0
},
{
"t": 1687284000000,
"y": 0
},
{
"t": 1687280400000,
"y": 0
},
{
"t": 1687276800000,
"y": 0
},
{
"t": 1687273200000,
"y": 0
},
{
"t": 1687269600000,
"y": 0
},
{
"t": 1687266000000,
"y": 0
},
{
"t": 1687262400000,
"y": 0
},
{
"t": 1687258800000,
"y": 0.5847000000000698
},
{
"t": 1687255200000,
"y": 1.2440999999999767
},
{
"t": 1687251600000,
"y": 0
},
{
"t": 1687248000000,
"y": 0
},
{
"t": 1687244400000,
"y": 0
},
{
"t": 1687240800000,
"y": 0
},
{
"t": 1687237200000,
"y": 0
},
{
"t": 1687233600000,
"y": 0.7554000000000233
},
{
"t": 1687230000000,
"y": 0
},
{
"t": 1687226400000,
"y": 0
},
{
"t": 1687222800000,
"y": 0
}
]
},
{
"type": "bar",
"barIsStacked": true,
"barStackId": 1,
"color": "#FF4800",
"legendText": "HZ",
"yAxis_id": 0,
"yAxis_show": true,
"yAxis_min": 0,
"datalabel_show": false,
"datalabel_color": "#44739e",
"line_pointSize": 50,
"xAxis_bounds": "tick",
"xAxis_timeFormats": {
"millisecond": "H:mm:ss.SSS",
"second": "H:mm:ss",
"minute": "H:mm",
"hour": "H:mm",
"day": "DD.MM",
"week": "DD.MM",
"month": "MMMYYYY",
"quarter": "[Q]Q - YYYY",
"year": "YYYY"
},
"data": [
{
"t": 1687302000000,
"y": 0
},
{
"t": 1687298400000,
"y": 0
},
{
"t": 1687294800000,
"y": 0
},
{
"t": 1687291200000,
"y": 0
},
{
"t": 1687287600000,
"y": 0
},
{
"t": 1687284000000,
"y": 0
},
{
"t": 1687280400000,
"y": 0.0018000000000465662
},
{
"t": 1687276800000,
"y": 0.0015
},
{
"t": 1687273200000,
"y": 0.0011999999999534338
},
{
"t": 1687269600000,
"y": 0.0013000000000465662
},
{
"t": 1687266000000,
"y": 0.0010999999998603017
},
{
"t": 1687262400000,
"y": 0.001
},
{
"t": 1687258800000,
"y": 0.0279000000001397
},
{
"t": 1687255200000,
"y": 0
},
{
"t": 1687251600000,
"y": 0.0008999999999068678
},
{
"t": 1687248000000,
"y": 0.0011000000000931322
},
{
"t": 1687244400000,
"y": 0.0013999999999068677
},
{
"t": 1687240800000,
"y": 0.0013000000000465662
},
{
"t": 1687237200000,
"y": 0.0011999999999534338
},
{
"t": 1687233600000,
"y": 0.009
},
{
"t": 1687230000000,
"y": 0.001
},
{
"t": 1687226400000,
"y": 0.001
},
{
"t": 1687222800000,
"y": 0.001
}
]
}
]
}
Und hier vollständigkeitshalber die Abfrage:
// Dieses Skript dient der Erzeugung eines JSON für die Darstellung hoch individualisierbarer Charts
// mittels des JSON-Chart-Widgets aus dem Material-Design-Adapter auf Basis von Datenpunkthistorisierung in InfluxDB 2.x
// Die x-Achse kann im JSON grundsätzlich auf 2 Methoden angegeben werden:
// a) Individuell über die Eigenschaft "axisLabels": ["1h", "2h", "3h", ...] oder
// b) Durch Angabe von Zeitstempeln und Werten "data": [{"t": 1640624405000,"y": 1.4536},{"t": 1640649605000,"y": 1.4665}, ...]
// Dieses Skript verwendet die letztgenannte Methode! Auf der x-Achse wird somit immer die Zeit dargestellt.
// Die Formatierung für alle Zeitaggregationen erfolgt über die Eigenschaft xAxis_timeFormats im JSON (siehe unten in den GlobalSettings).
// Je nach Darstellungswünschen muss man zusätzlich noch mit den Parametern "xAxsisTickSource" und "Versatz der x-Achse" in den Widget-Eigenschaften des x-Achsen Layouts spielen.
// Mit den über das JSON dem Widget zugeführten Daten und Parametern ist dieses in der Lage, verschiedene Datenpunkte gemeinsam in einem Chart darzustellen.
// Dabei können z.B. Balken gestapelt oder gemischte Charts aus Balken und Linien erzeugt werden. Die Skript-Einstellungen unten erezugen ein Bar-Chart mir zwei Line-Charts
// Danke an Scrounger für den tollen MDW-Adapter und das Beispielskript, aus dem ich mir dieses hier "zusammengebastelt" habe.
// #################### Auslöser (Trigger), die das JSON-Objekt neu erzeugen ####################
// Zeitgesteuert
// schedule({minute: [01]}, refresh);
// Bei Änderung eines Datenpunktes
// Hier bei Umschaltung zwischen Light/Dark-Mode, falls man im JSON Farben-Properties setzten möchte
// on('vis-materialdesign.0.colors.darkTheme', function (obj) {
// refresh();
// });
// Beim Speichern oder Starten des Skriptes
refresh();
// Gesamter Skriptcode ist in der Funktion refresh() eingebettet. Diese Funktion wird über die Trigger oben aufgerufen
function refresh() {
// #################### Skript-Einstellungen ####################
// History Instanz die verwendet werden soll
let historyInstance = 'influxdb.0';
// Ziel-Datenpunkt in der Objektstruktur für das JSON vom Typ "string", auf den im Widget verwiesen wird. Muss zuvor von Hand angelegt werden
let targetDP = '0_userdata.0.Test';
// Debug-Mode (true/false)
// Gibt bei true in der Skript-Console und im ioBroker-Protokoll Inhalte von Verarbeitungsschritten aus (z.B. das Ergebnis der Flux-Abfrage und das fertige JSON)
let debug = false;
// Hier optional Farben, Schriften und Schriftgrößen aus den Material-Design-Widget- oder anderen eigenen Datenpunkten holen, falls solche JSON-Chart-Properties gesetzt werden sollen
// Optional den Datenpunkt abfragen, mit dem zwischen Light/Dark-Theme umgeschaltet wird
// let mdw_darkTheme = getState('vis-materialdesign.0.colors.darkTheme').val;
// Variable(n) mit Farbcodes aus Datenpunkten in Abhängigkeit von Light/Dark-Theme füllen, die unten in den Chart-Einstellungen verwendet werden sollen
// let mdw_datalabel_color_kWh = (mdw_darkTheme) ? getState('vis-materialdesign.0.colors.dark.charts.value').val : getState('vis-materialdesign.0.colors.light.charts.value').val;
// let mdw_line_color_tempOut = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Allgemeine_Farben.dark.Aussentemperatur').val : getState('0_userdata.0.VIS.Allgemeine_Farben.light.Aussentemperatur').val;
// let mdw_datalabel_color_tempOut = (mdw_darkTheme) ? getState('0_userdata.0.VIS.Allgemeine_Farben.dark.Aussentemperatur').val : getState('0_userdata.0.VIS.Allgemeine_Farben.light.Aussentemperatur').val;
// Dto. für Schriftart(en) und Schriftgröße(n)
// let mdw_datalabel_fontFamily = getState('vis-materialdesign.0.fonts.charts.value').val;
// let mdw_datalabel_fontSize = getState('vis-materialdesign.0.fontSizes.charts.value').val;
// Time Range wird aus den Datenpunkten ausgelesen
let start = getState('0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Timerange_start').val;
let stop = getState('0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_Timerange_stop').val;
let every = getState('0_userdata.0.Diagrammsteuerung.Energie.WP_POW_SET_aggregate_Window').val;
// let start = "2023-06-05T00:00:00Z"; // Setze den gewünschten Startwert hier
// let stop = "2023-06-11T23:59:59Z"; // Setze den gewünschten Stopwert hier
// Gemeinsam verwendete Chart-Einstellungen, Details siehe https://github.com/Scrounger/ioBroker.vis-materialdesign#json-chart
// Hinweis: Weitere Einstelloptionen zu Legende, x-Achse etc. befinden sich in den Eigenschaften des Widgets!
let globalGraphSettings = {
line_pointSize: 50,
// datalabel_fontFamily: 'RobotoCondensed-Light',
// datalabel_fontSize: 50,
xAxis_bounds: 'data',
xAxis_timeFormats: {
millisecond: "H:mm:ss.SSS",
second: "H:mm:ss",
minute: "H:mm",
hour: "H:mm",
// hour: "dd.[\\n]H:mm",
day: "DD.MM",
// day: "dd[\\n]DD.MM",
week: "DD.MM",
// week: "dd[\\n]DD.MM",
month: "MMMYYYY",
// month: "MMM[\\n]YYYY",
quarter: "[Q]Q - YYYY",
year: "YYYY"
}
}
// InfluxDB-Flux-Query(s), die verwendet werden sollen und die zugehörigen individuellen Chart-Einstellungen
// Die hier dargestellten Flux-Querys sind aus einer InfluxDB 2.x mit den Adaptereinstellungen 'Tags anstelle Felder für Metadaten' (Influx-Adapter -> Experteneinstellungen)
// Bitte unbedingt die Infos dazu lesen, bevor die Eigenschaft umgestellt wird: https://github.com/ioBroker/ioBroker.influxdb/blob/master/README.md#Store-metadata-information-as-tags-instead-of-fields
// Die Abfragen können sehr gut mit dem InfluxDB-OSS (GUI) erstellt werden. Wenn die dort angezeigten Daten im 'View Raw Data'-Modus hinsichtlich _value und _time dem Gewünschten entsprechen,
// einfach die Query hierher kopieren und noch hinter jede Zeile ein '\' für den Zeilenumbruch im String setzen.
let datenpunkte = [
{
fluxQuery:
'import "timezone" \
option location = timezone.location(name: "Europe/Berlin") \
from(bucket: "iobroker") \
|> range(start: ' + start + ', stop: ' + stop + ') \
|> filter(fn: (r) => r["_measurement"] == "WP-WW_EST_Energie") \
|> filter(fn: (r) => r["_field"] == "value") \
|> aggregateWindow(every: ' + every + ', fn: last, timeSrc: "_start") \
|> difference() \
|> sort(columns: ["_time"], desc: true) \
|> sort(columns: ["_time"], desc: false)'
,
graphSettings: {
type: 'bar',
barIsStacked: true,
barStackId: 1,
color: '#2200FF',
legendText: 'WW',
yAxis_id: 0,
yAxis_show: true,
yAxis_minimumDigits: 1,
yAxis_maximumDigits: 1,
yAxis_appendix: ' kW',
yAxis_min: 0,
// yAxis_max: 8000,
datalabel_show: false,
// datalabel_rotation: 90,
// datalabel_minDigits: 1,
// datalabel_maxDigits: 1,
// datalable_color: '#44739e',
// displayOrder: 1
}
}, // <= Zwischen mehreren Datenpunkten hier das Komma nicht vergessen!
{
fluxQuery: // |> timeShift(duration: -1s) \
'import "timezone" \
option location = timezone.location(name: "Europe/Berlin") \
from(bucket: "iobroker") \
|> range(start: ' + start + ', stop: ' + stop + ') \
|> filter(fn: (r) => r["_measurement"] == "WP-HZ_EST_Energie") \
|> filter(fn: (r) => r["_field"] == "value") \
|> aggregateWindow(every: ' + every + ', fn: last, timeSrc: "_start") \
|> difference() \
|> sort(columns: ["_time"], desc: true) \
|> sort(columns: ["_time"], desc: false)'
,
graphSettings: {
type: 'bar',
barIsStacked: true,
barStackId: 1,
color: '#FF4800',
legendText: 'HZ',
yAxis_id: 0,
yAxis_show: true,
// yAxis_minimumDigits: 1,
// yAxis_maximumDigits: 9,
yAxis_min: 0,
// yAxis_max: 6000,
datalabel_show: false,
// datalabel_align: 'bottom',
// datalabel_minDigits: 1,
// datalabel_maxDigits: 1,
// datalabel_append: '',
datalabel_color: '#44739e',
// displayOrder: 1
}
} // <= Beim letzten oder einzigen Datenpunkt natürlich kein Komma!
]
// #################### Programmablauf (Erzeugen des JSON) ####################
refreshData();
//Hauptfunktion
function refreshData() {
try {
let graphs = [];
// In dieser Schleife werden alle oben definierten Datenpunkte durchlaufen und die entstehenden JSON-Bausteine der Variable 'graphs' angehangen
for (const datenpunkt of datenpunkte) {
let historyData = getHistoryGraphData(historyInstance, datenpunkt.fluxQuery, datenpunkt.graphSettings);
if (historyData) {
graphs.push(historyData);
}
// Das Result von 'graphs' in den Zieldatenpunkt schreiben
Promise.all(graphs).then((result) => {
if (debug) console.log("[refreshData]: Final JSON " + JSON.stringify({ graphs: result }));
setState(targetDP, JSON.stringify({ graphs: result }), true);
});
}
} catch (err) {
console.error(`[refreshData] error: ${err.message}, stack: ${err.stack}`);
}
}
// Unterfunktion zum Auslesen der Daten aus InfluxDB
function getHistoryGraphData(historyInstance, fluxQuery, graphSettings) {
try {
let graph = Object.assign({ ...graphSettings }, globalGraphSettings);
return new Promise((resolve, reject) => {
// Hier wird für jeden Datenpunkt die Flux-Query ausgeführt und die Rohdaten in das Objekt 'query' geschrieben
sendTo
(historyInstance, 'query',
fluxQuery,
function (query) {
if (debug) console.log('[getHistoryGraphData]: Raw result from fluxQuery (query.result) ' + JSON.stringify(query.result));
// Hier werden aus den Rohdaten der Flux-Query Zeitstempel und Werte extrahiert und in das benötigte Array-Format übergeben
// [{"t": 1640624405000,"y": 1.4536},{"t": 1640649605000,"y": 1.4665}, ...]
graph.data = query.result[0].map(elm => ({
t: (elm.ts !== null && elm.ts !== undefined) ? elm.ts : null,
y: ((elm._value !== null && elm._value !== undefined) ? elm._value : null) / 1000
}));
resolve(graph);
if (debug) console.log("[getHistoryGraphData]: Result after map t: and y: (query.data) " + JSON.stringify(graph.data));
}
);
});
} catch (ex) {
console.error(`[getHistoryGraphData]: error: ${ex.message}, stack: ${ex.stack}`);
}
};
}; // end [refresh]
Ich habe die Vermutung, dass es etwas mit der Zeitzone zusammenhängt.
Die Verbräuche werden aber in der Richtigen Stunde angezeigt.
Ich hoffe jemand hat eine Erklärung für das Phänomen.
Vielen Dank!
Gruß
