Lovelace: mini graph card

petro · November 25, 2018, 3:13pm

sounds like you just want a style attribute similar to the style attribute for entities:

      style:
        height: 30px
        margin: 4px 0
        background: center / contain url("/images/divider.png") no-repeat

helgemor · November 25, 2018, 8:54pm

Could be. I’m not very familiar with this. How do I use it?
I have one more, important wish…
My energy meter delivers reliable results. Most of the time. But suddenly the measured value jumps to crazy values, e.g. 19662 W. This renders the graph quite useless, as you can see:

I need some kind of filter so that I can ignore values above / below some limits.

petro · November 25, 2018, 9:32pm

You should be applying the filter using the filter sensor, hide the original sensor and push the filter sensor to the frontend. Front end shouldn’t handle all that math.

EDIT: You’d want outlier removal filter BTW.

kalkih · November 25, 2018, 9:39pm

I’ll keep that in mind.

If you are using mini-graph-card make sure you are using the bundle version, if you aren’t already. Follow the instructions on Github, since I’m unable to update the OP in this topic.

If you are indeed using the bundle version then the explanation could be:
If the sensor only has one entry in history, the line does not render I believe.
Looks like the other (graph on the right) sensor is missing history data from ~18-24hours ago and therefore doesn’t draw the line all the way to the left.

The latest version of the mini-graph-card and the Sensor card is calculating the graph based on a moving average which should make smaller inconsistencies less of a problem, however if the sensor fluctuate that crazy this won’t really help.
I have no plans to include a filter function in these cards, maybe the filter sensor could solve this issue?

Edit: Looks like @petro beat me to it

helgemor · November 26, 2018, 8:08am

Great! Thanks for helping me with my beginner’s problems

thmry · November 26, 2018, 2:03pm

For some reason I can’t get the mini-graph-card to work in my instance (need to look into that), so I’m using the sensor card right now, but I would love to use mini-graph-card specifically for these options:

line_value_above
line_color_above
line_value_below
line_color_below

If these could be added to the sensor card, that would be great!

rsachoc · December 5, 2018, 5:35pm

Thanks for this card, it’s really useful and pretty! Is there a way I can show 2 sensor’s on a single graph?

kalkih · December 5, 2018, 6:02pm

Glad you like it!
It’s not possible in the current version, possibly in the future.

efurban · December 7, 2018, 3:45pm

Sorry maybe I am missing something here, but what isn’t this very similar to the existing Sensor Card ?
Thanks.

Dolores · December 7, 2018, 3:48pm

vloris · December 10, 2018, 8:49am

This is the Sensor Card before the Sensor Card existed

jono · December 10, 2018, 11:07am

Very nice, thanks!

I’m also having the problem where it won’t show the icons, but it seems only with certain icons, some icons do seem to show up OK.

Romquenin · December 21, 2018, 5:58pm

Hello, thank you very much for this awsome card.

Unfortunately i have flat lines.

I want for exemple to display the last one hour of my hassio cpu load:

  - type: "custom:mini-graph-card"
    entity: sensor.processor_use
    name: CPU Load
    line_color: '#e74c3c'
    line_width: 8   
    graph: line   
    hours_to_show: 1

I have started the log history/recorder more than one hour ago.

What should i do to make it work.

Thanks.

kalkih · December 21, 2018, 9:08pm

Hey!

Since you specified hours to show: 1 and the default detail is set to display one point per hour, you end up with a flat line.

You can specify detail: 2 in your card config and the graph will display one data point for every 10 minutes (6 per hour).

If you want an even more detailed graph, I would suggest using a history graph card instead.

Romquenin · December 22, 2018, 7:48am

Thanks kalkih

Mariusthvdb · December 22, 2018, 9:06am

hi,

can we use more than only 1 line_color_abve/below? I ask since I have a lot of customizations that use templates like this in regular HA:

  templates:
    icon_color: >
      if (state > 1500) return 'rgb( 192, 39, 30 )';
      if (state > 1000) return 'rgb( 244, 101, 35 )';
      if (state > 500) return 'rgb( 255, 194, 15 )';
      if (state > 250) return 'rgb(251, 210, 41)';
      return 'rgb(54, 95, 140)';

would be really nice if we could use several of these line_color_above’s to create the same effect.
Or, if we could use templates of course…
thanks.

kalkih · December 22, 2018, 8:08pm

Hey, that’s a good idea.
Possibly changing line_color_above / line_color_below to a lists, where you can specify one or more [value, color] entries. Requires some changes to the card, but should definitely be possible to implement.

Will take into consideration for future updates, thanks!

kalkih · December 22, 2018, 8:10pm

New version v0.1.0

New hide option & more.

And as usual, visit the Github repo for the updated readme including instructions and examples.

Changelog

Added hide option to hide specific UI elements (name, icon, state, graph)
Removed hide_icon, use new hide option (Breaking change)
Minor UI layout changes
Fixed issue causing errors if all available history entries had the exact same state
Updated dependencies

Mariusthvdb · December 22, 2018, 11:21pm

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.

scstraus · December 23, 2018, 12:57pm

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?