Just for fun (yeah, I know, I have a strange notion of fun), I tried to use ApexCharts-Card directly with influxdb. That card allows to provide javascript code as data source.
It doesn’t work out-of-the box, because of async issues, but I managed to make it work without going through the recorder at all after that PR CHG: make datagenerator async by koying · Pull Request #157 · RomRider/apexcharts-card (github.com) EDIT: The change is in release 1.9.0
type: 'custom:apexcharts-card'
graph_span: 36h
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:
- entity: sensor.hue_sensor1_temperature
data_generator: |
console.log(start);
var params = new URLSearchParams({
pretty: true,
db: "home_assistant",
q: "SELECT mean(\"value\") FROM \"°C\" WHERE (\"entity_id\" = 'mijia_out_temp' OR \"entity_id\" = 'exterieur_temperature') AND time >= '" + start.toISOString() + "' AND time <= '" + end.toISOString() + "' GROUP BY time(10m) fill(none)"
});
var myInit = { method: 'GET',
headers: {
'Accept': 'application/json',
},
mode: 'cors',
cache: 'default'
};
const request = async () => {
var result = [];
const response = await fetch('http://influxdb.lan:8086/query?' + params, myInit)
const json = await response.json();
if (json["results"] && json["results"][0] && json["results"][0]["series"] && json["results"][0]["series"][0] && json["results"][0]["series"][0]["values"]) {
for(var val of json["results"][0]["series"][0]["values"]) {
result.push([new Date(val[0]), val[1]]);
}
} else {
console.log("error: " + json)
}
return result;
}
return request();
Totally proof-of-concrpt 