Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
1094

You might want to have a custom template sensor with the value set to 0, then use that sensor as a second entity in the card.

1 Like
1095

Ok,don’t worry and take your time.Thanks for your work

1 Like
1096

image

Worked a treat! Great suggestion

2 Likes
1097

Yep, that’s what I do as well: sensor.zero for me.

I love this change in 0.9.0:

  • New aggregate functions first & last #229 (#241)

It’s exactly what I going to attempt to add myself, but here it is! And it works! Without it I was getting weird oscillations in my electricity consumption graph when the data was actually much smoother.

1 Like
1098

I have a mini graph card with multiple energy sensors. The state however only shows the power consumption of one of the devices. Can the state show the aggregated current power consumption?

Current config:

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.fibaro_system_fgwpe_f_wall_plug_gen5_power_3
  - entity: sensor.fibaro_system_fgwpe_f_wall_plug_gen5_power_7
name: Energieverbrauch Wohnzimmer
points_per_hour: 5
line_width: 4
show:
  icon: false
lower_bound: 10
1099

You would have to create a template sensor that calculates the combined usage and then use that sensor in the card, preferably as the initial entry, you could also hide it from the graph.

1 Like
1100

That works fine, thank you. I still find it a bit misleading that by default the value of the first entity is displayed, even when no entity is selected. Would it be possible to add the option to display combined usage without creating a template sensor?

And is it possible to show a timeline like in the stock history graph?

1101

I can’t say, that I’d find this a great idea, sorry! :slight_smile: If there is already a known and working setup, like the template sensor, the code for the mini-graph-card shouldn’t be bloated. This makes the card slower, harder to debug and in the end, it’s simply the same result


Take the button-card for example
 As nice as it is, this card is a “monster”, code and configuration wise. And why? Because some 5% of the users may be using the full feature set. Nope, sorry, I can’t see anything good in this trend, to give every card and component every function
 :open_mouth:

Just my two cents, sorry. :slight_smile:

1102

guys, if i update from 0.8.2 to a higher version, my bars are gone? any idea what could cause it?

          - type: custom:decluttering-card
            template: mini-graph
            variables:
              - entities:
                  - sensor.asuswrt_download
              - name: Download
              - line_color: '#1427ff'
              - graph: bar 
              - extrema: true
              - decimals: 0 
              - font_size: 65

example before / after

EDIT: nm, seems cache issue, 0.9.1 fixed it

1103

Hi.

It seems to be broken on my HA, as the graph does not render any points or data with this option as ‘true’.

HA 0.104.3
Card 0.9.1

align_state: center
entities:
  - entity: sensor.quadro_geral_tensao
    show_state: true
hour24: true
hours_to_show: 24
name: TensĂŁo (24h)
points_per_hour: 12
show: 
  extrema: 'true'
type: 'custom:mini-graph-card'
1104

So, is is possible to show a timeline below the graph, like in the normal history graph? That would super helpful.

1105

It’s fixed in 0.9.1, HACS is wonky with updating cards atm, try reinstalling it from HACS or manually.

No, as mentioned before, the default history card can do this for you.

1106

Upgraded to 0.9.1 and my bar graphs work for the first time, no cache issue anymore.
But I have another problem now, I have a bar graph for my power usage for 7 days but the first bar has a value of zero. If I change it to 8 or 6 days the first bar has still a value of zero. The data is in the database but why won’t it display in the first bar?

1107

Hi could we have possibility to dynamically change time interval of graph I have try with
config-template-card but seem not working

1108

I don’t see why config-template-card wouldn’t work, or if you only need it to change between a few hours_to_show, a couple conditional cards could work I guess?

1109

I had get a quote issue, now it s work great

1 Like
1110

Hi! Thank you for the awesome plugin! These graphs look gorgeous and very easy to setup.
I just have a small doubt.

Is it possible to force them to be square (1:1)?
Here’s my problem:

image

Thanks in advance :ok_hand:

1 Like
1111

Thanks, great setup!
No that’s not possible, the gap between the state and the graph looks vey big in your screenshot, are you on the latest version of the card?

1112

Thanks Karl for the reply!

Yes, I’m using version 0.9.2.
I stil couldn’t figure what was wrong but I did some small adjustments and replaced the graph for a button:

image

It still looks good!

1 Like
1113

Hi,
I’m using the mini-graph-cards in combination with swiper cards to be able to swipe them to the sides and make better use of the available screen space on phones.
But I’m seeing a strange graphic/render glitch when I click on them to show the ‘points’ in the graph, the points do not align with the line graph, instead the graph seems to move to the side


Example of the issue i see: https://youtu.be/3Z3QjD85HqU

card code:

cards:
  - cards:
      - elements:
          - entity: device_tracker.yellowghost
            hold_action: toggle
            state_image:
              01: /local/images/picture_card/location/01.png
              02: /local/images/picture_card/location/02.png
              03: /local/images/picture_card/location/03.png
              04: /local/images/picture_card/location/04.png
              05: /local/images/picture_card/location/05.png
              06: /local/images/picture_card/location/06.png
              07: /local/images/picture_card/location/07.png
              08: /local/images/picture_card/location/08.png
              09: /local/images/picture_card/location/09.png
            style:
              left: 50%
              top: 86%
              width: 90%
            type: image
          - entity: sensor.battery_level
            style:
              left: 8%
              top: 64%
            type: state-icon
          - entity: sensor.battery_level
            label_color: green
            style:
              left: 10%
              top: 74.5%
            type: state-label
          - entity: sensor.battery_state
            state_image:
              Charging: /local/images/picture_card/charging.png
              Full: /local/images/picture_card/1x1_clear.png
              Not Charging: /local/images/picture_card/1x1_clear.png
            style:
              left: 85.5%
              top: 75%
              width: 25%
            type: image
          - entity: sensor.connection_type
            state_image:
              Cellular: /local/images/picture_card/4G.png
              Wi-Fi: /local/images/picture_card/wifi.png
            style:
              left: 94%
              top: 65%
              width: 10%
            type: image
        image: /local/images/picture_card/martijn.png
        style: |
          ha-card {
          border-radius: 10px;
          color: #ffffff;
          font-size: 14px; 
        type: picture-elements
      - elements:
          - entity: device_tracker.rineke
            hold_action: toggle
            state_image:
              01: /local/images/picture_card/location/01.png
              02: /local/images/picture_card/location/02.png
              03: /local/images/picture_card/location/03.png
              04: /local/images/picture_card/location/04.png
              05: /local/images/picture_card/location/05.png
              06: /local/images/picture_card/location/06.png
              07: /local/images/picture_card/location/07.png
              08: /local/images/picture_card/location/08.png
              09: /local/images/picture_card/location/09.png
              home: /local/images/picture_card/location/home.png
              not_home: /local/images/picture_card/location/away.png
            style:
              left: 50%
              top: 86%
              width: 90%
            type: image
          - entity: sensor.battery_level_3
            style:
              left: 8%
              top: 64%
            theme: oxforddark
            type: state-icon
          - entity: sensor.battery_level_3
            style:
              left: 10%
              top: 74.5%
            theme: oxforddark
            type: state-label
          - entity: sensor.battery_state_3
            state_image:
              Charging: /local/images/picture_card/charging.png
              Full: /local/images/picture_card/1x1_clear.png
              Not Charging: /local/images/picture_card/1x1_clear.png
            style:
              left: 85.5%
              top: 75%
              width: 25%
            type: image
          - entity: sensor.connection_type_3
            state_image:
              Cellular: /local/images/picture_card/4G.png
              Wi-Fi: /local/images/picture_card/wifi.png
            style:
              left: 94%
              top: 65%
              width: 10%
            type: image
        image: /local/images/picture_card/rineke.png
        style: |
          ha-card {
          border-radius: 10px;
          color: #ffffff;
          font-size: 14px;     
        type: picture-elements
    type: horizontal-stack
  - color_thresholds:
      - color: '#e8d195'
        value: 0
      - color: '#e8d195'
        value: 100
      - color: '#e895bc'
        value: 150
      - color: '#ff0000'
        value: 200
    entities:
      - entity: sensor.computer_woonkamer_watts
        show:
          fill: true
          points: true
          state: true
    icon: 'mdi:flash'
    icon_adaptive_color: true
    labels: true
    name: Computer Woonkamer
    name_adaptive_color: true
    style: |
      ha-card {
        color: #FFFFFF;
        border-radius: 10px;  
        font-variant: small-caps;
    type: 'custom:mini-graph-card'
  - color_thresholds:
      - color: '#e8d195'
        value: 0
      - color: '#e8d195'
        value: 100
      - color: '#e895bc'
        value: 150
      - color: '#ff0000'
        value: 200
    entities:
      - entity: sensor.computer_zolder_watts
        show:
          animate: true
          fill: true
          points: true
          state: true
    icon: 'mdi:flash'
    icon_adaptive_color: true
    labels: true
    name: Computer Zolder (Red)
    name_adaptive_color: true
    style: |
      ha-card {
        color: #FFFFFF;
        border-radius: 10px;    
        font-variant: small-caps;
    type: 'custom:mini-graph-card'
  - color_thresholds:
      - color: '#e8d195'
        value: 0
      - color: '#e8d195'
        value: 3100
      - color: '#e895bc'
        value: 600
      - color: '#ff0000'
        value: 1000
    entities:
      - entity: sensor.sfeerhaard_watts
        show:
          fill: true
          points: true
          state: true
    icon: 'mdi:flash'
    icon_adaptive_color: true
    labels: true
    name: Sfeerhaard
    name_adaptive_color: true
    style: |
      ha-card {
        color: #FFFFFF;
        border-radius: 10px;  
        font-variant: small-caps;
    type: 'custom:mini-graph-card'
  - color_thresholds:
      - color: '#e8d195'
        value: 5
      - color: '#e8d195'
        value: 10
      - color: '#58b0d5'
        value: 15
      - color: '#ff0000'
        value: 20
    entities:
      - entity: sensor.shelly_dimmer_f3109a_power_0
        show:
          fill: true
          points: false
          state: true
    icon: 'mdi:flash'
    icon_adaptive_color: true
    labels: true
    name: Shelly Dimmer - Hanglamp Woonkamer
    name_adaptive_color: true
    style: |
      ha-card {
        color: #FFFFFF;
        border-radius: 10px;  
        font-variant: small-caps;
    type: 'custom:mini-graph-card'
  - color_thresholds:
      - color: '#e8d195'
        value: 5
      - color: '#e8d195'
        value: 10
      - color: '#58b0d5'
        value: 15
      - color: '#ff0000'
        value: 20
    entities:
      - entity: sensor.shelly_dimmer_f3e9d1_power_0
        show:
          fill: true
          points: false
          state: true
    icon: 'mdi:flash'
    icon_adaptive_color: true
    labels: true
    name: Shelly Dimmer - Eettafel
    name_adaptive_color: true
    style: |
      ha-card {
        color: #FFFFFF;
        border-radius: 10px;    
    type: 'custom:mini-graph-card'
  - color_thresholds:
      - color: '#e8d195'
        value: 10
      - color: '#e8d195'
        value: 20
      - color: '#58b0d5'
        value: 25
      - color: '#ff0000'
        value: 30
    entities:
      - entity: sensor.woonkamer_temperatuur
        show:
          fill: true
          points: false
          state: true
    icon: 'mdi:thermometer'
    icon_adaptive_color: true
    labels: true
    name: Woonkamer Temperatuur
    name_adaptive_color: true
    style: |
      ha-card {
        color: #FFFFFF;
        border-radius: 10px;  
        font-variant: small-caps;
    type: 'custom:mini-graph-card'
  - color_thresholds:
      - color: '#e8d195'
        value: 10
      - color: '#e8d195'
        value: 20
      - color: '#58b0d5'
        value: 25
      - color: '#ff0000'
        value: 30
    entities:
      - entity: sensor.hue_motion_sensor_1_temperature
        show:
          fill: true
          points: false
          state: true
    icon: 'mdi:thermometer'
    icon_adaptive_color: true
    labels: true
    name: Toilet Temperatuuur
    name_adaptive_color: true
    style: |
      ha-card {
        color: #FFFFFF;
        border-radius: 8px;    
    type: 'custom:mini-graph-card'
parameters:
  centeredSlides: true
  coverflowEffect:
    depth: 1000
    modifier: 1
    rotate: -200
    slideShadows: true
    stretch: -200
  effect: coverflow
  grabCursor: true
  slidesPerView: auto
start_card: 1
type: 'custom:swipe-card'

Any idea what could cause this behaviour ?