Dynamically set hours_to_show in mini-graph-card based on time since a specific date

Configuration Frontend
1

I’m trying to create a graph using the mini-graph-card, where the time range (hours_to_show) dynamically updates based on the time elapsed since a specific date. Specifically, I want to:

  1. Display data from a sensor.
  2. Have the graph automatically expand its time range as time passes.
  3. Always show all data from September 10, 2024, to the present.

I’ve tried various approaches using template sensors and history_stats, but I’m encountering configuration errors, or the graph isn’t updating as expected.

Here’s my current mini-graph-card configuration:

type: custom:mini-graph-card
entities:
  - sensor.smart_update
name: Updated Calculation
hours_to_show: '{{ ((now() - (strptime("2024-09-10 00:00:00", "%Y-%m-%d %H:%M:%S").replace(tzinfo=now().tzinfo))).total_seconds() / 3600) | round(0) }}'
line_color: '#000dff'
line_width: 3
font_size: 60
height: 120

The calculation works in the templating section of the developer tools, but the graph in the frontend doesn’t display anything. Any help would be greatly appreciated! :slight_smile:

2

Because mini-graph-card does not support templating.
Use appropriate cards supporting templates like config-template-card.

1 Like
3

Thanks a lot! I just tried it out, and it works like a charm. Here’s my updated code for anyone encountering a similar problem:

type: custom:config-template-card
entities:
  - sensor.hours_since_specific_date
card:
  type: custom:mini-graph-card
  entities:
    - sensor.smart_update
  name: Update Calculation
  hours_to_show: ${ states['sensor.hours_since_specific_date'].state }

I also created a sensor in my config and moved the calculation there to make it universally accessible.

4

Your solution will not show updates real-time, only after F5.

1 Like
5

Hmm, I hadn’t considered that. The sensor only updates once a day, so it shouldn’t be a problem.

But just out of curiosity, could you guide me in the right direction for implementing real-time updates? I’m quite new to templating and my knowledge on the inner workings of it is still limited at this point.

6

1st, question related to config-template-card (CTC) should be discussed in the dedicated main thread.
In short:

  1. Declare all sensors used in mini-graph-card (MGC) as “monitored by CTC” - add them to the “entities” option. Then CTC will update the whole inner card when any of these “monitored” entities changes.
  2. “Update of inner cards” = full redraw, it may causes undesired flickering, slowing down etc.
  3. Placing a card into CTC creates additional layer between the inner card and HA → slowing down, inability to get changes real-time etc. I would not recommend placing any graph card into CTC (although myself do it).