Dynamically select the number of hours or sensors to show on a history graph or mini graph card

Share your Projects!
#1

Hey everyone,
I wanted to find a solution to dynamically select the number of hours a history graph shows.
I’ve searched the forum but did not find much info.
So I am sharing what i finally did just in case anyone else needs to do the same.

This project relies 100% on the config-template-card, so all credits go the respected developer.

First, we create an input_select entity.

input_select:
  hours_to_show:
    name: Hours to show
    options:
      - 24
      - 12
      - 4
      - 2
      - 48
      - 72      
    initial: 24

Then the code for creating our card is the following:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
    entities:
      - input_select.hours_to_show
    card:
      type: history-graph
      entities:
        - entity: sensor.watts
          name: Watts
      hours_to_show: '${vars[0]}'
      refresh_interval: 0

The whole idea is that we use the ‘${vars[0]}’ in the hours_to_show field.

watts watts2 watts3

UPDATE

See this post on how to select different sensors.

https://community.home-assistant.io/t/dynamically-select-the-number-of-hours-to-show-on-a-history-graph/193510/5?u=valvex

19 Likes
How can I open a dynamic webpage through HA?
Interactive Graph Card for lovelace?
Customize lovelace entities history
History Graph "Hours to Show" only working in preview?
#2

Very cool, thank you!

#3

Excellent feature! Thanks!

#4

It’s a great idea. I wish though we had support for this in the History Graph or in the excellent mini-graph custom card.
Beyond the time span configuration, it would also be great to be able to have a list of sensors to choose from

#5

@ariel Well it is not that hard to implement, using the initial idea.
You can create a new input select with the sensors you want to show, and then use something like the following:

input_select:
  sensors_to_show:
    name: Sensors To Show
    options:
      - sensor.home_temperature
      - sensor.watts
      - sensor.home_humidity

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
  - type: entities
    entities:
      - entity: input_select.sensors_to_show
        name: Select Sensor     
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.sensors_to_show''].state'      
    entities:
      - input_select.hours_to_show
      - input_select.sensors_to_show
    card:
      type: history-graph
      entities:
        - entity: '${vars[1]}'
          name: '${vars[1]}'
      hours_to_show: '${vars[0]}'
      refresh_interval: 0

sensors
sensors980×448 16.8 KB

Also, since you mentioned mini graph card, you can also implement this with mini graph card.
For example,

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.hours_to_show
        name: Select Hours to Show
  - type: entities
    entities:
      - entity: input_select.sensors_to_show
        name: Select Sensor     
  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.sensors_to_show''].state'      
    entities:
      - input_select.hours_to_show
      - input_select.sensors_to_show
    card:
      type: custom:mini-graph-card
      entities:
        - entity: '${vars[1]}'
          name: '${vars[1]}'
      hours_to_show: '${vars[0]}'
      points_per_hour: 15
      line_width: 3 
      show:
        points: hover
        labels: true
        average: true
        extrema: true

minigraph
minigraph480×528 19.3 KB

3 Likes
#6

Very good suggestion. I had implemented the time selector on a page with multiple mini graph cards, I hadn’t even considered also having a selector for data point. Implementing this would allow me to remove several graphs from the page!

1 Like
#7

really cool, thanks for sharing

#8

Probably I’m missing something. This perfectly works, but do I really need to refresh the browser page to see the timescale changing?

#9

Personally I do not have to reload at all. The graphs update whenever i choose a different time span.

However, make sure that you have included the entities: part in your card configuration, as It seems that it’s needed in order for the config-template-card to watch for changes on the input_select and update accordingly.

  - type: 'custom:config-template-card'
    variables:
      - 'states[''input_select.hours_to_show''].state'
      - 'states[''input_select.sensors_to_show''].state'      
    entities:
      - input_select.hours_to_show
      - input_select.sensors_to_show