Charting a graph based on multiple entity attributes

Question to the community:

Is it possible to generate a chart based on an entities attributes where each point on the graph would refer to a specific attribute. Here is an example entity in mind:

The chart in this case would consist of 5 points with values ranging between 0-5. On a daily basis these figures are updated via an API call (UK (and worldwide) Pollen Count using tomorrow.io API). The purpose of this would be to visually see what is happening to the forecasted levels in a graph format.

Any suggestions or pointers I could explore?

Thought I would try visualise it. Here is what I’m thinking if the values were as follows:

Today: 1
Tomorrow: 2
Today + 1: 1
Today +2: 4

When the values are updated, the line and points would shift everything else remains the same.

Kind of this.

image

1 Like

Thanks so much for the suggestion - its a really nice custom card. I’ve been playing and everything works as I want except I need to drop the px of the attribute name to 10px…any suggestions? I have traced it back to this element in the inspector: --paper-font-body1_-_font-size

I’ve tried this:

- type: custom:auto-entities
          card:
            type: custom:bar-card
            title: Weed Pollen Forecast
            direction: up
            columns: 5
            height: 50px
            width: 100%
            min: 0
            max: 5
            positions:
              icon: 'off'
              name: outside
              value: inside
            severity:
              - color: Green
                from: 0
                to: 1
              - color: Orange
                from: 2
                to: 3
              - color: Red
                from: 4
                to: 5
            animation:
              state: 'on'
              speed: 1
            card_mod:
              style: |
                bar-card-backgroundbar {
                  background-color: transparent;
                }
          filter:
            template: |-
              {% set SENSOR = 'sensor.pollen_weed' -%}
              {%- for attr in states[SENSOR].attributes -%}
                {%- set ATTR_VALUE = states[SENSOR].attributes[attr] -%}
                {%- if is_number(ATTR_VALUE) -%}
                {{
                  {
                    'entity': SENSOR,
                    'attribute': attr,
                    'name': attr
                  }
                }},
                {%- endif -%}
              {%- endfor %}
          card_mod:
            style: |-
              ha-card {
                background: none;
                --ha-card-box-shadow: 0px;
              }
              bar-card-name {
                font-size: 10px;
              }

No such luck just yet…I have the forecasts hidden and expand to show them. This works well bar the wrapping of text.

I’m almost certain its either the formatting or element I have chosen to edit.

Misplaced.
This is a style for bar-card, not auto-entities.
As for particular styles - all card-mod issues are better to discuss in a corresponding card-mod or bar-card threads.

1 Like

Your advise has resolved my issue, I just moved the styling higher up so it interacts with the right card. Thanks for the advise and suggestion!

1 Like