Tonkin
(Rune Bay)
September 5, 2023, 3:22pm
1
I want to highlight the hours with the lowest prices for the next days to plan EV charging. I have calculated the lowest price based of remaining battery (%), battery capacity (74kwh) and my charger efficency (11kw), but in custom:apexcharts-card I can only set the values as hard coded integers.
type: custom:apexcharts-card
apex_config:
chart:
height: 400px
experimental:
color_threshold: true
graph_span: 24h
header:
title: Elpriser pr. time (kr/kWh)
show: true
span:
start: hour
offset: '-2h'
now:
show: true
label: Nu
yaxis:
- min: 0.75
apex_config:
tickAmount: 2
series:
- entity: sensor.elspotpris
type: column
data_generator: |
var tt = 1;
var today = entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(),
entity.attributes.raw_today[index]["price"] * 1];
});
if (entity.attributes.tomorrow_valid) {
var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
});
var data = today.concat(tomorrow);
} else {
var data = today
}
return data;
float_precision: 2
color_threshold:
- value: 0
color: green
- value: 2.04
color: red
Best regards
/Tonkin
1 Like
complex1
(Frank)
September 6, 2023, 3:57pm
2
To achieve what you want, I think you have to use the custom “Config Template Card” card and create a card something like this:
type: custom:config-template-card
variables:
- '"sensor.elspotpris"'
- <calculate the lowest price>
entities: ${vars[0]}
card:
type: custom:apexcharts-card
[...]
series:
- entity: ${vars[0]}
type: column
[...]
float_precision: 2
color_threshold:
- value: 0
color: green
- value: ${vars[1]}
color: red
dezito
(Dezito)
December 3, 2023, 12:17pm
3
Did u manage to get this to work
Tonkin
(Rune Bay)
December 3, 2023, 2:57pm
4
No! I had no luck with the suggested code.
M4tthijs
(M4tthijs)
January 25, 2024, 3:31pm
5
@Tonkin @dezito Had a similar problem, here’s my solution:
I managed this by creating four variables with a calculated threshold value for each color to show in the graph:
type: custom:config-template-card
variables:
- >-
(((states['sensor.tibber_highest_energy_price_today'].state -
states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 0) +
Number(states['sensor.tibber_lowest_energy_price_today'].state)
- >-
(((states['sensor.tibber_highest_energy_price_today'].state -
states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 1) +
Number(states['sensor.tibber_lowest_energy_price_today'].state)
- >-
(((states['sensor.tibber_highest_energy_price_today'].state -
states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 2) +
Number(states['sensor.tibber_lowest_energy_price_today'].state)
- >-
(((states['sensor.tibber_highest_energy_price_today'].state -
states['sensor.tibber_lowest_energy_price_today'].state) / 4) * 3) +
Number(states['sensor.tibber_lowest_energy_price_today'].state)
Then I was able to use them inside the custom:apexcharts-card :
series:
- entity: sensor.tibber_average_electricity_price_today
show:
in_header: false
stroke_width: 2
float_precision: 3
type: column
color_threshold:
- value: ${vars[0]}
color: '#42a047'
- value: ${vars[1]}
color: '#ffa600'
- value: ${vars[2]}
color: '#ff7100'
- value: ${vars[3]}
color: '#db4437'
result:
Placing apexcharts inside CTC:
either the graph is not updated real-time since a sensor is not declared as monitored;
or the whole card is redrawn every time the sensor is changed - otherwise.
Tonkin
(Rune Bay)
January 27, 2024, 7:36pm
7
I got it working with the following code! Thanks!!
type: custom:config-template-card
variables:
- '"sensor.elspotpris"'
- Number(states['sensor.smart_charge_target_price'].state)
- >-
String('Charging at ' + states['sensor.smart_charge_target_price'].state + '
kr/kWh')
entities: ${vars[0]}
card:
type: custom:apexcharts-card
apex_config:
chart:
height: 400px
experimental:
color_threshold: true
graph_span: 24h
header:
title: ${vars[2]}
show: true
span:
start: hour
offset: '-2h'
now:
show: true
label: Nu
yaxis:
- min: 0.75
apex_config:
tickAmount: 2
series:
- entity: ${vars[0]}
type: column
data_generator: |
var tt = 1;
var today = entity.attributes.raw_today.map((start, index) => {
return [new Date(start["hour"]).getTime(),
entity.attributes.raw_today[index]["price"] * 1];
});
if (entity.attributes.tomorrow_valid) {
var tomorrow = entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["hour"]).getTime(), entity.attributes.raw_tomorrow[index]["price"]];
});
var data = today.concat(tomorrow);
} else {
var data = today
}
return data;
float_precision: 2
color_threshold:
- value: 0
color: green
- value: ${vars[1]}
color: red
Hi,
can you please share the full code.
I dont understand:? you posted 2 codes for 2 diffrent cards?
Do you mind making a full instruction I am new in Home assistant. ( I have tibber and nordpol both installed)