Teil 5: Verwenden der SQL-Daten in Diagrammen bzw. im VIS-2
Der Hauptzweck der Datenhistorisierung liegt natürlich in der grafischen bzw. tabellarischen Darstellung, um daraus mögliche Entscheidungen abzuleiten, etwa wo setzte ich beim Börsenstrompreis mein Bezugslimit.
Eine einfache Möglichkeit zur grafischen Darstellung bieten die DIAGRAMME. Man wählt als Datenquellen die gewünschten SQL-Historisierungspunkte, stellt noch ein paar Dinge ein und … fertig.
[image: 1770367644381-664a0f95-2fc3-48ae-babe-1a8ffafab1ad-image.png]
[EDIT 20.7.2026] Um das Ganze im VIS-2 anzuzeigen, nimmt man dort das Widget „E-Charts“ und gibt in der Gruppe "Allgemein" das E-Charts-Preset an.
[image: 1784532096704-4c4eaf40-b53c-4412-8d7c-1f0dc266d856-image.jpeg]
So kann man sich ein VIS-2-View nur für Diagramme samt Zeitauswahl bauen, bei der die gewünschte Art des Diagrammes angetippt wird. Die verschiedenen E-Charts-Presets legt man genau übereinander und zeigt das Aktuelle mittels Sichtbarkeit an. Bei mir liegen 11 Presets übereinander.
[image: 1784532198099-6a004fbc-9dfd-4df4-a0dc-f04cece84e5f-image.jpeg]
[image: 1784533285664-7475f08e-d4a0-4048-b71a-d3cf1f2884f9-image.jpeg]
Zur Auswahlsteuerung legt man die Datenpunkte Diagrammart, Range, Zeitformat und ZeitformatJN an: Spoiler
{
"0_userdata.0.Diagrammdaten.Diagrammart": {
"common": {
"name": "Diagrammart",
"desc": "Manuell erzeugt",
"role": "state",
"type": "string",
"read": true,
"write": true,
"states": {
"PvErzeugung": "PvErzeugung",
"Hausakku": "Hausakku",
"eAuto": "eAuto",
"Stromfluss": "Stromfluss",
"Stromueberschuss": "Stromueberschuss",
"Stromeinkauf": "Stromeinkauf",
"StrompreisJetzt": "StrompreisJetzt",
"Stromverbrauch": "Stromverbrauch",
"Ofenbetriebszeiten": "Ofenbetriebszeiten",
"Temperaturen": "Temperaturen",
"Regenmenge": "Regenmenge"
}
},
"type": "state",
"native": {},
"_id": "0_userdata.0.Diagrammdaten.Diagrammart",
"acl": {
"object": 1636,
"state": 1636,
"owner": "system.user.admin",
"ownerGroup": "system.group.administrator"
},
"from": "system.adapter.admin.0",
"user": "system.user.admin",
"ts": 1781330557097,
"val": "Stromueberschuss",
"ack": false
},
{
"0_userdata.0.Diagrammdaten.Range": {
"common": {
"name": "Range",
"desc": "Manuell erzeugt",
"role": "state",
"type": "string",
"read": true,
"write": true,
"states": {
"12 Std": "12 Std",
"1 Tag": "1 Tag",
"1 Woche": "1 Woche",
"2 Wochen": "2 Wochen",
"1 Monat": "1 Monat",
"2 Monate": "2 Monate",
"3 Monate": "3 Monate",
"6 Monate": "6 Monate",
"1 Jahr": "1 Jahr",
"2 Jahre": "2 Jahre"
}
},
"type": "state",
"native": {},
"_id": "0_userdata.0.Diagrammdaten.Range",
"acl": {
"object": 1636,
"state": 1636,
"owner": "system.user.admin",
"ownerGroup": "system.group.administrator"
},
"from": "system.adapter.admin.0",
"user": "system.user.admin",
"ts": 1781330996816,
"val": "1 Monat",
"ack": false
}
}
Mittels Trigger wird die Auswahl gesteuert:
Spoiler
const idDiagramm = '0_userdata.0.Diagrammdaten.Diagrammart';
const idRange = '0_userdata.0.Diagrammdaten.Range';
const idTimeformat = '0_userdata.0.Diagrammdaten.Zeitformat';
const idTimeformatCheck = '0_userdata.0.Diagrammdaten.ZeitformatJN';
const strDiagrammPath = 'echarts.0.';
on({id: idDiagramm, change: "any"}, function (obj) {
let strDiagramm = obj.state.val;
let iRange;
if (strDiagramm != null && strDiagramm != undefined && strDiagramm !=''){
let echartsDP = strDiagrammPath + getState(idDiagramm).val;
if (existsObject(idDiagramm) && echartsDP !=''){
const eChartobj = getObject(echartsDP);
const ecRange = String(TimeRange(String(eChartobj.native.data.range)));
const ecTimeFormat = 'HH.MM dd.mm';
const ectimeFormatCustom = true;
setStateAsync(idRange,ecRange,false);
setStateAsync(idTimeformatCheck,ectimeFormatCustom,false)
setStateAsync(idTimeformat,ecTimeFormat,false);
setObject(getState(idDiagramm).val,eChartobj);
}else{
log('Angegebener eChart-DP ' + idDiagramm + 'existiert nicht!','warn');
}
}
switch (strDiagramm) {
case ("PvErzeugung"): iRange = "1 Woche"; break;
case ("Hausakku"): iRange = "2 Wochen"; break;
case ("eAuto"): iRange = "2 Wochen"; break;
case ("Stromfluss"): iRange = "1 Woche"; break;
case ("Stromueberschuss"): iRange = "1 Monat"; break;
case ("Stromeinkauf"): iRange = "1 Monat"; break;
case ("StrompreisJetzt"): iRange = "2 Wochen"; break;
case ("Stromverbrauch"): iRange = "2 Wochen"; break;
case ("Ofenbetriebszeiten"): iRange = "1 Woche"; break;
case ("Temperaturen"): iRange = "2 Wochen"; break;
case ("Regenmenge"): iRange = "6 Monate"; break;
default: iRange = "1 Woche"; break;
}
setState(idRange, iRange ,false);
/* "12 Std" "1 Tag" "1 Woche" "2 Wochen" "1 Monat" "2 Monate" "3 Monate" "6 Monate" "1 Jahr" "2 Jahre" */
});
on({id: idRange, change: "any"}, function (obj) {
let value = obj.state.val;
if (value!=null &&value!=undefined && value!=''){
let echartsDP = strDiagrammPath + getState(idDiagramm).val;
if (existsObject(echartsDP)){
let objDP = getObject(echartsDP);
objDP.native.data.range = TimeRange(value);
setObject(echartsDP,objDP);
}else{
log('eCharts-DP ' + echartsDP + ' ist nicht vorhanden! Eingeben!','warn');
}
}
});
function TimeRange (vRange) {
let iVal;
switch (vRange) {
case ("1 Tag"): iVal = 1440; break;
case ("1 Woche"): iVal = 10080; break;
case ("2 Wochen"): iVal = 20160; break;
case ("1 Monat"): iVal = 40320; break;
case ("2 Monate"): iVal = 86400; break;
case ("3 Monate"): iVal = 129600; break;
case ("6 Monate"): iVal = 259200; break;
case ("1 Jahr"): iVal = 518400; break;
case ("2 Jahre"): iVal = 1036800; break;
default: iVal = 720; break;
}
return Number(iVal);
}
Die tabellarischen Darstellung im VIS-2 geschieht mit dem Widget „Basic Table“, bei dem man einen separaten Datenpunkt (Table Object ID) mit JSON-Daten befüllt. Dieses Beispiel zeigt Tages-, Monats- und Jahreswerte einer Strombilanz untereinander.
[image: 1770367711812-00a9e22f-d74a-43e7-982f-0e35c37db84a-image.png]
Die Datenpunkte dazu:
{
"alias.0.Diagrammdaten.StrombilanzJahre": {
"common": {
"name": "StrombilanzJahre",
"desc": "Manuell erzeugt",
"role": "state",
"type": "json",
"read": true,
"write": true,
"alias": {
"id": "javascript.0.variables.j006"
}
},
"type": "state",
"native": {},
"_id": "alias.0.Diagrammdaten.StrombilanzJahre",
"acl": {
"object": 1636,
"state": 1636,
"owner": "system.user.admin",
"ownerGroup": "system.group.administrator"
},
"val": "",
"from": "system.adapter.admin.0",
"user": "system.user.admin",
"ts": 1768340995710,
"ack": false
},
"alias.0.Diagrammdaten.StrombilanzMonate": {
"common": {
"name": "StrombilanzMonate",
"desc": "Manuell erzeugt",
"role": "state",
"type": "json",
"read": true,
"write": true,
"alias": {
"id": "javascript.0.variables.j005"
}
},
"type": "state",
"native": {},
"_id": "alias.0.Diagrammdaten.StrombilanzMonate",
"acl": {
"object": 1636,
"state": 1636,
"owner": "system.user.admin",
"ownerGroup": "system.group.administrator"
},
"val": "",
"from": "system.adapter.admin.0",
"user": "system.user.admin",
"ts": 1768340995710,
"ack": false
},
"alias.0.Diagrammdaten.StrombilanzTage": {
"common": {
"name": "StrombilanzTage",
"desc": "Manuell erzeugt",
"role": "state",
"type": "json",
"read": true,
"write": true,
"alias": {
"id": "javascript.0.variables.j004"
}
},
"type": "state",
"native": {},
"_id": "alias.0.Diagrammdaten.StrombilanzTage",
"acl": {
"object": 1636,
"state": 1636,
"owner": "system.user.admin",
"ownerGroup": "system.group.administrator"
},
"val": "",
"from": "system.adapter.admin.0",
"user": "system.user.admin",
"ts": 1768340995710,
"ack": false
}
}
Mit einem Javascript werden die Datenpunkte zeitgesteuert befüllt.
strSQL = "SELECT DATE_FORMAT (tag, '%Y-%m-%d') AS Tag, " +
"ROUND(SUM(pv) / 1000.0,1) AS PV, " +
"ROUND(AVG(akku)) AS Hausakku, " +
"ROUND(SUM(haus) / 1000.0,1) AS Haus, " +
"ROUND(SUM(eauto) / 1000.0,1) AS eAuto, " +
"ROUND(SUM(gen) / 1000.0,1) AS Gen, " +
"ROUND(SUM(nots) / 1000.0,1) AS Nots, " +
"ROUND(SUM(gesamt) / 1000.0,1) AS gesamt, " +
"ROUND(COUNT(autark)) AS autark " +
"FROM iobroker.tagesstatistik " +
"GROUP BY DATE_FORMAT (tag, '%Y-%m-%d') " +
"ORDER BY DATE_FORMAT (tag, '%Y-%m-%d') desc;";
sendTo('sql.0', 'query', strSQL, function (result) {
if (result.error) {
console.error(result.error);
} else {
MyTrigger (idStrombilanzTage,JSON.stringify(result.result));
}
});
--------------------------- Voila , das war die ganze Zauberei ---------------------------
Anregungen, Fragen etc. bitte hier anhängen.
