Lovelace: mini graph card

Share your Projects! Lovelace & Frontend
#1588

Any tips on how to get this graph right

image

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
#1589

How often is your sensor updated?

#1590

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?

#1591

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

  1. There is an array of values of some sensor (updated every XXX seconds/minutes).
  2. A usual LINE graph shows a curve reflecting every value (+ some interpolation dependingly on "scan_interval" & "points_per_hour" & "hours_to_show").
  3. 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".

1 Like
#1592

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!

#1593

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

#1594

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

#1595

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

#1596

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.

1 Like
#1597

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

#1598

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

#1599

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.

6 Likes
#1600

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

#1601

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!

1 Like
#1602

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

#1603

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.

#1604

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

#1605

I hope someone can help me with my problem :slight_smile:

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:
image

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'
#1606

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

изображение
изображение971×468 35.5 KB

2 Likes
#1607

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