Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
2077

My graphs are also showing wrong data. Min and Max values are completely wrong as well as graph data

image

Should look like this

image

type: custom:mini-graph-card
name: Today's Energy
icon: mdi:flash
hours_to_show: 24
points_per_hour: 0.5
aggregate_func: avg
group_by: hour
group: false
hour24: true
animate: false
decimals: 2
show:
  name: true
  icon: true
  state: true
  graph: bar
  fill: false
  points: false
  legend: true
  extrema: true
  labels: false
color_thresholds:
  - color: '#039BE5'
    value: 0
  - color: '#0da035'
    value: 20
  - color: '#e0b400'
    value: 25
  - color: '#e45e65'
    value: 30
entities:
  - entity: sensor.daily_house_energy
tap_action:
  action: none
2 Likes
2078

Another example

image

type: custom:mini-graph-card
name: Study Temperature
align_state: left
hours_to_show: 48
points_per_hour: 10
line_color: '#AED6F1'
show:
  extrema: true
  fill: false
entities:
  - entity: sensor.th10_temperature
    name: Temperature

image

2079

Hard to tell if the data is wrong if the time axis is not the same. Seems to be only a very small portion. In that case the automatically chosen y axis range is different, causing small variations to appear much larger.

2080

Same issue here. After upgrading to the latest HA version I’m getting strange results. Max value is totally wrong. I also believe it has to do with the DB changes.

1 Like
2081

No the data is completely wrong. These graphs were working fine until the latest updates

1 Like
2082

How these graphs are supposed to be compared?
The stock history-graph shows (supposed to) real values.
The mini-graph-card shows approximated values - and this approximation depends on parameters like smoothing, points_per_hour, aggregate_func.
You even have not provided showing Y-labels on the 1st graph and same hours_to_show.
To perform an analysis, you should ensure same settings for both cards.

2083

I’ve been running these graphs for months. I know what they are supposed to look like. The daily energy graph should look like a staircase going upwards and it resets to 0 everyday. I get that you can’t compare these exactly but the point was that something has changed and it’s obvious from the min and max values.

2084

This is showing the same data in the stock graph and mini-graph-card. Obviously the mini-graph-card is wrong. Ther mini-graph-card shows a steep increase. I believe this happened when I upgraded to 2022.6.1

grafik

grafik

cards:
  - entities:
      - entity: sensor.lumi_6d760604_temperature
    extrema: true
    font_size: 58
    height: 350
    hour24: true
    hours_to_show: 24
    index: 0
    line_color: blue
    line_width: 4
    name: Eingang
    points_per_hour: 60
    type: custom:mini-graph-card
2085

I opened an issue on github https://github.com/kalkih/mini-graph-card/issues

2086

How to compare mini-graph-card & history-graph:
Some people are experiencing a bug now.
To compare graphs - use this card.
(it uses the same method as was used here)

  1. Create 4 helpers:
input_number:

  test_compare_graphs_padding_left: &ref_padding
    min: 0
    max: 200
    step: 1
    mode: box
  test_compare_graphs_padding_right: *ref_padding
  test_compare_graphs_padding_top: *ref_padding
  test_compare_graphs_padding_bottom: *ref_padding

  1. Create a “panel” view.

  2. Place this card on a view:

type: vertical-stack
cards:
  - type: entities
    entities:
      - entity: input_number.test_compare_graphs_padding_left
        name: padding-left
      - entity: input_number.test_compare_graphs_padding_right
        name: padding-right
      - entity: input_number.test_compare_graphs_padding_top
        name: padding-top
      - entity: input_number.test_compare_graphs_padding_bottom
        name: padding-bottom
  - type: custom:mod-card
    card_mod:
      style:
        hui-vertical-stack-card $: |
          div#root {
            display: grid;
          }
          div#root > * {
            grid-column-start: 1;
            grid-row-start: 1;
            margin: 0px;
            --ha-card-background: rgba(0,0,0,0);
          }
    card:
      type: vertical-stack
      cards:
        - type: custom:mini-graph-card
          entities:
            - entity: sensor.xiaomi_cg_1_pm25
          show:
            labels: false
            name: false
            state: false
            points: true
          line_width: 1
          hours_to_show: 1
          points_per_hour: 120
          update_interval: 0
          aggregate_func: last
          smoothing: false
          card_mod:
            style: |
              ha-card {
                padding-left: {{states("input_number.test_compare_graphs_padding_left")}}px !important;
                padding-right: {{states("input_number.test_compare_graphs_padding_right")}}px !important;
                padding-top: {{states("input_number.test_compare_graphs_padding_top")}}px !important;
                padding-bottom: {{states("input_number.test_compare_graphs_padding_bottom")}}px !important;
              }
        - type: history-graph
          entities:
            - entity: sensor.xiaomi_cg_1_pm25
          hours_to_show: 1
          refresh_interval: 0

  1. Specify your own monitored sensor instead of “sensor.xiaomi_cg_1_pm25” and a required frequency: since my sensor is updated every 30 sec, I am using “points_per_hour: 120”.

  2. Use input helpers to align graphs together.

    image
    image1861×753 99.9 KB

Note that the mini-graph-card is updating and “scrolling” a graph to the left.
IMHO the history-graph should also automatically update and “scroll” to the left - but it does not seem to do it now (due to a recent bug I think).
After every update the alignment is lost, so you should re-align, make a screenshot and then analyse it in MS Paint (or whatever).

2087

It’s not about comparing graphs. The data in the Mini graph card is simply wrong. Look at my graph above. 93.5 degrees celcius max!
This used to work correctly for a long time. Only after the HA upgrade it’s wrong.

2088
  1. The proposed solution is not intended for YOUR personal case only. It is for comparing cards in general; for analysing a difference between different “aggregate_func” values etc.
  2. As for YOUR personal case - check the GitHub issue, some people sorted out a reason of their similar problems.

P.S. … not to mention errors in your code…

2089

I agree. Comparison of outdoor temperature graphs. Look at the values of min max

graf temp
graf temp464×514 30.9 KB

2090

One more picture w/o a code, come on))

Start with this:

  1. restart HA (or the whole HA OS).
  2. restart DB if it is used in a separate container.
  3. clear cache.
2091

Here is
Points 1 and 3 implemented
I don’t know how to restart the DB, I use HaOS on Rpi built-in DB
The only thing that preceded it was the exclusion of some entities from the recorder that had nothing to do with temperature.

type: vertical-stack
cards:
  - type: custom:mini-graph-card
    entities:
      - entity: sensor.venkovni_teplota
        color: green
        show_state: true
        show_points: true
    hours_to_show: 1
    points_per_hour: 120
    aggregate_func: last
    update_interval: 0
    height: 80
    show:
      state: true
      points: true
      extrema: true
      name: false
      icon: false
    line_width: 1
    hour24: true
    lower_bound: ~0
    smoothing: false
  - type: history-graph
    entities:
      - entity: sensor.venkovni_teplota
    hours_to_show: 1
    refresh_interval: 0
2092

I rebooted the host. It seems it’s now working fine again. Restarting HA did not help.

2093

I copy/pasted your code (just put my sensor):

image
image1920×1119 275 KB

P.S. your code is good, btw ))

2094

Could you specify a type of your installation?

I am using Debian + HA in Docker (with a native DB). Rebooting the HA causes rebooting DB server too.

2095

I’ll restart the host one more time and let me know

2096

Thanks for your help. I use raspberry pi with latest OS (bullseye) and HA Docker with default DB.