Would anyone have an example of how to show a time in the header of a chart?
I have a sensor, which has a state of ie. 02:05 which is the last time there was a sucessful scrape of data from a webpage.
I’m having difficulty showing that in the header of my chart.
With the options I have currently set it is being displayed as 1. If the time was 05:54 the header is being displayed 5.
type: custom:apexcharts-card
graph_span: 30d
header:
standard_format: false
show: true
title: OilPal
show_states: true
colorize_states: true
- entity: sensor.oilpalmodemlastreading
name: Last Reading
show:
in_header: true
name_in_header: true
in_chart: false
nikop
October 27, 2022, 11:22pm
1866
As I was looking for an answer for using dynamically changing values for color_threshold for Nordpool-data, I struggled a bit to configure the custom:config-template-card to use dynamic values. The struggle for me was that I was first using too long variable names, they need to be shortish. So I hope this my lovelace card code sheds a little bit of light how to use these together:
- type: custom:config-template-card
variables:
MOVINGAVERAGE: >-
states['sensor.nordpool_filter_price_today_average_whole_day_7days_moving_average']
entities:
- ${MOVINGAVERAGE.entity_id}
card:
type: custom:apexcharts-card
graph_span: 24h
apex_config:
chart:
height: 170px
show:
last_updated: true
experimental:
color_threshold: true
header:
title: Electricity price today
show: true
show_states: true
colorize_states: true
span:
start: day
now:
show: true
label: Now
series:
- entity: sensor.nordpool_kwh_fi_eur_3_10_024
show:
extremas: true
in_header: raw
header_color_threshold: true
type: column
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
color_threshold:
- value: ${MOVINGAVERAGE.state * 75}
color: darkgreen
opacity: 1
- value: ${MOVINGAVERAGE.state * 100}
color: goldenrod
- value: ${MOVINGAVERAGE.state * 125}
color: darkred
1 Like
AleXSR700
October 28, 2022, 7:27am
1867
I’m trying to customize the name of each auto-entities generated series using config-template-card, but my attempts all failed.name: area_name('this.entity_id') or name: {{ area_name('this.entity_id') }}name: states['input_select.days_back_to_show'].state+'d'name.
Relevant code (to not clutter the thread too much):
type: custom:config-template-card
entities:
- input_select.days_back_to_show
variables:
span: states['input_select.days_back_to_show'].state+'d'
days: |
-states['input_select.days_back_to_show'].state+'d'+'1d'
name: area_name('this.entity_id')
card:
type: vertical-stack
cards:
- type: custom:auto-entities
sort:
method: friendly_name
filter:
include:
- entity_id: sensor.xiaomi_humidity_*
options:
name: ${name}
Also tried putting the template directly into the name field, but that failed also.
nikop
October 28, 2022, 11:52am
1868
As this thread is about ApecCharts card, I suggest you ask your config template card -specific question also in the “official” 100% Templatable Lovelace Configurations thread.
1 Like
@RomRider many thanks for your great work.
here one of my graph
type: custom:config-template-card
entities:
- sensor.a_b_line_voltage
- sensor.internal_temperature
- sensor.input_power
- sensor.sunrise
- sensor.sunset
- sensor.solar_noon
card:
type: custom:apexcharts-card
experimental:
color_threshold: true
header:
show: true
show_states: true
colorize_states: true
title: PV Power and Grid Voltage Today
graph_span: 14h
span:
start: day
offset: +5.5h
apex_config:
annotations:
position: back
yaxis:
- 'y': 253
strokeDashArray: 2
borderColor: '#FFFF00'
borderWidth: 0.5
label:
borderColor: '#ADFF2F'
borderWidth: 0
borderRadius: 0
text: 253V
textAnchor: center
position: right
offsetX: -35
offsetY: 2
style:
background: transparent
color: '#FFFF00'
fontSize: 10px
fontWeight: 10
fontFamily: Segoe UI
cssClass: apexcharts-xaxis-annotation-label
- 'y': 264.5
strokeDashArray: 2
borderColor: '#FF4500'
borderWidth: 0.5
label:
borderColor: '#ADFF2F'
borderWidth: 0
borderRadius: 0
text: 264.5V
textAnchor: center
position: right
offsetX: -35
offsetY: 1
style:
background: transparent
color: '#FF8C00'
fontSize: 10px
fontWeight: 10
fontFamily: Segoe UI
cssClass: apexcharts-xaxis-annotation-label
xaxis:
- x: ${new Date(states['sensor.sunrise'].state).getTime()}
strokeDashArray: 0.5
label:
text: ☀️
orientation: orizontal
borderWidth: 0
style:
background: '#0000'
fontSize: 15px
offsetY: 135
- x: ${new Date(states['sensor.solar_noon'].state).getTime()}
strokeDashArray: 0.5
borderColor: trasparent
label:
text: ☀️
orientation: orizontal
borderWidth: 0
style:
background: '#0000'
fontSize: 15px
offsetY: 0
- x: ${new Date(states['sensor.sunset'].state).getTime()}
strokeDashArray: 0.5
label:
text: 🌙
orientation: orizontal
borderWidth: 0
style:
color: '#fff'
fontSize: 15px
background: '#0000'
offsetY: 135
chart:
type: area
stroke:
show: true
dataLabels:
enabled: true
legend:
show: false
grid:
show: false
yaxis:
- seriesName: 1
show: true
forceNiceScale: true
opposite: true
decimalsInFloat: 0
- seriesName: 2
show: true
forceNiceScale: true
opposite: false
decimalsInFloat: 0
- seriesName: 3
show: false
forceNiceScale: true
opposite: false
decimalsInFloat: 0
- seriesName: 4
show: false
forceNiceScale: true
opposite: false
decimalsInFloat: 0
all_series_config:
stroke_width: 1
group_by:
func: last
duration: 5m
curve: smooth
type: area
series:
- entity: sensor.a_b_line_voltage
color: white
extend_to: now
name: Grid V
unit: V
float_precision: 2
group_by:
func: last
show:
in_header: true
in_chart: true
datalabels: false
stroke_width: 1
color_threshold:
- value: 0
color: white
opacity: 1
- value: 253
color: white
opacity: 0
- entity: sensor.input_power
color: green
extend_to: now
name: PV Power
transform: return x / 1000;
unit: kW
float_precision: 2
show:
in_header: true
in_chart: true
datalabels: false
color_threshold:
- value: 0
color: green
opacity: 0.5
- value: 1.5
color: limegreen
opacity: 0.4
- value: 2.5
color: lightgreen
opacity: 0.3
- value: 3.5
color: springgreen
opacity: 0.2
- entity: sensor.internal_temperature
color: red
extend_to: now
name: Inverter Temp.
unit: °C
float_precision: 2
fill_raw: last
show:
extremas: max+time
in_header: true
in_chart: false
datalabels: false
AleXSR700
October 29, 2022, 8:21pm
1871
I am having trouble with this.entity_id and do not know if it is an apexcharts-card or config-template-card problem. this.entity_id , maybe you would take a look at it?
Would someone please help me out?
I am trying to define the name per series and the series is created using auto-entities.
But I think this is a config-template-card issue.
type: custom:config-template-card
entities:
- input_datetime.*
- sensor.xiaomi_humidity*
card:
type: vertical-stack
cards:
- type: custom:auto-entities
sort:
method: friendly_name
filter:
include:
- entity_id: sensor.xiaomi_humidity_*
options:
nam…
David_Nagy
October 29, 2022, 10:18pm
1872
Thanks again for your answer, however, I managed to recreate the history card in apex.
It needed some helper and some statistic integration, but it works.
- type: custom:config-template-card
variables:
min_temp: parseFloat(states['sensor.six_hourly_min_temperature_living_room'].state)-0.5
max_temp: parseFloat(states['sensor.six_hourly_max_temperature_living_room'].state)+0.5
entities:
- sensor.six_hourly_min_temperature_living_room
- sensor.six_hourly_max_temperature_living_room
card:
type: custom:apexcharts-card
graph_span: 6h
header:
show: true
title: Living Room
show_states: true
colorize_states: true
yaxis: # only 1 yaxis, no need for id or yaxis_id
- min: ${min_temp}
max: ${max_temp}
apex_config:
tickAmount: 4
series:
- entity: climate.thermostat_living_room
attribute: current_temperature
type: line
stroke_width: 2
name: Living Room Temperature
group_by:
func: max
duration: 5min
- entity: climate.thermostat_living_room
attribute: temperature
type: line
stroke_width: 2
name: Target Temperature
group_by:
func: max
duration: 5min
- entity: sensor.hvac_mode_living_room
type: column
group_by:
func: max
duration: 5min
show:
legend_value: false
in_header: false
apex_config:
legend: { show: false }
#For getting the heating mode(red bars)
- name: "HVAC Mode Living Room"
state: >-
{% if is_state_attr("climate.thermostat_living_room","hvac_action","heating") %}
{{state_attr("climate.thermostat_living_room","current_temperature")}}
{% else %}
{{ 0 }}
{% endif %}
# For min max y axis value:
- name: "Max Temperature Living Room"
state: >-
{{ [state_attr("climate.thermostat_living_room","current_temperature"),
state_attr("climate.thermostat_living_room","temperature")]|max}}
- name: "Min Temperature Living Room"
state: >-
{{ [state_attr("climate.thermostat_living_room","current_temperature"),
state_attr("climate.thermostat_living_room","temperature")]|min}}
#Rolling min max for 6 hour
- platform: statistics
name: "Six Hourly Max Temperature Living Room"
entity_id: sensor.max_temperature_living_room
state_characteristic: value_max
max_age:
hours: 6
- platform: statistics
name: "Six Hourly Min Temperature Living Room"
entity_id: sensor.min_temperature_living_room
state_characteristic: value_min
max_age:
hours: 6
3 Likes
hi
- trigger:
- platform: time_pattern
hours: /12
minutes: 1
seconds: 5
sensor:
- name: cop 12 hourly vs temp
unit_of_measurement: cop, °C
state: >
{{ (states('sensor.cop_12_hourly')|float(0))}}, {{ (states('sensor.average_temp_last_12hrs')|float(0)) }}
and my try:
type: custom:apexcharts-card
chart_type: scatter
apex_config:
xaxis: numeric
series:
- entity: sensor.cop_12_hourly_vs_temp
data_generator: |
???
xaxis: cop
yaxis: °C
How do I format this properly, as how to config xaxis and data_generator?
hi,
how can I get a chart to display 2 sensor values against each other, as in xy. I guess it’s called scatter chart. I only find the possibility to have date/time on the x axis. I would like to monitor my heatpump efficiency (COP) at various outside temperatures and get a chart that looks somewhat like these:
[Screenshot 2022-10-25 at 16-56-16 Field Assessment of Cold Climate Air Source Heat Pumps - 1_700.pdf]
[Heat-pump-coefficient-of-performance-COP-as-a-function-of-ambient-outdoor-tempera…
lennardw
October 30, 2022, 3:26pm
1874
Hi,
I have been fiddling for a few weeks now trying to figure it out myself, but I really can’t get it working. Can anyone please help me?
I consolidated the sensors in one template sensor:
I want to get a bar-graph that puts these items next to each other (preferably auto-scaled, starting with 0,00, so it has some ‘body’). If at all possible, it would also be nice if it would show the ‘hour’ of the given value. I haven’t managed to get that working too.
So suppose it’s 13:30 now, so the ‘next hour’ starts at ‘14:00’, it would be nice if it said so.
sorry I can’t help with your specific goal. Did you look at alternatives? For me the nordpool custom component works well, with a template for the additional cost of the provider and up to 35 hours in advance.
1 Like
Gussir
October 30, 2022, 6:33pm
1876
Hello, anyone knows if “dots” as series type is or will be supported?
nikla
October 31, 2022, 7:35pm
1877
You have done what I have look for the last few weeks. Looks really good.
/Niklas
tvds
November 1, 2022, 8:14am
1878
First of all, your card is absolutely great! Many thanks for all the hard work
But I would like to have the fill faded like this …
Is there an easy way to do this?
lennardw
November 1, 2022, 4:00pm
1879
Thanks for looking anyway
XeleX
November 1, 2022, 4:04pm
1880
It looks great! Could you please share the configuration for apexchart?
Yes, it is possible. Mine is very soft but if you look closely it is gradient
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
inverseColors: false
opacityFrom: 0.3
opacityTo: 0
stops:
- 0
3 Likes
edozat1
November 1, 2022, 7:38pm
1882
Solved by changing the state_class from total_increasing to total
tvds
November 1, 2022, 9:07pm
1883
Many thanks! That did the trick
joriws
November 1, 2022, 9:28pm
1884
This made it work for me, I created two const but maybe one could have been created live on main return
data_generator: |
const today = entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]]
});
const tomor = entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]]
});
return ([...today, ...tomor])
joriws
November 1, 2022, 9:29pm
1885
And the output after experimenting the fix…
!