Lovelace: mini graph card

Underknowledge · May 29, 2019, 10:55pm

An weather forecast with this card would be pretty deam sick. Sadly I don’t found a way yet.
Somebody here got this already?

kalkih · May 30, 2019, 2:49pm

New release v0.4.3

Changelog

Including beta changes

ADDED

Color threshold transition option, color_thresholds_transition (yeah…very long name) (#91)
Added hover effect to legend to highlight entity and display current entity state
Purging of old cached history (#96) - (@bramkragten)

CHANGED

Interpolate fill, name & icon color based on color thresholds
Redesign of line point hover (#99)
Moved to localForage for caching (#96) - (@bramkragten)

FIXED

Center state misalignment
Interpolate color for out of bound thresholds (#91)
Error when localStorage quota was exceeded (#95, #97)
Empty graph when color thresholds wasn’t being used (#92)
Invisible graph lines when color thresholds where out of bounds (#91, #92)
Invalid rendering of color thresholds when lower bound wasn’t at zero (#91, #92)

Should be fixed in the latest release v0.4.3

Available in the latest release v0.4.3

Anwen · May 31, 2019, 7:49pm

I’m using custom updater/tracker card and my card still shows 0.4.2 as the latest version - if I click “Check” I don’t see the new version available. I have it set up as per the documentation. Any thoughts?
I’m on HA 0.92.2.

kalkih · May 31, 2019, 10:23pm

Forgot to merge the dev branch into master (which the tracker tracks) , merged it now so check again!

Anwen · May 31, 2019, 11:05pm

That did it! All checked and updated, thanks so much! And thanks again for this card - I love it

DavidFW1960 · June 1, 2019, 12:08am

Well I was on the beta which was fine but the release has changed the colour of one of my graphs again.

It’s supposed to be a yellow line and gradient

              - type: gauge
                name: Mbit/s Download
                unit: ' '
                min: 0
                max: 50
                severity:
                  red: 0
                  yellow: 30
                  green: 40
                entity: sensor.speedtest_download

kalkih · June 1, 2019, 12:24am

Hey, I think you posted the wrong card config, but make sure you specify the colors in hex format: e.g. #ff0000.

DavidFW1960 · June 1, 2019, 12:41am

you’re right! wrong config! doh!

          - type: custom:mini-graph-card
            hours_to_show: 24
            points_per_hour: 2
            entities:
              - sensor.speedtest_download
            show:
              labels: true
            color_thresholds:
              - value: 0
                color: red
              - value: 30
                color: orange
              - value: 40
                color: green

I’ll try hex but I have always used these names…

DavidFW1960 · June 1, 2019, 12:50am

Ok config like this:

          - type: custom:mini-graph-card
            hours_to_show: 24
            points_per_hour: 2
            entities:
              - sensor.speedtest_download
            show:
              labels: true
            color_thresholds:
              - value: 0
                color: '#ff0000'        #red
              - value: 30
                color: '#ffa500'        #orange
              - value: 40
                color: '#00ff00'        #green
          - type: custom:mini-graph-card
            hours_to_show: 24
            points_per_hour: 2
            entities:
              - sensor.speedtest_upload
            show:
              labels: true
            color_thresholds:
              - value: 0
                color: '#ff0000'        #red
              - value: 9
                color: '#ffa500'        #orange
              - value: 13
                color: '#00ff00'        #green

but they are ignoring the thresholds.

bouwew · June 1, 2019, 10:32am

I have this rain-prediction-sensor with prediction-data (no rain):

Would it be possible to display this data with this card?

kalkih · June 1, 2019, 1:12pm

Strange, copy pasted your config, and works fine.

What browser are you using, can you check the browser dev console log for potential errors?

Don’t think so, unless you somehow insert that data in history and manipulate the timestamps to be in the past.

DavidFW1960 · June 1, 2019, 10:45pm

Chrome. No errors. Maybe I was too close to the threshold for it to show? No errors in browser console log.

Hmm… no it’s gone way below today and still solid. Stupid thing is if the individual dots are highlighted they all show the correct colour but the line and shading stay green. Like I said in b2 this was working 100%

I wonder if it’s 0.94.0b1 error?

kalkih · June 2, 2019, 4:20pm

Okay, weird, still haven’t been able to reproduce it, not running the beta of HA though.
Try using this option color_thresholds_transition: hard and see if that makes a difference.

Just a fyi, the points might not match the color of the line exactly when using color thresholds, I decided it was too performance intensive to calculate an exact gradient for each point, so they are just given a solid color of the closest threshold they are above. Although, when using the option color_thresholds_transition: hard the points and line color should match correctly.

DavidFW1960 · June 2, 2019, 11:03pm

So with that they look like this:

Without it they are like this:

Again, it’s only since I went from the beta to the release…

(I am on 0.94.0b4 too)

Brian_Mollegaard_Ped · June 6, 2019, 2:18pm

Hey, I really like this card, is it possible to passe an variable to the hours to show somehow?
e.g.
…
hour24: true
hours_to_show: _varHoursToShow
line_width: 3
…

kalkih · June 6, 2019, 2:35pm

Yes, it’s possible, with the help of the config-template-card.

GeorgyErm · June 26, 2019, 10:29pm

Hi, is there any possibility to make mini graph a button. For example when I tap the card it toggles my humidifier?

MarkR · June 29, 2019, 8:37am

Mine is the same… doesn’t have the transitions, just a solid colour

cards:
  - color_thresholds:
      - color: '#f39c12'
        value: 20
      - color: '#d35400'
        value: 21
      - color: '#c0392b'
        value: 21.5
    entities:
      - sensor.temperature_158d0001a4c5c9
    font_size: 75
    line_width: 8
    points_per_hour: 6
    hours_to_show: 24
    hour24: true
    more_info: false
    fill: false
    name: Temp
    color_thresholds_transition: hard
    show:
      labels: true
      legend: false
      extrema: true
    type: 'custom:mini-graph-card'
  - entities:
      - sensor.pressure_158d0001a4c5c9
    font_size: 75
    hour24: true
    hours_to_show: 24
    line_color: '#e74c3c'
    line_width: 8
    more_info: false
    name: pressure
    points_per_hour: 6
    show:
      extrema: true
      legend: false
    type: 'custom:mini-graph-card'
  - entities:
      - sensor.pressure_158d0001a4c5c9
    font_size: 75
    hour24: true
    hours_to_show: 24
    line_color: '#e74c3c'
    line_color_above:
      - color: orange
        value: 21
      - color: red
        value: 25
    line_width: 8
    more_info: false
    name: Humidity
    points_per_hour: 6
    show:
      extrema: true
      legend: false
    type: 'custom:mini-graph-card'
type: horizontal-stack

mikeme · June 29, 2019, 10:40am

Hello
Can someone help me with an information? I want to use in my application the switch chart from hassio. What type of chart is it and an example(template)? I already searched on internet!

lovelace_history_graph

Thank you

kalkih · June 29, 2019, 4:42pm

Hey,
Not that I’m aware of no, there could be a custom card around that does this but I haven’t seen one, it would certainly be possible to create.

Can you post a pic of the card with the issue? I’m not able to reproduce it, tried with my temp sensor, changed the thresholds a bit so they match.

Maybe try clearing cache/updating the card if not done so already.

color_thresholds:
  - color: '#f39c12'
    value: 23
  - color: '#d35400'
    value: 24
  - color: '#c0392b'
    value: 25

hyperion_8123_lovelace_4%20(1)

Hey, this card doesn’t support that type of chart, that’s the default History Graph Card, I believe it’s displayed like that instead of a line chart if the entity is a binary sensor or if it doesn’t have a unit of measurement set.

Example config could be

type: history-graph
title: Recent Switches
entities:
  - sensor.air_conditioner