Lovelace: mini graph card

Share your Projects! Dashboards & Frontend
168

@kalkih So, first of all… thank you for this awesome card! I’m loving it. Ever since I saw some graph cards for Lovelace I’ve wanted to combine multiple entities and this one does it perfectly!

I’ve got a question though… I’m currently showing the values of two temperature sensors in a single graph. Now, I would like to use line_color_above, but applied to a single entity instead of the entire graph.

In the screenshot below you see the lines of the two sensors. The value shown (23.18 °C) is the value of the bottom of the two lines. The other room is above 25 °C (the upper line).

temperature

What I would like to do:

  • Change the color of a line to red when above 25 °C.
  • Change the color of a line to orange when above 21 °C.
  • Below 21 °C default color for a line.

But only applied to each line. So, the lower line would be orange and the upper line would be red in the above screenshot. What it does now (when using the below configuration) is making them both red.

Is that possible? Or is this not possible with the graph library used?

cards:
  - type: custom:mini-graph-card
    name: Temperature
    entities:
      - entity: sensor.living_room_temperature
        name: Living room
        show_state: true
      - entity: sensor.bedroom_temperature
        name: Bedroom
    points_per_hour: 6
    hours_to_show: 24
    hour24: true
    more_info: false
    line_color_above:
      - value: 21
        color: orange
      - value: 25
        color: red
    show:
      legend: false
      extrema: true
1 Like
169

Thanks for the detailed explanation @thmry,

The color thresholds are actually supposed to be checked and applied to the lines individually, so what you describe is most likely just a bug.
Would be great if you could post this in an issue on GitHub, and I’ll tr to figure out what the cause could be.

Thanks!

170

Hi @kalkih, many thanks for your amazing graph card.
I’m using it extensively.

There is however one graph that is not rendered correctly. I believe @Mariusthvdb also might have this issue.
This is the result when hovering over:
15
of below code:

  - type: custom:card-modder
    style:
      background-image: url("/local/custom-lovelace/cardbackK.png")
      background-repeat: no-repeat                                      
      background-size: 100% 100%
      border-radius: 12px
    card:
      type: custom:mini-graph-card
      entities: sensor.solar_energievandaag
      font_size: 75
      hours_to_show: 168
      labels: true
      line_color: '#2581ab'
      line_width: 2
      location_state: center
      more_info: false
      show:
        extrema: true

Any idea what might be wrong?

171

Hmmm…no idea at all actually. Is it just that one graph that is affected by the issue? Any errors in the browser dev console?

172

Just that one graph indeed. I can’t see errors in the dev console.
Could it be that, because it displays solar panel energy, there are no values for some time (sun down)?

173

Okay, possibly, but if the history contains “gaps” the graph would just render a horizontal line until the next available history entry.

I can’t recreate this so if you could do me a favor (if possible) and grab the sensor history and send it my way so I can debug this issue.

You can fetch the history manually by running the following bash script.

curl -X GET -H "Authorization: Bearer LONGLIVED_TOKEN” \
       -H "Content-Type: application/json" \
       http://localhost:8123/api/history/period/2019-02-02T00:00:00+02:00?end_time=2019-02-09T00%3A00%3A00%2B02%3A00&filter_entity_id=sensor.solar_energievandaag

You’ll need to create a long lived token in HA and replace “LONGLIVED_TOKEN” in the snippet above with the one you’ve generated. Then replace localhost/port to match your HA setup.

Thanks!

174

I just tested it again and does seem to work, not sure what happened yesterday. Just reporting here that it does work.

The first screenshot shows both lines above a threshold. The lower value is above the first threshold (orange) and higher value is already above the second threshold (red).

The second screenshot shows that only the higher value is above a threshold (red), because the other sensor hasn’t gone over the first threshold yet.

temperature-01 temperature-02

175

I wasn’t succesfull with curl command (kept getting errors, not so familiar with it), so I tried to get some data with the help of grafana. Pleae see below.
By the way, in the mean time I see a small blue stripe popping up:

48
481022×550 279 KB

|2019-02-10 13:00:00|1.20|
|2019-02-10 12:00:00|0.90|
|2019-02-10 11:00:00|0.50|
|2019-02-10 10:00:00|0.30|
|2019-02-10 09:00:00|0.10|
|2019-02-10 08:00:00|0|
|2019-02-10 07:00:00|-|
|2019-02-10 06:00:00|-|
|2019-02-10 05:00:00|-|
|2019-02-10 04:00:00|-|
|2019-02-10 03:00:00|-|
|2019-02-10 02:00:00|-|
|2019-02-10 01:00:00|-|
|2019-02-10 00:00:00|-|
|2019-02-09 23:00:00|-|
|2019-02-09 22:00:00|-|
|2019-02-09 21:00:00|-|
|2019-02-09 20:00:00|-|
|2019-02-09 19:00:00|-|
|2019-02-09 18:00:00|-|
|2019-02-09 17:00:00|-|
|2019-02-09 16:00:00|7.50|
|2019-02-09 15:00:00|7.20|
|2019-02-09 14:00:00|6.80|
|2019-02-09 13:00:00|6.00|
|2019-02-09 12:00:00|4.90|
|2019-02-09 11:00:00|3.80|
|2019-02-09 10:00:00|1.70|
|2019-02-09 09:00:00|0.50|
|2019-02-09 08:00:00|0|
|2019-02-09 07:00:00|-|
|2019-02-09 06:00:00|-|
|2019-02-09 05:00:00|-|
|2019-02-09 04:00:00|-|
|2019-02-09 03:00:00|-|
|2019-02-09 02:00:00|-|
|2019-02-09 01:00:00|-|
|2019-02-09 00:00:00|-|
|2019-02-08 23:00:00|-|
|2019-02-08 22:00:00|-|
|2019-02-08 21:00:00|-|
|2019-02-08 20:00:00|-|
|2019-02-08 19:00:00|-|
|2019-02-08 18:00:00|-|
|2019-02-08 17:00:00|-|
|2019-02-08 16:00:00|-|
|2019-02-08 15:00:00|2.20|
|2019-02-08 14:00:00|2.00|
|2019-02-08 13:00:00|1.90|
|2019-02-08 12:00:00|1.50|
|2019-02-08 11:00:00|1.10|
|2019-02-08 10:00:00|0.60|
|2019-02-08 09:00:00|0.30|
|2019-02-08 08:00:00|0.10|
|2019-02-08 07:00:00|0|
|2019-02-08 06:00:00|-|
|2019-02-08 05:00:00|-|
|2019-02-08 04:00:00|-|
|2019-02-08 03:00:00|-|
|2019-02-08 02:00:00|-|
|2019-02-08 01:00:00|-|
|2019-02-08 00:00:00|-|
|2019-02-07 23:00:00|-|
|2019-02-07 22:00:00|-|
|2019-02-07 21:00:00|-|
|2019-02-07 20:00:00|-|
|2019-02-07 19:00:00|-|
|2019-02-07 18:00:00|-|
|2019-02-07 17:00:00|-|
|2019-02-07 16:00:00|7.90|
|2019-02-07 15:00:00|7.80|
|2019-02-07 14:00:00|7.40|
|2019-02-07 13:00:00|6.60|
|2019-02-07 12:00:00|5.70|
|2019-02-07 11:00:00|4.60|
|2019-02-07 10:00:00|3.30|
|2019-02-07 09:00:00|1.40|
|2019-02-07 08:00:00|0.40|
|2019-02-07 07:00:00|0|
|2019-02-07 06:00:00|-|
|2019-02-07 05:00:00|-|
|2019-02-07 04:00:00|-|
|2019-02-07 03:00:00|-|
|2019-02-07 02:00:00|-|
|2019-02-07 01:00:00|-|
|2019-02-07 00:00:00|-|
|2019-02-06 23:00:00|-|
|2019-02-06 22:00:00|-|
|2019-02-06 21:00:00|-|
|2019-02-06 20:00:00|-|
|2019-02-06 19:00:00|-|
|2019-02-06 18:00:00|-|
|2019-02-06 17:00:00|-|
|2019-02-06 16:00:00|-|
|2019-02-06 15:00:00|1.80|
|2019-02-06 14:00:00|1.60|
|2019-02-06 13:00:00|1.40|
|2019-02-06 12:00:00|1.10|
|2019-02-06 11:00:00|0.70|
|2019-02-06 10:00:00|0.40|
|2019-02-06 09:00:00|0.20|
| --- | --- |
|2019-02-06 08:00:00|0|
|2019-02-06 07:00:00|-|
|2019-02-06 06:00:00|-|
|2019-02-06 05:00:00|-|
|2019-02-06 04:00:00|-|
|2019-02-06 03:00:00|-|
|2019-02-06 02:00:00|-|
|2019-02-06 01:00:00|-|
|2019-02-06 00:00:00|-|
|2019-02-05 23:00:00|-|
|2019-02-05 22:00:00|-|
|2019-02-05 21:00:00|-|
|2019-02-05 20:00:00|-|
|2019-02-05 19:00:00|-|
|2019-02-05 18:00:00|-|
|2019-02-05 17:00:00|-|
|2019-02-05 16:00:00|4.60|
|2019-02-05 15:00:00|4.50|
|2019-02-05 14:00:00|4.20|
|2019-02-05 13:00:00|3.20|
|2019-02-05 12:00:00|2.50|
|2019-02-05 11:00:00|1.80|
|2019-02-05 10:00:00|1.00|
|2019-02-05 09:00:00|0.30|
|2019-02-05 08:00:00|-|
|2019-02-05 07:00:00|0|
|2019-02-05 06:00:00|-|
|2019-02-05 05:00:00|-|
|2019-02-05 04:00:00|-|
|2019-02-05 03:00:00|-|
|2019-02-05 02:00:00|-|
|2019-02-05 01:00:00|-|
|2019-02-05 00:00:00|-|
|2019-02-04 23:00:00|-|
|2019-02-04 22:00:00|-|
|2019-02-04 21:00:00|-|
|2019-02-04 20:00:00|-|
|2019-02-04 19:00:00|-|
|2019-02-04 18:00:00|-|
|2019-02-04 17:00:00|-|
|2019-02-04 16:00:00|3.20|
|2019-02-04 15:00:00|3.10|
|2019-02-04 14:00:00|2.80|
|2019-02-04 13:00:00|2.50|
|2019-02-04 12:00:00|2.10|
|2019-02-04 11:00:00|1.70|
|2019-02-04 10:00:00|1.10|
|2019-02-04 09:00:00|0.40|
|2019-02-04 08:00:00|0.10|
|2019-02-04 07:00:00|0|
|2019-02-04 06:00:00|-|
|2019-02-04 05:00:00|-|
|2019-02-04 04:00:00|-|
|2019-02-04 03:00:00|-|
|2019-02-04 02:00:00|-|
|2019-02-04 01:00:00|-|
|2019-02-04 00:00:00|-|
|2019-02-03 23:00:00|-|
|2019-02-03 22:00:00|-|
|2019-02-03 21:00:00|-|
|2019-02-03 20:00:00|-|
|2019-02-03 19:00:00|-|
|2019-02-03 18:00:00|-|
|2019-02-03 17:00:00|-|
|2019-02-03 16:00:00|14.30|
|2019-02-03 15:00:00|14.20|
|2019-02-03 14:00:00|13.80|
|2019-02-03 13:00:00|13.00|
|2019-02-03 12:00:00|11.70|
|2019-02-03 11:00:00|9.00|
|2019-02-03 10:00:00|5.30|
|2019-02-03 09:00:00|2.60|
|2019-02-03 08:00:00|0.70|
|2019-02-03 07:00:00|0|
|2019-02-03 06:00:00|-|
|2019-02-03 05:00:00|-|
176

Ok, great, I actually also tried to recreate the issue yesterday, but wasn’t able to.
Let me know if it comes back.

Alright, thanks for the data, I guess the second column is the sensors state? The states reported as “-” could possibly be causing issues when computing te graph.
Can you confirm that the sensor sometimes reports the state “-”, I guess when it’s idle?

Also, is this a template sensor?

177

Alright, thanks for the data, I guess the second column is the sensors state? The states reported as “-” could possibly be causing issues when computing te graph.
Can you confirm that the sensor sometimes reports the state “-”, I guess when it’s idle?

Also, is this a template sensor?

The “-” are I suppose NULL values from the template sensor when there is no reply from the solarpanel converter.
Pls find below the template sensor config:

  - platform: command_line
    name: Solar_EnergieVandaag
    command: 'curl "http://xxx.xxx.x.xx/real_time_data.xml" 2>&1 | grep -E -m1 -o "<e-today>(.*)</e-today>" | sed -e "s,.*<e-today>\([^<]*\)</e-today>.*,\1,g"'
    unit_of_measurement: "kWh"
    scan_interval: 3600

Perhaps I should default it to zero when there is no response?

178

Ok, I see.

Yes if you’d change it out to zeros it would most likely work, would be great id you could try.

179

@Mariusthvdb, I don’t know, but maybe this information could be of interest to you.

I made the switch from the default SQLite database to MariaDB a few days ago, and accessing history data is now a lot faster and snappier.
Before, loading the logbook would sometimes take 30-60 seconds and other times not load at all, and this was after manually purging data older than 7 days. The logbook is still quite slow however, 3-5sec, but a nice improvement.

180

thanks. Ive done that already though, I use MariaDB like forever. Seems to work in the beginning, but Ive never been able to use the history or logbook options in the left hand menu without grinding the system to a hold.
Many people suffer from this, and no solution has been found as yet.

just this week Ive tried to change the recorder setup from an include domain sensor situation with excluding several sensors, to an exclude domain sensor setup and including sensors I want recorded. Took out about 400 sensors… still, no such luck in the history department.

181

Okay, sad to hear.
Possibly performance issues in the backend that manages the history?
I’m running HA on a pretty decent server, I guess that helps keeping the process from completely freezing.

182

Fixed!
Used a MySQL client to fill the NULL values with 0.0.
Now to get the template sensor to prevent the NULL values… :wink:
Thanks for your help and the amazing card!

50
501022×528 273 KB

183

That’s great!
Thank you.

184

@Mariusthvdb not sure if you still are using this card and is interested in this feature but I made some progress on dynamically changing line color, it’s not picture perfect but it’s working quite well.
hyperion_8123_lovelace_4%20(21)
Not sure if I should apply the gradient to the fill though, looks kinda weird.

4 Likes
185

I’m interested!! Would love this on my graphs for Speedtest. Kinda annoying when it drops below the threshold I have and the whole line changes to red.

186

I could need someone testing this, would you maybe like to help me test this?
Going to bed now, but I could send it to you tomorrow if’ you’d like to.

187

Sure. Send me a PM and I’ll see what I can do.

1 Like