History chart or graph for hardware display in ESPHome

I love using ESPHome and I’ve used it with hardware displays (like the ssd1306). It works very well for multiple pages and using fonts/text. I really want to make a chart of temperature history (like history graph in Home Assistant but on a hardware display), to show like last 12 hours or something. I’ve looked though the docs and it doesn’t seem to be supported. Does anyone know how to go about doing that with ESPHome?

I think you should convert the chart to an image (png or jpeg probably) and then display that.

Yeah, I hadn’t thought of doing it that way. It’d probably work but it feels so low-tech. Wouldn’t you rather have live data from ESPHome into a native chart? Thinking through the chart to image idea, I’m guessing you’re thinking:

  1. taking the data from the ESPHome device out to Home Assistant
  2. building a chart
  3. saving as a jpg or png
  4. then picking that up with ESPHome somehow to display it?

ugh. My brain hurts just thinking about that process… Is that what you were thinking or is there a simpler way?

The live data is already in home assistant, but yeah that is the process.

I know someone did this for an e-ink display, but I can’t find the thread now. Of course e-ink is a different kettle of fish, and quite slow to update.

If I find that thread I’ll post it here.

Of course there are probably libraries for arduino that can draw graphs, but esphome doesn’t really hold data more than ephemerally, ie there is no history, except on the HA machine.

A custom c++ code would be needed in your display lambda.

Just musing here, don’t ask me to implement it!

1 Like

Here you go!

http://users.telenet.be/goosst/epaper/

there is actually a way to store historic values in ESPHome directly:

  1. Create a globals array
  2. In the sensor statement, update that array with an on_value statement
  3. Use the array values to print historic values.

Please be aware that arrays in ESPHome are barely documented… :nerd_face:

Here are some code sniplets that worked for me:

globals array

globals:
   - id: myhistory
     type: float[10]
     restore_value: no
     initial_value: "{'0','1','2','3','4','5','6','7','8','9'}"

sensor statement filling historic values on_value updates

sensor:
  - platform: homeassistant
    id: mysensor
    entity_id: sensor.whatever_sensor_you_have
    internal: true
    on_value:
      then:
        - lambda: |-
            for (int i = 9; i > 0; i--) {
              id(myhistory)[i] = id(myhistory)[i-1];
              }
            id(myhistory)[0] = id(mysensor).state;

This worked well to show some historic values on an M5 stack.

I will try some custom c++ code for some minigraphs next.

2 Likes

Thanks @Fronk this is a really awesome base setup for the chart data!

v2021.10 will include a graph component that can be used for this.

Holy hell!! This is awesome: Display Component — ESPHome

Thanks for the notice @oxan!