Graph Card - Graph from entity attribute

[hanfreakingsolo]

Hi,

I'm using the graph card to display temperature from my thermostat. Problem is, the card can only reference the entity state but I need it's attribute "current_temperature".

CATCH** I know I can create a template sensor to pull the current temp and plug it into the card, but I don't want to do that. I'm trying to learn how to modify custom cards code to allow such actions as variables.

Where I'm stuck: The current graph card section that is relevant is here:

item2:
     card:
        type: "custom:mini-graph-card"
        entities: >
          [[[
            var ent = [];
            ent.push(variables.ulm_card_graph_entity);
            if(variables.ulm_card_graph_entity2 != "")
              ent.push(variables.ulm_card_graph_entity2);
            return ent;
          ]]]

As I understand, this creates an array of entities. In my case, I'm guessing this results in:

     card:
        type: "custom:mini-graph-card"
        entities: 
          - entity: climate.upstairs_thermostat

What I need is:

     card:
        type: "custom:mini-graph-card"
        entities: 
          - entity: climate.upstairs_thermostat
            attribute: current_temperature

How can I achieve this without breaking the other graph functions? My thought is to put an "attribute" variable - if blank, no attribute line is added below the entity. If not blank, "attribute:" gets added below with the variable printed next to it.

[basbruss]

HI @hanfreakingsolo

This is possible but a bit hacky. You will need to define an object within the entity variable. For your provide example it will be something like:

          - type: "custom:button-card"
            template: card_graph
            entity: climate.upstairs_thermostat
            variables:
              ulm_card_graph_entity: >
                [[[
                  let object = {
                    'entity':'climate.upstairs_thermostat',
                    'attribute':'current_temperature'
                  }
                  return object
                ]]]

[hanfreakingsolo]

Thanks, just tried and unfortunately the graph doesn't load. Here's what I entered: *On a side note, where can I learn more about this type of templating? It doesn't match homeassistant docs, and the minimalist-ui documentation doesn't go into this type of detail

      - type: "custom:button-card"
        template: card_graph
        entity: climate.upstairs_thermostat
        variables:
          ulm_card_graph_entity: >
            [[[
              let object = {
                'entity':'climate.upstairs_thermostat',
                'attribute':'current_temperature'
              }
              return object
            ]]]
          ulm_card_graph_color: "var(--google-blue)"
          ulm_card_graph_name: Temperature Livingroom
          ulm_card_graph_color2: "var(--google-green)"
          ulm_card_graph_type: fill
          ulm_card_graph_hours: 24
          ulm_card_graph_group_by: interval

[basbruss]

Thanks, just tried and unfortunately the graph doesn't load.

Oh that's unfortunate. It works for me in a similar setup. I also have tested it with several attributes. Does the dev console in chrome show some error?

*On a side note, where can I learn more about this type of templating? It doesn't match homeassistant docs, and the minimalist-ui documentation doesn't go into this type of detail

It's basically JavaScript templating. I find myself a lot using the Mozilla web development site https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction

[hanfreakingsolo]

Oh that's unfortunate. It works for me in a similar setup. I also have tested it with several attributes. Does the dev console in chrome show some error?

Update - Got it working. Checked chrome console and card-mod wasn't loaded correctly. This being said I'm still looking for a solution to add attributes as a feature in the custom card itself, please help! My goal is to create cards that can do more than reference entity states. I feel this can be done with a nested array, since the custom cards can already easily reference attributes... just need to get it to print in line with the entity object. I don't know enough about JS at the moment to handle nested arrays, especially with the format minimalist is using.

[basbruss]

You can call the state of an attribute in a few different ways.

return entity.attributes.current_temperature

If entity is set within a variable:

return states[variables.ulm_card_variable].attributes.current_temperature

Or when the entity is not set as main entity and in a variable:

return states['climate.livning_room'].attributes.current_temperature

[kdober]

Hi

Could you explain a little bit more how you made this work? I have create template sensors to get the current temperature, but sounds better if I can achive the same result without doing them. Did you just define:

      ulm_card_graph_entity: >
        [[[
          let object = {
            'entity':'climate.upstairs_thermostat',
            'attribute':'current_temperature'
          }
          return object
        ]]]

Or did you made modifications somewhere else? I'm afraid i can currently test this because I'm getting error when creating a card graph like this.

  - type: "custom:button-card"
    template: card_graph         
    variables:
      ulm_card_graph_color: "var(--google-blue)"
      ulm_card_graph_name: "Temperature Living"
      ulm_card_graph_entity: sensor.motion_galeria_air_temperature
      ulm_card_graph_type: fill
      ulm_card_graph_hours: 24
      ulm_card_graph_group_by: interval

getting an error like this. Tried with many entities and it always the same :(

[basbruss]

            entity: climate.upstairs_thermostat

@kdober You are missing this line in your config. The card needs an entity set outside the variables 😉

[kdober]

And that did the trick! thanks a lot!!!!