History graph with more options

I am using the history graph card and am generally happy with it.

However, I also would like to plot radiator thermostat data vs time. This typically is the set and the measured temperature (two curves in e.g. °C), which in principle is not a problem. However, my data are from a MQTT broker, and I only get an event when the temperature changes. So what is needed for the set temperature is a “step curve” (it changes rarely), and the line has to start at the last Y value before the plotted time frame (otherwise there is no line until the set temperature is changed for the first time in the plotted interval). Ideally, the line also would be extended horizontally from the last data point to the current time.

The second challenge is that I’d like to have the valve position in the same graph. This requires a different scale (0 to 100%), hence a second Y axis. To distinguish it from the temperature, it would be nice to have not just lines but the area below the line filled in some color.

I tried InfluxDB and Grafana, which worked mostly, but these are a bit “monsters”, and the Grafana configuration was complicated and inconsistent (I exported JSON definitions, and upon re-import and adaptation for another device they sometimes did not work).

Next, I wrote a Python program that connects to InfluxDB and generates SVG content (using Matplotlib and YAML-defined content) that is directly served to the browser (no intermediate files). The idea would be to run this code in a separate docker container using gunicorn, and have webpage cards in the HomeAssistant dashboard that get the content from this server. This will work fine, but will not dynamically update and also is rather complicated and a bit slow.

Ideally, the plotting would be done “in the browser”, with data served from HomeAssistant, like in the history card. I also would be willing to do some coding to adapt the card, for example to have lines extended (set temperature).

However, first I’d like to learn whether there isn’t already a more customizable history graph card. I am not looking for something fancy (e.g. as grafana can do), but there should be 1) double Y axis capabilities, 2) a possibility to have a “step” plot.

To illustrate what I mean: here is the version of a SVG plot produced using matplotlib, with data retrieved from InfluxDB2. The code is not finished and there are many details I’d change/add if I’d go for this solution, but here you see the “steps” and that the blue line “enters” from the left (my code retrieves the last value just outside the plotted interval).

thermostat

So my question is: does such a configurable history-graph card already exist that I could use directly or adapt?

Apexcharts.

1 Like