Lovelace: mini graph card

37 47

Getting this issue too :frowning: Two of my sensors (in the bottom of the picture) that are Xiaomi Bluetooth ones sometimes presents a graph for a few seconds, but on refresh it’s just gone. No problems with my zigbee ones, the only difference i can come to think of between them is that the bluetooth ones are reporting temperature a bit sporadicly, sometimes every 5-10 minutes, sometimes it could be 40 minutes, but i still get a native graph in the UI and the latest temperature is always displayed. Running 0.79.2 with the latest Mini graph card on a RPI 3. The only error in the log is this:

2018-10-04 23:03:21 ERROR (MainThread) [frontend.js.latest.201809270] https://fillwe.duckdns.org:8123/lovelace/2:0:0 Uncaught

The log is empty,
and i am Running 0.79.1 at the moment
Strange is, that i thought, in one graph i saw shortly a red line, but it was gone after refresh!
The second strange thing is, that the data comes from one single entity, a Tasmota POW !
A fault from my side?
Thx
Wiesl

Ughh, wish I had more sensors to debug this issue with, haven’t seen it myself.

No, it’s most likely an issue with the card, I’ll try to figure it out.

Can any of you please check the developer console in the browser for errors?

I had the same issue first time and it was because the recorder component didn’t have the domain added so there was no tracking of the information. Once I added it (and wait a little) I started to see the chart.

Hi, this is really nice one! And could you please share you’re dark theme? Still can not find satisfying look.

Awsome card, is it possible tu change the size of the card, so I can match it to button card?

This is great information, thank you.

Thanks! sure, here it is:

No, unfortunately since the design is somewhat responsive, setting a fixed height is not possible, although you can however manipulate the height in some manner with the height option.

1 Like

I Tried it out and i totally like it! Really good job on that.

Just got one question. If i have set a small height for the card. Most of the height is taken by the margin of the Text while the graph could be a bit bigger (at least for me :slight_smile: see picture ) I already tried a bit to change the css, but iam no expert. Could you give me a hint?

Btw. does someone know if its possible to combine cards in a vertical way into one card? So i dont have borders for every card? For example i would like to have 3 of your graph cards vertical stacked with just 1 single border, so they look as 1 single card. Iam new to lovelace

image

The height option does only affect the line graphs height, as stated in the readme under the options section.

The margin of the state text can be found on line 209 of mini-graph-card.js:

margin: 20px 0 20px 8px;
1 Like
2 Likes

New version: v0.0.3

  • Added option font_size to modify the font size scale of the state #4
  • Fixed <path> attribute d: Expected number errors.
  • Decreased the default font size slightly #4
  • Changed default graph height from 150 to 100;
  • Improved compatibility with other custom cards like vertical-card-stack #3

Important: You need to update both mini-graph-card.js and mini-graph-lib.js this update.

1 Like

Is it possible to template the line_color: to show a different colour depending on thresholds ie above 24 degrees line goes red etc?

2 Likes

Certainly, that’s a great idea, I’ve now added options to achieve this, both for below & above specified values. (see readme on github).

New Version: v0.0.4

  • Added options to have the line change color if the state is above/below specified values
  • Fixed graph when setting accuracy option to a higher value than the available data points in history
4 Likes

Thanks for the quick turn around amazing support, hopefully this isn’t slowing you down from creating new cards:wink:

1 Like

Wanted to give you short feedback. At least for some of my sensors (mainly temperature where i dont have much changes) The space is not so good used. See

image
This is a temperature graph. My values are in the range of 22.0-23.0

  const min = Math.floor(Math.min.apply(null, values) * 0.95);
  const max = Math.ceil(Math.max.apply(null, values) * 1.05);

Will set the scaling to 20.0 - 25.0 for me. Which is the reason for the “waste” of space. I changed it to fit my needs. Just wanted to share, if you maybe want to add a fixed Ymin Ymax scaling or something

Yeah, that’s interesting. I did actually change the scaling to 0.95/1.05 in v0.0.3. This obviously doesn’t work well in all cases but for the majority I think this is a good middle ground for now.
But some space is still wasted when the line doesn’t take up the available height of the svg element.

The reason why I included the min/max scaling was to be able to tell approximately how big the change in the graph is.

This is what a 1% change looks like with the scaling:

This is what a 1% change looks like without the scaling option:

If you have any ideas on how to improve this further, let me know!

Yeah, i see your points. Totally valid. I guess for most cases its good.

Maybe allow the user to set a fixed Ymin & Ymax value? For room temperature it would be good (eg set 20-25) so its easy to see the increase/decrease.

I already tried some ylabel, but i dont think its so good
image

2 Likes

Yeah, for sure, I see use cases for some sort of Y-scale option. If you can think of a suitable solution and have time you are welcome to make a PR.

That y-label is not bad start, nice one.

Hi,

I tried to add it to my homeassistant but I have this error on the log:

2018-10-10 18:09:29 ERROR (MainThread) [frontend.js.latest.201809270] http://192.168.0.10:8130/local/mini-graph-card.js?v=0.0.4:7:1 Uncaught SyntaxError: Unexpected token <

how I can fix it, please?

I tried to upload again the files and I changed the frontend last version on the configuration file.

Thanks!

Please check the files again and make sure your local files match mini-graph-card.js and mini-graph-lib.js.

There shouldn’t be a < token at line 7 of mini-graph-card.js as the error indicates