Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
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
27

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

1 Like
28

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

29

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:

Preview 1
Preview 11006×438 12.2 KB

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

Preview 2
Preview 2998×432 13 KB

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

30

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
31

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.

32

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!

33

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

34

Make sure you are grabbing the raw version of the files from Github

1 Like
35

yes I solved
thanks!!

36

Hi friends.

I can’t showing the line of graph.

configuration.yaml

javascript_version: latest

climate:
 - platform: generic_thermostat
   name: termometro_acuario
   heater: switch.enchufe_termometro_acuario
   target_sensor: sensor.temperature
   ac_mode: true
   max_temp: 35
   target_temp: 26.5
   cold_tolerance: 0.5
   keep_alive:
  minutes: 3
   initial_operation_mode: "off"

ui.lovelace.yaml

  • id: graph temperature
    type: history-graph
    title: ‘My Graph’
    entities:
    • sensor.temperature
  • id: graph_tempera
    type: sensor
    entity: sensor.temperature
    name: Illumination
    height: 75
    line_color: “#3498db”
    graph: “line”
  • id: graph_tempera
    type: “custom:mini-graph-card”
    entity: sensor.temperature
    height: 100
    line_width: 4
    font_size: 75
    color: ‘#3498db’

I used three methods but you do not see any.

Screenshot_20181103-152238_Chrome%5B1%5D
Screenshot_20181103-152238_Chrome%5B1%5D1080×1115 75.9 KB

thanks for your help

37

Just curious, what is the difference between this one and the builtin lovelace sensor card?
I’m simply loking for what it brings more to decde if I try it.
Thanks (sorry in advance if it’s obvious


1 Like
39

the last two are from lovelace.
The first is the sensor card and the second is what I saw in this post that includes an external js

I just see this error:
GET http://xxxxxxxr:8123/api/history/period/2018-10-27T23:51:13.265Z?filter_entity_id=sensor.temperature&end_time=2018-11-03T23:51:13.265Z 404 (Not Found)

40

Looks like there is no history available for the sensor named sensor.temperature.

Make sure you have history enabled and working.

Great question. Not much actually, since first releasing this custom card I’ve contributed it to the HA core and it’s now available as the sensor card with Home Assistant 0.80.0 and later.

The main differences are

  • The official sensor card is missing some options, like hide_icon , line_value_above , line_color_above & below
  • The custom card depends on an externally loaded dependency
  • The custom card can be used in HA < 0.80.0

Also, this card is more accessible to modify and customize compared to the official card imo, since you don’t have to rebuild the frontend.

I would recommend using the official card if possible.

I should probably update the main post to clarify this at some point


1 Like
41

now I configured this:

api:

recorder:
  purge_keep_days: 5
  db_url: mysql://xx:[email protected]/history_home?charset=utf8
  include:
    entities:
     - sensor.temperature

history:
  include:
    entities:
     - sensor.temperature

logbook:

map:

Platform cast not ready yet. Retrying in 30 seconds.

17:30 helpers/entity_platform.py (WARNING)

Setup of platform cast is taking over 10 seconds.

17:30 util/async_.py (WARNING)

Setup of platform yweather is taking over 10 seconds.

17:30 util/async_.py (WARNING)

No previously saved temperature, setting to 26.5

17:29 components/climate/generic_thermostat.py (WARNING)

Setup failed for logbook: Could not set up all dependencies.

17:29 setup.py (ERROR)

Unable to set up dependencies of logbook. Setup failed for dependencies: recorder

17:29 setup.py (ERROR)

Template sensor iframe has no entity ids configured to track nor were we able to extract the entities to track from the value template(s). This entity will only be able to be updated manually.

17:29 components/sensor/template.py (WARNING)

Setup failed for history: Could not set up all dependencies.

17:29 setup.py (ERROR)

Unable to set up dependencies of history. Setup failed for dependencies: recorder

17:29 setup.py (ERROR)

Setup failed for recorder: Component failed to initialize.

17:29 setup.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Setup of recorder is taking over 10 seconds.

17:29 util/async_.py (WARNING)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)

Error during connection setup: No module named ‘_sqlite3’ (retrying in 3 seconds)

17:29 components/recorder/init.py (ERROR)