Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
82

Thank you.

The weather forecast is unfortunately not possible to visualize through this card since the graph is calculated from history data.

If you want to display the temperature history based on DarkSky you can setup a DarkSky sensor to track the current temperature and then use that sensor entity in a mini-graph-card card.

Something like this for the sensor config

# Example configuration.yaml entry
sensor:
  - platform: darksky
    api_key: YOUR_API_KEY
    forecast:
      - 0
    monitored_conditions:
      - temperature

and then the card

# Example ui-lovelace.yaml entry
- type: custom:mini-graph-card
  entity: sensor.dark_sky_temperature
  hours_to_show: INSERT_HOURS
83

So I thought about it and this is the solution I came up with.

# Example card config
- type: custom:mini-graph-card
  entity: sensor.sensor_temperature
  name: Temperature
  line_color_above:
    - value: 10
      color: yellow
    - value: 20
      color: orange
    - value: 30
      color: red
  line_color_below:
    - value: -10
      color: white
    - value: -20
      color: lightblue
    - value: -30
      color: blue
    - value: -50
      color: "#000000"

What do you think?
Could add it in the next version.

1 Like
84

Magic!
Can we use css colors all round? t least rgb too?

Thanks a lot for this. Colors made it stand out of the regular sensor card but this tops it even more !

I take it the line stays in the color it was before it changed so we can see the historic change?

85

Yes, most color formats should work since color is applied through css, exactly.

This would have been very cool but unfortunately no, at least not right now.
The line is rendered as a single SVG path, making it impossible to have different colors for different sections of the line.

In order to make this work we would need to rework the way we compute and render the graph. Possibly by splitting and rendering the line in smaller sections instead, and apply colors to the individual sections based on their value.
This would require a fair bit of additional which would make computing and rendering the graph a bit more demanding for the browser.

Might look into this more in the future. It’s a really cool idea, and by applying gradients to the individual line sections we could have them blend together which would look really great!

1 Like
86

Thanks for the answer, unfortunately I want to see the future temperature forecast, not the past. If you use the standard weather card and click for more details, you can get the next couple days of hourly forecast data, but I have no idea how to get this to graph.

87

please do, it would really make the sensor worth while for insight into behavior, and not just for the actual moment.
if you need a tester, please chime back in!

88

Okay, as I said, it’s not possible since the graph is computed from the sensors history data.

89

Yeah that’s kind of what I figured (that it’s not possible), but it’s a bit annoying knowing the data is there and can’t be graphed. Viewing it in tabular form is far less effective at conveying the data. Thanks for confirming my suspicion though.

90

Yup, it’s possible to graph it though, just not with the implementation of this card.

You could potentially modify the code of this card though and make it work, if you are into javascript.
Could be a cool card :slightly_smiling_face:

91

Just wondering if you are planning to have multiple lines (entities) per graph please? No worries if that’s beyond the scope of this card

92

Definitely, I want to implement this, and hopefully sooner than later.
It should work pretty well as long as the entities are within similar value range.

1 Like
93

I have this card:

  - type: custom:card-modder
    card:
      type: "custom:mini-graph-card"
      entity: sensor.dark_sky_wind_speed
      line_color: '#FFFFFF'
      line_width: 5
      hours_to_show: 168
    style:                 
      width: 90px
      height: 90px
      font-size: 8px
      --primary-text-color: var(--primary-text-color)
      --secondary-text-color: var(--secondary-text-color)
      --paper-item-icon-color: var(--primary-text-color) #small variation icons
      background-repeat: no-repeat
      background-size: 100% 600px
      border-radius: 20px
      border: solid 1px rgba(100,100,100,0.3)
      box-shadow: 3px 3px rgba(0,0,0,0.4)`Preformatted text`

50

How to change the font size in the name of entity?

EDIT: I updated to the last version of the card, changed the card code to:

  - type: custom:card-modder
    card:
      type: "custom:mini-graph-card"
      entity: sensor.dark_sky_apparent_temperature
      name: Temperatura Percepita
      line_color: '#FFFFFF'
      line_width: 5
      hours_to_show: 168
      hide:
        - icon
    style:                 
      background-image: url("/local/lovelace/images/weather-background-[[ sun.sun.state ]].png")
      --primary-text-color: var(--primary-text-color)
      --secondary-text-color: var(--secondary-text-color)
      --paper-item-icon-color: var(--primary-text-color) #small variation icons
      background-repeat: no-repeat
      background-color: rgba(50,50,50,0.3)
      background-size: 100% 600px
      border-radius: 20px
      border: solid 1px rgba(100,100,100,0.3)
      box-shadow: 3px 3px rgba(0,0,0,0.4)`Preformatted text`

But now i’m getting this:

52

What happened? How to solve?

94

Not possible, unless you edit the source.
https://github.com/kalkih/mini-graph-card/blob/master/mini-graph-card.js#L260

graphData isn’t references anywhere in the later versions of the code, grab the latest bundle version and change the ?v= at the end of the resource reference in ui-lovelace.yaml if you didn’t already.
If that doesn’t solve it, clear cache or/and restart HA.

95

About the size of the font will be possible in future? And which value to use in the source to lower the size?
I got the latest, which value to put in the resources to make the .js recognized by custom updater? Actually it is not recognized like, for example, mini-media-player card


96

Most likely no.
A lower value than the current, lower value equals smaller size.

Follow the instructions and you should be good.

# ui-lovelace.yaml
resources:
  - url: /local/mini-graph-card-bundle.js?v=0.1.0
    type: module

# configuration.yaml
custom_updater:
  card_urls:
    - https://raw.githubusercontent.com/kalkih/mini-graph-card/master/tracker.json
    ...
98

@kalkih I’ve just updated to latest of your card (it has been awhile) and I am encountering an error

image
image870×291 24.5 KB

image
image1128×184 6.46 KB

the error looks to be trying to load the card from within custom_ui folder when it has been specified it sits in another location?

Whoops just looked at the error more closely lol looks to be with the card_modder ignore.

1 Like
99

Hello everyone, I’m here to share a sneak peak of some upcoming features and design (WIP).

  • Support for multiple entities
  • New design (old is still available)
  • Animations
  • min/max information
  • Additional options to rearrange ui elements
  • Support for multiple value thresholds for dynamically changing the graph color
  • 


hyperion_8123_lovelace_4%20(3)
hyperion_8123_lovelace_4%20(3)677×540 25 KB

13 Likes
100

Love the look of that second graph. I can see a few uses for it already in my UI.

1 Like
101

beatiful!
hope these graph color changes work out as we discussed before. This makes for a very nice history-graph.
thanks in advance for the good work!

1 Like
102

Thanks Karl,

Can’t wait to see how these look with my weather station project. Thanks for your work in implementing min & max temps. Once you get inspired your turn around is so quick thanks.

1 Like