please do, thought about creating
line_color_above_1
line_color_above_2
line_color_above_3 etc
maybe a template would be more elegant? Anyways, hope you can add this functionality.
Beautiful card. I’d love to use it to graph the temperatures given by the weather forecast of DarkSky, any idea if that’s possible?
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
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
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?
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
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.
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!
Okay, as I said, it’s not possible since the graph is computed from the sensors history data.
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.
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 
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
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
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`
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:
What happened? How to solve?
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.
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…
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
...
@kalkih I’ve just updated to latest of your card (it has been awhile) and I am encountering an error
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
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
- …
13 Likes
Love the look of that second graph. I can see a few uses for it already in my UI.
1 Like