Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
954

Hello,

I have a small problem with the binary_sensor / switch.

        entities:
          - entity: sensor.salon_1
            name: Température
          - entity: binary_sensor.rad_salon
            name: Etat radiateur
            color: rgba(255,255,255,.25)
            y_axis: secondary
            aggregate_func: min
            smoothing: false 
            show_fill: true
            show_state: true
            show_line: false
            show_points: false
        state_map:
          - value: "off"
            label: "Eteint"
          - value: "on"
            label: "Chauffe"

No matter what I do, I always have NaN for the binary_sensor. Does someone have the same problem ?

image
image1014×136 20.7 KB

image
image1014×196 12 KB

Thanks

955

Should the state map be associated with a graph axis perhaps?

I notice a large number of warnings in the debug console that “x value not found in state map” because I have an analogue and boolean entity in the one graph and it is trying to convert the analogue values using the state map.

956

I have this set to 60, so every minute. I would have thought that is plenty…

957

Yeah that should be more than enough. When you hover the mouse over the graph the points should show and the graph value should change to the hovered point value.

958

Yeah, I don’t get any sort of value pop-up at all

959

It’s not a po-up. The main value sows the reading.

960

Oh right… now I see what the problem was, I have show_state: false because I have the current value elsewhere on the screen. In order to have that feature I need it set to true. I was hoping for a pop-up so I don’t have to have the current value above the graph…

image
image471×691 102 KB

Any idea how to sort out my styling issue?

961

That would be a feature request then.

As for the style, did you try this?

            style:
              top: 15%
              left: 50%
              width: 75%
              ha-card {
                box-shadow: none;
                --ha-card-background: 'rgba(0, 0, 0, 0)';
              }
962

I tried that, didn’t work unfortunately

963

Post the full config for the card.

964 
      - type: picture-elements
        image: /local/images/fronius_symo_front.png
        elements:
          - type: state-label
            entity: sensor.fronius_ac_power
            style:
              top: 72%
              left: 29%
              font-family: Arial
              font-weight: bold
              color: black
          - type: custom:text-element
            text: "Energy Generated Today"
            style:
              top: 55%
              left: 40%
              font-family: Arial
              font-weight: bold
              color: black
          - type: state-label
            entity: sensor.fronius_day_energy
            style:
              top: 55%
              left: 71%
              font-family: Arial
              font-weight: bold
              color: black
          - type: custom:text-element
            text: "Energy Generated This Year"
            style:
              top: 58%
              left: 38%
              font-family: Arial
              font-weight: bold
              color: black
          - type: state-label
            entity: sensor.fronius_year_energy
            style:
              top: 58%
              left: 71%
              font-family: Arial
              font-weight: bold
              color: black
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.fronius_ac_power
            show:
              state: false
              labels: true
            lower_bound: 0
            upper_bound: 5000
            points_per_hour: 60
            height: 150
            style:
              top: 15%
              left: 50%
              width: 75%
965

Ah right. You are using the style option of the picture elements card. Where as I was using the style option of card-mod.

The style option in the picture-elements card uses yaml. Card-mod does not.

Try it like this:

            style:
              top: 15%
              left: 50%
              width: 75%
              box-shadow: none
              ha-card-background: 'rgba(0, 0, 0, 0)';
966

I’ve got the mini-graph card sitting ‘inside’ the picture-elements card. I tried your above version but that didn’t work either :smirk:

967

Thanks :+1:

It will look like that if HA isn’t connected to the history database, and the card can’t pull any history data.
Try restarting HA and make sure the recorder is setup and working correctly, check if the standard history-graph works.

I think you might be loading an older version of the card from cache.
Try clearing cache and if using HACS, check this:

Yeah, or even mapped to an entity, not really sure how to best solve it.
The warnings are nothing to worry about though, won’t break anything, just kinda annoying :laughing:

2 Likes
968

@kalkih I am using the DSMR integration which gives me amongst others an hourly gas consumption sensor.

Now, I would love to show the daily gas consumption with Mini Graph Card of the last week. So, I was thinking of using something like this:

group_by: date
aggregate_func: max
hours_to_show: 168

max however returns the highest gas consumption measured during the day. There’s also a min and an avg. Is there a way to use sum or something like that? Or do I actually need to calculate the sum with a separate sensor?

969

Yes to separate sensor. Use the utility meter to create a daily consumption sensor.

2 Likes
970

Oh, wow. I didn’t know about that integration. Thanks for the URL. Will definitely look into that.

971

Yeah it’s a very under rated integration.

1 Like
972

I was wondering, is it possible to add a ‘goldilocks’ zone on the graphs (e.g. the famous humidity zone of 40-60% or a temperature zone that would be OK for the living room). I guess I could make static sensors with these values but that’s not very flexible.

973

Or just use color thresholds to show when the value is in “the zone”.