Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
2400

Hello, I’m new to the mini-graph and I have a small problem. I’m trying to display the slightest variation on my temperature graph.

In the graph I’m sending you, the variations are of the order of 10 degrees. (0.10) And I don’t want this to be really visible on the graph. Would you have a solution?

type: custom:mini-graph-card
name: Fridge Kitchen
hours_to_show: 5
group_by: hour
hour24: true
animate: true

show:
  icon: false
  fill: false
  legend: false

state_map:
  - value: low
    label: low
  - value: middle
    label: middle
  - value: hight
    label: hight

entities:
  - entity: sensor.capteur_t_h_temperature
    show_state: true
    show_graph: true
    
  - entity: sensor.capteur_t_h_humidite
    show_state: true
    show_graph: true
    name: humidity
    
  - entity: sensor.capteur_t_h_etat_batterie
    show_state: true
    show_graph: false
    name: battery

image

2401

I do not understand the issue, could you elaborate?
Also, it may be solved by itself after following written below:

Graphs with diff. UoM should be placed on the secondary Y-axis:

  - entity: sensor.capteur_t_h_humidite
    ...
    y_axis: secondary
  1. This option currently is used for ALL graphs, and this is causing issues: one, two.
  2. A proper data for the state_map option depends on actual data for that “capteur_t_h_etat_batterie” sensor.
  3. +same remark about using a different axis - and 2 of them are already occupied! One does not simply add the 3rd graph with a diff. UoM!
2402

I’m lost here… love the look, but cannot get this to work. Is this intended to be used as custom / manual card on a dashboard or a complete dashboard of its own? Sorry, new to this…

2403

What is not working? Do you have the card-modder installed that is used in that code?

2404

I am playing with the mini-graph-card and have three questions:

  • Is it possible to display the axis? I know it has a minimalist look, but maybe there is an option that I missed?

  • The points_to_show seems a bit off to me.
    I would like to show up to 500 per hour but mini-graph-card does not use the value as a max but artificially creates fake data points to reach that number.
    Is this a known bug?
    E.g. if you have 10 data points for an entity over the frame of 1 h, then set points_to_show to 1000, the mini-graph_card will show 1000 data points, 900 of which it created itself.

  • When plotting multiple entities, the first entity has its state shown top left and the others are vertically aligned on the right.
    The state colors match the line colors.
    But, when I hover over a datapoint, the information for that datapoint is displayed but the color of the top left state value (equals selected data point) does not change color to the selected entity. Only the title switches color.
    Is this a known bug or am I missing a setting?

    image
    image676×594 29.2 KB

2405

no

Ofc, what else do you expect?
If your sensor is updated every 60 sec and “points_per_hour=10”, some points will be missed. If smoothing is ON, then you will probably get a picture which differs a lot from “history-graph”.
If you set “points_per_hour=60” - then your curve will be closer to the “history-graph”.
If you set “points_per_hour=600” - then most of points will be SAME as real (you may call them “fake” if you like but they are same as real).
So, set this value accordingly to the real frequency.

You may find an answer in Github issues: if this bug is described - then yes, this is a famous bug))).

2406

I expect it to be the upper limit.
Max_points_per_hour.
It makes absolutely no sense to create fake data points.
And yes, Data points that are not in the database are fake. No if or buts :wink:

And none of my devices update with defined frequency. They are all based on value changes. So it is impossible to know how many data points there are without reading the database.

Idea of points_per_hour is reduction of system resource usage.
But this feature does the opposite. You either enter a value that is definitely below the real one (for all displayed entities!) or you will be artificially consuming resources.

That makes absolutely no sense :smiley:

It should be:

If points_per_hour > real Then
  show real
Else
  show points_per_hour
2407

No problem, create an issue on GitHub and propose your own algorithm.

2408

Believe me, I would. And I have been trying to be actively involved in other projects wherever I can. But this would by far exceed my coding capabilities :frowning:

If I knew how to do that, I would have written quite a few integrations in the past :smiley:
And my own hybrid of mini-graph-card, apexcharts-card, plotly-graph-card, auto-entities and config-template :joy: :joy: :joy:

2409

@SeLLeRoNe
How did you get both temperature readings on the same graph, I can only see the first one on my code.

2410

Which is what?

2411

I have a graph that shows the humidity level for the past 168 hours. Is it possible to add another graph showing the humidity level for the 168 hours before that, i.e. comparing the current period with the previous one? If so, how?

2412

You cannot.

2413

Your best bet would be ApexCharts plotting the same series twice, but one with an offset.

1 Like
2414

Is there ways to troubleshoot this function of date/time not working with the hours to show?
I’ve included your ‘hours_to_show’ and my card is now blank, including after hard reload of the webpage.

My sensor.rain_daily resets at 0:00.

type: custom:mini-graph-card
hours_to_show: >- 
  ${
    var date = new Date();
    var curHour = date.getHours() + date.getMinutes()/60.0 + date.getSeconds()/3600.0;
    curHour
  }
points_per_hour: 5
line_width: 2
name: Rain today
icon: mdi:home
hour24: true
entities:
  - entity: sensor.rain_daily
    name: Rain today
    show_state: true
    unit: mm
show:
  name: true
  extrema: true
  average: true
  fill: fade
  icon: false
  labels: hover

image

2415

I do not see a “config-template-card” in your code.
Seems that you are trying to use my code w/o using this card.

1 Like
2416

Thankyou for the reply.

Oh, okay… I thought the entity below that referenced it being another card you had (within a grid or something).
(I made sure to download config-template-card from HACS).

That has fixed it, thankyou!

type: custom:config-template-card
entities:
  - sensor.rain_daily
card:
  type: custom:mini-graph-card
  hours_to_show: >-
    ${
      var date = new Date();
      var curHour = date.getHours() + date.getMinutes()/60.0 + date.getSeconds()/3600.0;
      curHour
    }
  points_per_hour: 5
  line_width: 2
  name: Rain today
  icon: mdi:home
  hour24: true
  entities:
    - entity: sensor.rain_daily
      name: Rain today
      show_state: true
      unit: mm
  show:
    name: true
    extrema: true
    average: true
    fill: fade
    icon: false
    labels: hover

image

2417

Not sure I undertand what you mena, you can specify multiple entities and they will be shown, if you share your code and a screenshot maybe it gets easier to understand any issue you’re facing.

That said, the code I used is still on GitHub, it would be one of those 3, probably the second would be the best place:

2418

Does anybody know, if it is possible to use the complete card height with a graph?
I mean, no header, no labels, nothing? just the pure line of graph.
even if i disable everything, i still have unused space above the graph (above the 100) , especially visible at small card heights.

Thank you all.

grafik
grafik1002×158 7.73 KB

2419 
show:
      legend: false
      extrema: false
      fill: fade
      icon: false
      labels: false
      labels_secondary: false
      name: false
      state: false
      points: false