Lovelace: mini graph card

Hey, could you please paste your card config here?
Also could you check http://[HA-IP]:[PORT]/developer-tools/state, look for your binary_sensor and look what state it reports, could you please also click on the binary_sensor name there and take a screenshot of the more-info popup?

It’s also a bit easier to debug if you in your mini-graph-card config set

show:
  labels: true
  labels_secondary: true

There’s a sponsor button you can click at the top of the page on my other custom card repository mini-media-player, it’s appreciated but absolutely optional, I’ll try my best to help you regardless. :smiley:

entities:
  - entity: sensor.th16_si7021_temperature
  - aggregate_func: min
    color: white
    entity: binary_sensor.lights_on
    show_line: false
    show_points: false
    smoothing: false
    y_axis: secondary
show:
  labels: true
  labels_secondary: true
line_width: 2
name: Temperature
points_per_hour: 6
state_map:
  - label: 'ON'
    value: '1'
  - label: 'OFF'
    value: '0'
type: 'custom:mini-graph-card'

binary_sensor.lights_on reads as on and off

05%20PM
56%20PM

Thanks, I see two issues.

  1. Your state map should most likely be specified like this:
state_map:
  - value: "off"
    label: "Off"
  - value: "on"
    label: "On"
  1. Your state_map labels doesn’t seem to show up correctly, which makes me believe your browser is loading the old version of the card, if you’ve installed it through HACS please check this issue

Or if you’ve installed it manually try clearing the browser cache.

If you’ve done all the above and it still doesn’t work, the card might have cached the graph data with the old invalid state_map, you can clear this by setting the card option hours_to_show to something different than the current value, so changing it to 24.1 (24 is default) and then refreshing the HA tab with the card on should clear it, you can then change it back once again.

1 Like

Unfortunately I’m getting the same states of 0 and 0.
The whole reason I created a binary_sensor template was because when I used the entity: switch.lights I got the same errors.
Even now, when I use the fixed code above with the switch.lights, I get the NaN and no graphing data.

I’ve cleared the cache, set the hours to 48, and tried a different browser.

Did you try the HACS “fix” I linked to, or did you install the card manually?
If you installed it manually, try re-downloading the card maybe?
I don’t see any other reasons why it wouldn’t work unless you’re still loading an older version of the card.

I checked the raw config and the resource is linked correctly. I did get the card from HACS so I’ll redownload the latest .js from your git when I get home and try that out

1 Like

I’m able to login from mobile and I upgraded both HACS and Mini Graph Card.

I’m unable to modify the code but it appears from a test card that it is working. Thanks for your help!

Now just gotta ditch these Kasa hs105 switches and hook up more Sonoffs that are more reliable.

1 Like

Hi, first of all thanks for this great card.
I think i am missing something in the collor thresholds:

2019-10-24%2009_40_29-Home%20Assistant
2019-10-24%2009_46_42-Home%20Assistant

The graph should be green right?
value is between 16 and 22.

Sensor:

          - type: custom:decluttering-card
            template: standard_graph_card
            variables:
              - entity: sensor.badkamer_multi_sensor
              - name: Badkamer
              - height: 74
              - line_width: 3
              - hours_to_show: 48
              - align_state: center
              - value_threshold_high: 40
              - value_threshold_normal: 22
              - value_threshold_low: 16

Decluttering template:

  default:
    - unit_of_measurement: ''
    - more_info: true
    - group: false
    - hours_to_show: 24
    - points_per_hour: 0.5
    - group_by: interval
    - height: 150
    - line_width: 5
    - line_color: "#3498db"
    - decimals: 2
    - align_state: left
    - show-name: true
    - show-icon: true
    - show-state: true
    - show-graph: bar
    - show-fill: true
    - show-points: hover
    - show-legend: true
    - show-extrema: false
    - show-labels: hover
    - color_threshold_low: "#3498db"
    - color_threshold_normal: "#1db954"
    - color_threshold_high: "#e74c3c"
  card:
    type: custom:mini-graph-card
    style: |
      ha-card {
        border-radius: 10px;
        border: solid 1px rgba(100,100,100,0.3)
      }
    entities: 
      - '[[entity]]'
    name: '[[name]]'
    icon: '[[icon]]'
    unit: '[[unit_of_measurement]]'
    more_info: '[[more_info]]'
    group: '[[group]]'
    hours_to_show: '[[hours_to_show]]'
    aggregate_func: '[[aggregate_func]]'
    points_per_hour: '[[points_per_hour]]'
    group_by: '[[group_by]]'
    update_interval: 60
    show:
      name: '[[show-name]]'
      icon: '[[show-icon]]'
      state: '[[show-state]'
      graph: '[[show-graph]]'
      fill: '[[show-fill]]'
      points: '[[show-points]]'
      legend: '[[show-legend]]'
      extrema: '[[show-extrema]]'
      labels: '[[show-labels]]'
      name_adaptive_color: false
      icon_adaptive_color: false
    animate: false
    height: '[[height]]'
    line_width: '[[line_width]]'
    line_color: '[[line_color]]'
    color_thresholds:
      - value: '[[value_threshold_low]]'
        color: '[[color_threshold_low]]'
      - value: '[[value_threshold_normal]]'
        color: '[[color_threshold_normal]]'
      - value: '[[value_threshold_high]]'
        color: '[[color_threshold_high]]'
    color_thresholds_transition: hard
    decimals: '[[decimals]]'
    hour24: true
    font_size: 65
    align_header: default
    align_icon: right
    align_state: '[[align_state]]'
    smoothing: true

it may be that you need to set the colors in variables:

variables:
              - entity: sensor.badkamer_multi_sensor
              - name: Badkamer
              - height: 74
              - line_width: 3
              - hours_to_show: 48
              - align_state: center
              - value_threshold_high: 40
              - value_threshold_normal: 22
              - value_threshold_low: 16
              - color_threshold_low: "#3498db"
              - color_threshold_normal: "#1db954"
              - color_threshold_high: "#e74c3c"

Tried to add de colors in the variables.
Unfortunately that didn’t work.

default:
    - unit_of_measurement: ''
    - more_info: true
    - group: false
    - hours_to_show: 24
    - points_per_hour: 0.5
    - group_by: interval
    - height: 150
    - line_width: 5
    - line_color: "#3498db"
    - decimals: 2
    - align_state: left
    - show-name: true
    - show-icon: true
    - show-state: true
    - show-graph: bar
    - show-fill: true
    - show-points: hover
    - show-legend: true
    - show-extrema: false
    - show-labels: hover
    - color_threshold_low: "#3498db"
    - color_threshold_normal: "#1db954"
    - color_threshold_high: "#e74c3c"

did you trie to delete them from there?

Check (particularly if you use HACS) that you have the BUNDLE version of the js. I had this exact problem for MONTHS and eventually (just last week) worked out I was running the original one.

In the directory of resources, if you have the normal as well as the bundle version of the card, delete the normal one (both files) and edit the resources section of lovelace for the new card. That fixed mine immediately.

right,i had forgotten that too

Just checked the files.
And im using the bundle.js version already.

Let me try to reinstall the bundle just to be sure.

Just reinstalled the card via HACS.
bundle.js shows in the installation folder.

Cleared cache but the results are the same.

Also tried the solution from @pollinolas by removing the color_thresholds from the decluttering card and added them directly to the sensor.

Still the same results.

ha
Is it possible to add a bottom line with hours?

Hi @kalkih,
Any luck with the night_time sensor? :slight_smile:

I have just created my template to display time as H/M/S rather than a decimal and have used the below in my config:

  #Code to track time at work
  - platform: history_stats
    name: Time at Work
    entity_id: device_tracker.matts_iphone
    state: 'Work'
    type: time
    start: '{{ as_timestamp( now().replace(hour=0).replace(minute=0).replace(second=0) ) - now().weekday() * 86400 }}'
    end: '{{ now() }}'

and added the below to my uilovelace.


#Showing time at work this week
    - type: custom:mini-graph-card
      name: TIME AT WORK
      icon: mdi:office-building
      entities: 
      - sensor.time_at_work_rounded
      - sensor.time_at_work

      
      hours_to_show: 189
      color_thresholds:
        - value: 20
          color: "#cae2fe"
        - value: 30
          color: "#cafed2"
      color_thresholds_transition: hard   

the two lines are displayed and exit the graph close to each other so the template is working, but it displays NaN in the top left?

image

Any thoughts?

1 Like

Please elaborate, do you mean the y-axis lower bound? If so please check the lower_bound option.

Yes! But I didn’t try it with your setup, I think I found a more straight forward solution, possible thanks to the state_map feature from the last update.

- type: custom:mini-graph-card
  name: Temperature
  entities:
    - sensor.temp
    - entity: binary_sensor.night
      color: rgba(255,255,255,.25)
      y_axis: secondary
      smoothing: false # for binary_sensor smoothing is automatically turned to false by default so this line is unnecessary in this case
      aggregate_func: min
      show_state: true
      show_line: false
      show_points: false
  state_map:
    - value: "off"
      label: "Day"
    - value: "on"
      label: "Night"

hyperion_8123_lovelace_example%20(16)

And the only sensor setup you need is:

binary_sensor:
  - platform: tod
    name: Night
    after: sunset
    before: sunrise

Hope this will work for you!

Ah, sorry but I completely forgot; the state display doesn’t allow non-numeric values, unless you’re using the state_map option and the state match an entry in the state_map, I’ll see what I can do about it.

2 Likes

Ah thanks, Is it not possible for me to just template the result I get into a number?

surprised it manages to show it on the graph then if it cannot recognise it as a number?

I have now setup it as you did, the only thing I didn’t put is the smoothing because I think I prefer it to be “drastic” :slight_smile:

I will let you know the outcome more likely tomorrow.

Thank you very much

1 Like