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

Share your Projects!
#1

Hey everyone,
Here’s a way to dynamically select the number of hours a history graph shows.

This project relies 100% on the config-template-card, so all credits go to the 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.

hours_to_show

hours_to_show2

UPDATE

See this post on how to select different sensors.

sensors
sensors980×448 16.8 KB

UPDATE

See this post on how to dynamically change the card’s title.

UPDATE
See this post on how to show entire calendar days, example yesterday, 3 days ago etc

days_back
days_back969×441 9.66 KB

29 Likes
Interactive Graph Card for lovelace?
Changing the history graph timescale with State Switch and Decluttering Cards
(History) graph in full page
History Graph "Hours to Show" only working in preview?
How can I open a dynamic webpage through HA?
🔹 Auto-entities - Automatically fill cards with entities
History Graph When Entity is Clicked
Inkbird BT thermometer iBBQ with ESP32
How to create a dynamic (Hours to show) Lovelace map card?
Change timescale for 'more detail' view of gauge card?
Help with dynamic template card and input select
Customize lovelace entities history
#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

7 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
#10

Nice! thank you!

#11

awesome!! thank you

#12

Thanks for sharing this. Excellent feature. Just out of interest, can you embed the ‘${vars[0]}’ variable in a history graph title, e.g. title: Rain Last ‘${vars[0]}’ hrs (does not work)

#13

@Bergerie

Change your yaml to the following:

    type: 'custom:config-template-card'
    entities:
      - input_select.hours_to_show
    variables:
      hours: "states['input_select.hours_to_show'].state"
      title: "'Rain Last '+states['input_select.hours_to_show'].state+' Hours'"
    card:
      type: history-graph
      hours_to_show: '${hours}'
      title: '${title}'
      entities:
           -  .........
1 Like
#14

:ok_hand: Thanks!

#15

Hmmm, I have to try this.
Could this be used to dynamically select an area to be used in a “custom:auto-entities”-card?

#16

Well, I am using it in an auto-entities card for the time span, like this:

    type: 'custom:config-template-card'
    entities:
      - input_select.hours_to_show
    variables:
      - 'states[''input_select.hours_to_show''].state'
    card:
      type: 'custom:auto-entities'
      card:
        type: history-graph
        hours_to_show: '${vars[0]}'
      filter:
        include:
          - entity_id: /status/

So, probably, if you make an input_select for the area part, you can modify it to your will

1 Like
#17

It works, but I need to refresh the page to get the area changed after selecting in the input_select

#18 
type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_select.area
  - type: 'custom:config-template-card'
    entities:
      - input_select.area
    variables:
      - 'states[''input_select.area''].state'
    card:
      type: 'custom:auto-entities'
      card:
        type: entities
      filter:
        include:
          - area: '${vars[0]}'

I’ve tried to make a test example, and this is how it works for me:

area

1 Like
#19

Ah, got it working, perfect!
I had my area selection in a separate entity card and I had referenced to that input_select under ‘variable’ but not the entity part of the ‘custom:config-template-card’.

#21

This is pretty cool, thank you :slight_smile:
Is there any way of making it show calendar days rather than hours?

I often find it useful not to see the last 72 hours but rather “today”, “yesterday” and two days ago, so 3 calendar days. This gives a nicer info on repeating events.