Lovelace: mini graph card

Koal4 · December 31, 2020, 1:53pm

Any tips on how to get this graph right

The last bar is too low compared to the one to the left. I assume it’s because it’s using that bar as lowest point (hence the 4.41 value on the left’

I made a template to combine current tariff1 and tariff2 value of today.

#Combine Energy peak/offpeak
  - platform: template
    sensors:
      daily_energy_power_total:
        friendly_name: 'Daily Energy Peak/Offpeak Total'
        entity_id:
          - sensor.daily_energy_offpeak
          - sensor.daily_energy_peak
        value_template: "{{ (states('sensor.daily_energy_peak')|float + states('sensor.daily_energy_offpeak')|float)|round(3) }}"
        unit_of_measurement: "kWh"
      monthly_energy_power_total:
        friendly_name: 'Monthly Energy Peak/Offpeak Total'
        entity_id:
          - sensor.monthly_energy_peak
          - sensor.monthly_energy_offpeak
        value_template: "{{ (states('sensor.monthly_energy_peak')|float + states('sensor.monthly_energy_offpeak')|float)|round(3) }}"
        unit_of_measurement: "kWh"

type: 'custom:mini-graph-card'
entities:
  - entity: sensor.daily_energy_power_total
name: Energy consumption (Weekly)
hours_to_show: 168
aggregate_func: max
group_by: date
show:
  graph: bar

Ildar_Gabdullin · December 31, 2020, 10:50pm

How often is your sensor updated?

Koal4 · January 1, 2021, 11:06am

My sensor.daily_energy_power_total updates every few seconds whenever there is a change.

The day has passed and now yesterdays bar has increased a lot now. Am I correct to say that the current day(bar) doesn’t grow over the day but gets populated when the day has passed?

Ildar_Gabdullin · January 1, 2021, 11:21am

As far as I understood, the "group_by" feature works like this (@kalkih please correct me):

There is an array of values of some sensor (updated every XXX seconds/minutes).
A usual LINE graph shows a curve reflecting every value (+ some interpolation dependingly on "scan_interval" & "points_per_hour" & "hours_to_show").
Grouping per hour: for every hour an “Arithmetic mean” is calculated (sum of values within this hour / number of values). This calculated value then is displayed in the graph as a value for this particular hour.

To investigate any strange behaviour with "group_by" I recommend you not to use grouping first; then if everything looks fine - use "group_by".

Ih8rain2 · January 3, 2021, 6:14pm

I am working on electrical energy monitoring with a combination of the Riemann sun integration, the utility meter integration and the mini graph custom cards. I get my energy readings through Smappee energy monitor.

All works pretty smooth within the range of a week. In the bar charts data per hour is fine and grouped per hour or date works perfectly. However once you go beyond that range problems start.

Could the hours_to_show changed to time_to_show with a selection of hours, day, week, month, year (like the utility meter also counts the data).

And the same for grouped_by not only hour or date but calendar_week, calendar_month or calendar_year?

There is the option for interval but I couldn’t find any description on how to use that.

I read quite some threads facing similar issues. I think it would create great flexibility.

Finally I like to say I like the cards a lot. I don’t understand why this is not replacing the standard history graph in Lovelace!

Ildar_Gabdullin · January 3, 2021, 6:27pm

For deep serious analysis some people prefer to use a software like Grafana with it’s rich tools.

Ih8rain2 · January 3, 2021, 6:40pm

I have tried that too but I found it too complicated and I couldnt get it going unfortunately.

Ildar_Gabdullin · January 3, 2021, 7:01pm

~~Note that by default the database is purged every 24 days~~. Probably the default DB engine is not good for longer periods

Ih8rain2 · January 3, 2021, 7:06pm

24 days in itself is enough. I would aggregate the data like its done in the utility meter.

Since we are talking… Do you know how the grouped_by: interval works. I can’t find any example.

Ildar_Gabdullin · January 3, 2021, 10:12pm

My mistake. By default DB is purged every night and keeps data for 10 days.

grashugger · January 4, 2021, 12:19pm

Would you mind sharing your configuration for this? I like the look.

grashugger · January 4, 2021, 1:13pm

I believe I’ve just recreated it:

climate_graph

sensors.yaml

- platform: template
  sensors:
    # To recreate default HA climate card
    heating_from_temp:
      friendly_name: Heating status
      device_class: temperature
      value_template: >-
        {% if states('sensor.toon_room_temp')|float < states('sensor.toon_room_temp_setpoint')|float %}
          {{ states('sensor.toon_room_temp') }}
        {% else %}
          0
        {% endif %}

Lovelace:

entities:
  - sensor.toon_room_temp
  - entity: sensor.heating_from_temp
    color: green
    show_line: false
    show_points: false
    show_legend: false
    smoothing: false
  - entity: sensor.toon_room_temp_setpoint
    color: '#039BE5'
    show_legend: false
    show_state: true
    smoothing: false
    show_fill: false
font_size: 75
name: Keuken
lower_bound: 17
hours_to_show: 4
line_width: 3
points_per_hour: 60
type: 'custom:mini-graph-card'
show:
  extrema: true
  average: true
  state: true
color_thresholds:
  - color: '#039BE5'
    value: 15
  - color: '#0da035'
    value: 17
  - color: '#e0b400'
    value: 19
  - color: '#e45e65'
    value: 21

edit: make float in temperature comparison, otherwise it compares the length of the string.

darknebula · January 4, 2021, 10:07pm

Is it possible to change the time of day that the group_by: Date data resets

The reason being i’m pulling data from a weather sensor that shows rainfall since 9am, and it seems to display funny as a result

vnaysharma · January 5, 2021, 4:41am

Hi All,
I am getting the same error as OP:

Cannot read property 'length' of undefined
type: 'custom:mini-graph-card'

No matter how many times I do a clean install of HACS, i still get this error. Same thing is happening for the mini media player card, however other cards that I installed through HACS are running fine.

Anyone has any solution? I am pulling my hair out!

enry86cami · January 5, 2021, 8:51pm

Hi All,
I installed with HACS, but I can’t see the mini graph card in lovelace… Am I wrong anything?

Ildar_Gabdullin · January 6, 2021, 9:33pm

How do you expect to “see” the ‘mini-graph-card’ in Lovelace?
If you mean “It is not available for selection in the ‘Create new card’ window” - this is normal for ALL custom cards.
Just create a new card (it can be of ANY type) and type a new code starting with “type: ‘custom:mini-graph-card’” etc.

enry86cami · January 6, 2021, 9:41pm

Understood, thanks. I have to type a new code and works… Sorry I’m a newbie

sergio_pt · January 7, 2021, 1:15pm

I hope someone can help me with my problem

I am creating a dashboard with Sqare buttons, and would love to have a graph with temperature in some of them. But I am facing a problem where the graph itself is using very little space on the card.
I have played with the height parameter, however this is an absolute value, and from device to device it requires different values.

Is there a way to use some relative value?

This is my card:

And this is my config (please note that this is inside a grid card:

            - align_state: left
              hours_to_show: 6
              points_per_hour: 12            
              decimals: 1
              entities:
                - entity: sensor.temperature_sala
                  name: Livingroom
                  unit: °C
              #height: 334
              #font_size: 60
              #lower_bound_secondary: 0
              line_width: 5
              show:
                extrema: false
                fill: fade
                icon: true
                labels: false
                #labels_secondary: false
                name: true
              type: 'custom:mini-graph-card'

Ildar_Gabdullin · January 7, 2021, 8:09pm

BTW, the latest release brings the possibility to select the card from GUI:

b1nuzz · January 9, 2021, 4:16pm

Can anyone help me as to why this graph is sowing as a line graph and not a bar chart? Am I missing something obvious?

        - type: custom:mini-graph-card
            entities:
            - entity: sensor.daily_energy
              name: Daily Electricity
              show:
                graph: bar
                labels: true
                labels_secondary: true