Lovelace: mini graph card

template_sensor’s should work just fine, just make sure the result of value_template is a number of some sort and does not include the unit of measurement or any additional characters.

1 Like

Thanks for the quick answer and faboulous card (top one)

1 Like

By the way…worked.
adding | float at end of template did the trick

1 Like

Can you help me about this posting your card? I have the same problem with attributes…

  - platform: template
    sensors:
       temperatura_att_casa:
        value_template: '{{ states.climate.casa.attributes.current_temperature | float}}'

Here you go :slight_smile:

1 Like
  - title: clima
    cards:
    - type: vertical-stack
      cards:
      - type: "custom:mini-graph-card"
        name: Clima - 2h
        unit: o
        icon: mdi:home-thermometer
        hours_to_show: 2
        points_per_hour: 6 
        hour24: true
        lower_bound: 5
        upper_bound: 30
        line_color: 
          - '#ff0000' 
          - '#288014' 
          - '#ebc634' 
          - '#ff0000' 
          - '#288014' 
          - '#ebc634' 
        entities:
          - entity: sensor.temperatura_att_casa
          - entity: sensor.temperatura_att_gio_e_nic
          - entity: sensor.temperatura_att_beatrice
          - entity: sensor.temperatura_att_soggiorno
          - entity: sensor.temperatura_att_alessandro
          - entity: sensor.temperatura_att_Bagno_su
1 Like

Thanks a lot…

I’m looking for a way to plot temperature over several days with the x axis labelled with time. However the data is being collected from a thermostat in a different time zone to the pi and so the standard history graph shows the wrong time. Any suggestions?

Hi there all,
can I ask please to have the code in order to make a graphic like
the pic in the first post … the one of serve with all that dots.
Thanks a lot

I’ve upgraded from 0.98.1 to 0.98.5 and now my minigraph are flat.
I saw the flatness after the reboot (old values from before reboot were still generating right graphs, but since reboot new values grounded to the bottom)

While that’s just a mockup, you should be able to achieve pretty much the same card with this config:

- type: custom:mini-graph-card
  name: SERVER
  icon: mdi:server
  hours_to_show: 2
  points_per_hour: 5
  show:
    points: true
    legend: false 
  entities:
    - entity: sensor.packets
      unit: packets/sec
    - entity: sensor.download
    - entity: sensor.upload

You might have to adjust the colors, depending on your theme/preference.

I’m on 0.98.5 as well and don’t have this issue.
Looks like your database potentially is empty (doesn’t contain any history) or not connected to HA? Does the default graph card display the history as expected?

1 Like

Uhm… no, it’s flat too.
That’s even more strange. I didn’t touch anything in configuration before rebooting, and, as i said, old values pre-reboot were present and displayed.

Maybe the db is corruped?
I’ll give a check

What a great card!!!
Thanks for sharing.

Do you think it could be included in lovelace oficial development? Has developer people contacted you? Or you could make PR to incluse this?

Could be…

Thank you, a simple version of this card has already been made available in core HA, it’s called sensor card.

Thanks a lot @kalkih

I added styling to the icon in my mini-graph card to change the color of the icon based on temperature with the config below (ha-icon section) ( from a post above in this thread). This was working great as the icon would change based on the temp however recently something changed (ver 0.98.5? - only thing I changed) Now the icon only shows as white and this styling isn’t applying. Anyone else run into this or has an idea why this is no longer working?

              - type: custom:mini-graph-card
                      style: |
                        ha-card {
                          background: rgba(0,0,0,0.6);
                          --primary-text-color: rgba(255,255,255,1.0);
                          border-radius: 15px;
                          font-weight: bold;
                          height: auto;
                          box-shadow: '3px 3px rgba(0,0,0,1.0)';
                          overflow: hidden;
                        }
                        ha-icon {
                          color: [[ if(sensor.inside_average_temperature >= 85, "rgb(255, 0, 0);", if(sensor.inside_average_temperature >= 70, "rgb(255, 165, 0);", if(sensor.inside_average_temperature >= 0, "rgb(153, 204, 255);", "rgb(153, 204, 255);"))) ]]
                        }
                      entities:
                        - sensor.inside_average_temperature
                      etc . . . . . .

Inside_temp

Not sure, try updating card-mod maybe.

You could however achieve the same thing with the cards built in icon_adaptive_color option, combined with color_thresholds.

Is there an example of what that would like like? I tried adding the icon_adaptive_color option to my config but it didn’t change the color of the icon. I currently have this in addition to what was shown above in config to vary the color on the line graph based on temp and that is still working correctly

                      entities:
                        - sensor.inside_average_temperature
                      name: Inside Temp
                      icon: mdi:thermometer-lines
                      height: 110
                      show:
                        icon: true
                      color_thresholds:
                        - value: 0
                          color: "#0000FF"
                        - value: 70
                          color: "#FFA500"
                        - value: 85
                          color: "#FF0000"
                      line_width: 4.5
                      font_size: 100

Just adding icon_adaptive_color: true to the show options should do it.

                      entities:
                        - sensor.inside_average_temperature
                      name: Inside Temp
                      icon: mdi:thermometer-lines
                      height: 110
                      show:
                        icon: true
                        icon_adaptive_color: true # Added
                      color_thresholds:
                        - value: 0
                          color: "#0000FF"
                        - value: 70
                          color: "#FFA500"
                        - value: 85
                          color: "#FF0000"
                      line_width: 4.5
                      font_size: 100

That worked. I had the indentation wrong when I first tried it. The example was very helpful.

Thanks!

1 Like