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

[valvex]

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.

UPDATE

See this post on how to select different sensors.

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

[Eoin]

@valvex

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

Very cool, thank you!

[maxmaia (Max)]

Excellent feature! Thanks!

[ariel]

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

[valvex]

@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

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

[Eoin]

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!

[Haddood (Sarmad Al Mashta)]

really cool, thanks for sharing

[ppato (Pasquale)]

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

[valvex]

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

[dproffer (David Proffer)]

Nice! thank you!

[Jamie_Pryer (JamieP)]

awesome!! thank you

[Bergerie]

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)

[valvex]

@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:
           -  .........

[Bergerie]

Thanks!

[forschi]

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

[valvex]

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

[forschi]

@valvex

'${vars[0]}'

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

[valvex]

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:

[forschi]

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’.

[AleXSR7001 (AleXSR700)]

This is pretty cool, thank you
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.