Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
1608

I believe you indentation is wrong, try this:

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

That’s done it.

Thank you!

1610

A further question from me.
I’m measuring energy usage, using the utility meter function.
I have one card for showing me the past 7 days, where the data is grouped by date.
How do I get it to show me by month? So that I have 12 bars, one for each month?
Thanks

1611

I use this combination of config-template-card and mini-graph-card to generate this bar chart over time. The use of the config-template-card is only to create a dynamic title for the chart. And the use of the ‘state_map’ is only needed because the state value is text not numeric. Perhaps this will give you some ideas:

    - type: 'custom:config-template-card'
      variables:
        - states['sensor.air_quality_living_room'].state
      entities:
        - sensor.air_quality_living_room
      card:
        type: custom:mini-graph-card
        name: "${ states['sensor.air_quality_living_room'].attributes.room + ' updated (hh:mm:ss) ' + states['sensor.air_quality_living_room'].attributes.update_age_text + ' ago' }"
        icon: mdi:smog
        hours_to_show: 12
        labels: false
        entities:
          - sensor.air_quality_living_room
        aggregate_func: max
        points_per_hour: 8
        bar_spacing: 1
        font_size_header: 16
        upper_bound: 3
        lower_bound: 0
        show_legend: false
        state_map:
          # - value: "-1"
          #   label: ""
          # - value: "0"
          #   label: ""
          - value: "-1"
            label: Unit Sleeping
          - value: "1"
            label: Good
          - value: "2"
            label: Fair
          - value: "3"
            label: Poor
        show:
          points: false
          state: true
          legend: false
          graph: bar
          labels: false

aqi-bar
aqi-bar996×448 91.6 KB

1612

I think the max in Lovelace cards is 168 hours, any more then that and you have to use Grafana/influx or similar setups!

1613

Unfortunately you can’t do that, you can have the whole year of data showed, but not grouped by month.
You would end up having something like this:

image
image559×755 26.6 KB

2 Likes
1614

OK. Understood. Thanks.
Would you mind sharing your YAML for how you convert to euros? I would like to do this to GBP.
Thanks!

1615

My code is all available here:


You don’t need to convert from EUR to GPB since it’s just a number with a unit of measurement set to EUR.

It’s quite complicated my setup so you’ll need to dig the code to understand how the view integrate with templates and thresholds, but with some time and patience you’ll be able to get what you need out.

1 Like
1617

Hello, at the moment i am plotting current and target temp along with heating percentage in same plot.

image
image1054×535 67 KB

I want to add current and target temp value beside the legend. i know i can do this with config-template-card. I tried following code, but didnt work. can anyone point me to the right direction?

- type: 'custom:config-template-card'
  variables:
    current_temp: states['bedroom_temperature'].state
    heating: states['bedroom_heating'].state
    target_temp: states['target_temp_bedroom'].state
  entities:
    - sensor.bedroom_temperature
    - sensor.bedroom_heating
    - sensor.target_temp_bedroom
  card:
    type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.bedroom_temperature
        name: "${'Temp ' current_temp}"
        #name: Temp
      - entity: sensor.bedroom_heating
        name: Heating
        color: grey
        show_line: false
        show_points: false
        show_legend: true
        y_axis: secondary
      - entity: sensor.target_temp_bedroom
        name: Target
        show_line: true
        show_ponts: false
        show_fill: false
    name: BedRoom
    hours_to_show: 24
    group: false
    hour24: true
    line_width: 2
    points_per_hour: 10
    show:
      extrema: true
      icon: true
      labels: true
      labels_secondary: true
      name: true
1618

You are missing the “sensor” in the variables state and some issue in your template:

- type: 'custom:config-template-card'
  variables:
    current_temp: states['sensor.bedroom_temperature'].state ## Missing sensor
    heating: states['sensor.bedroom_heating'].state          ## Missing sensor
    target_temp: states['sensor.target_temp_bedroom'].state  ## Missing sensor
  entities:
    - sensor.bedroom_temperature
    - sensor.bedroom_heating
    - sensor.target_temp_bedroom
  card:
    type: 'custom:mini-graph-card'
    entities:
      - entity: sensor.bedroom_temperature
        name: "${'Temp ' + current_temp}" ### Missing +
        #name: Temp
      - entity: sensor.bedroom_heating
        name: Heating
        color: grey
        show_line: false
        show_points: false
        show_legend: true
        y_axis: secondary
      - entity: sensor.target_temp_bedroom
        name: Target
        show_line: true
        show_ponts: false
        show_fill: false
    name: BedRoom
    hours_to_show: 24
    group: false
    hour24: true
    line_width: 2
    points_per_hour: 10
    show:
      extrema: true
      icon: true
      labels: true
      labels_secondary: true
      name: true
1 Like
1619

thanks a lot, its perfect now.
image

1 Like
1620

Hi fellow mini-graph-card users :wave:

I’m trying to help @kalkih with this card, and we’re evaluating the possibility of using an external library to build the graphs. We think that it would give you (and us) a lot more possibilities.
You can see some of the examples of what you could build here :rocket:

And just a screenshot below:
image

That would come with a lot of breaking change and some feature loss, at least at the beginning (stuff like state_map or color_threshold for eg would probably be missing initially), but would bring a lot more possibilities to this card in the future (zooming, all kinds of charts, unlimited number of axis, displaying axis, etc
).

Before we start to try to integrate it since it will require quite a lot of work, we’d like to understand if that is something in which you’d be interested in.

  • :tada: Yay, that would be great :tada:
  • :x: No, keep the card as it is :x:

0 voters

Thanks for your feedback :pray:

3 Likes
1621

I definetely like the look of it, but I would highly recommend to have it realeased only when the current options set can be replicated, this to avoid many many users having the card broken and asking for help :slight_smile: (specially the two you menthioned I would say)

Beside, not sure if this graph engine will allow, but maybe you can also introduce different style (such as “cake” for example that could be very useful) :slight_smile:

5 Likes
1622

It will be hard to replicate the same options with the same format I think, but we’ll see how it goes if we try it.

On your other question, you have other examples of what the graph library can do here

1623

This sounds nice and progress is good.

My suggestion is more on the practical side: Perhaps it would be good to use a new card name and see this really as a new card. You then freeze the development of this card but perhaps support a few new HA versions into the future in case of breaking changes in HA. That way, users can transition cards bit by bit instead of all at once. I don’t have that many cards but other users may.

7 Likes
1624

Good feedback, thanks. :+1:

1625

I vote for this.
My best wishes to developers!
Thank you very much for your efforts.

2 Likes
1626

New card name sounds best to me also.
Thanks for all the work.

1 Like
1627

agree. New card and possibly end of development/support for current one is the most practical choice

2 Likes
1628

So I made some progress last night, it’s a new card :slight_smile:

image
image1010×661 62 KB

I’ll publish something soon and open a new thread :wink:

15 Likes