Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
7

This is really cool.
Any chance of being able to combine multiple entities on the same chart? For example multiple Temp sensors with a mini legend to identify the different colours?

5 Likes
8

That should certainly be possible, I will consider that feature, thank you!

9

Great job. Thank you.
Is it possible to add a choice of custom backgrounds or colors for the card?

10

Haven’t got the time to try it out yet. But i definitely will do!
Great work. Thats a totally awesome and needed card :+1:

2 Likes
11

What do i do wrong:
Configuration.yaml:

frontend:
    javascript_Version: latest

ui-lovelace.yaml:

 - url: /local/mini-graph-card.js?v=0.0.1
   type: module

and:

- type: horizontal-stack
        cards:
          - type: "custom:mini-graph-card"
            entity: sensor.energy
            name: Energie
            line_color: '#FF0000'
            line_width: 8
          - type: "custom:mini-graph-card"
            entity: sensor.power
            name: Leistung
            line_color: '#FF0000'
            line_width: 8
      - type: horizontal-stack
        cards:
          - type: "custom:mini-graph-card"
            entity: sensor.voltage
            name: Spannung
            line_color: '#FF0000'
            line_width: 8
          - type: "custom:mini-graph-card"
            entity: sensor.current
            name: Stromstärke
            line_color: '#FF0000'
            line_width: 8

and ofc the 2 files in www-folder:

i have dat but no graph, look here:

graph
graph1009×543 28.9 KB

what do i do wrong?

Thx in Advance

12

Thanks, try the card-modder plugin, might be able accomplish that with it My Lovelace Plugins

13

Strange, the graph and icon is not visible? What version of HA are you running? Do you get any errors in the log?

14

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

15

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

16

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?

17

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.

18

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

19

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

20

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
21

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

22

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
23
2 Likes
24

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
25

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
26

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