I am in a similar situation where I want to my column to display time in hours and minutes rather than in decimal format. I tried your code and no part of it changes the columns from decimal label to hours and minutes. How did you end up getting that change to display?
Hi I am trying to make an energy dashboard with a date selector however it seems like can’t offset across month boundaries?
Can offset 7 days to get to 1st April:
No data is shown when offsetting 8 days to the 31st of March:
As you can see data has been recorded for the 31st:
Is this expected behaviour?
Hi all… I’m trying to show on a card the same data shown on the hourly graph of the energy dashboard.
In particular I would love to show these data (in red squares):
but I’m unable to find the right function for a group by or statistics… Any help? In the energy dashboard I use “sensor.cumulative_monthly_energy”, and I configure the apexchart card as this:
- type: custom:apexcharts-card
graph_span: 18h
apex_config:
chart:
height: 165px
legend:
show: false
grid:
yaxis:
lines:
show: false
header:
show: true
title: Prelievo corrente
show_states: true
disable_actions: true
yaxis:
- show: false
series:
- entity: sensor.cumulative_monthly_energy
type: column
float_precision: 2
show:
extremas: true
name_in_header: false
in_header: false
group_by:
func: last
duration: 1h
start_with_last: true
- entity: sensor.consumo_energia_istantaneo
show:
in_chart: false
name_in_header: false
in_header: raw
The second series is to show the actual consumption value, live.
Any advice? I’ve tryed last, avg, sum, diff, delta, as funct, but nothig reproduce the same values of the energy dashboard…
Thanks!
I have the same question and could not find an answer: Is there a way to include a state in the “now”-marker?
I’d simply like to have the current state of the entity included. I’ve tried “{{ state(‘sensor.gosund2_watt’) }} also without the “state”, but always get " value.now.label is not a string” in return. Any ideas?
type: custom:apexcharts-card
graph_span: 48h
span:
start: day
offset: '-1d'
now:
show: true
color: '#999999'
label: now # <--- value should go here
header:
show: true
title: ''
show_states: true
colorize_states: true
floating: true
apex_config:
title:
show: false
series:
- entity: sensor.gosund2_watt
type: line
color: '#ff0000'
stroke_width: 2
curve: stepline
show:
name_in_header: false
in_brush: true
extremas: true
group_by:
func: raw
yaxis:
- show: true
min: 0
max: 800
decimals: 0
apex_config:
tickAmount: 8
1 Like
How can I make a proper data_generator of the sensor attibute state below?
The graph should show “validfrom” as the timestamp and “volume” as the value.
This is how far I came, but it does not seem to work:
data_generator: >-
return entity.attributes.hydra:member.map((start, index) => { return [new
Date(start["validfrom"]).getTime(),
entity.attributes.hydra:member[index]["volume"]]; });
State attributes of the sensor
hydra:member:
- "@id": /v1/utilizations/64656908711
"@type": Utilization
id: 64656908711
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-07T22:00:00+00:00"
validto: "2024-04-07T23:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64657863207
"@type": Utilization
id: 64657863207
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-07T23:00:00+00:00"
validto: "2024-04-08T00:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64658817701
"@type": Utilization
id: 64658817701
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T00:00:00+00:00"
validto: "2024-04-08T01:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64659702385
"@type": Utilization
id: 64659702385
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T01:00:00+00:00"
validto: "2024-04-08T02:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64660590229
"@type": Utilization
id: 64660590229
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T02:00:00+00:00"
validto: "2024-04-08T03:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64661481525
"@type": Utilization
id: 64661481525
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T03:00:00+00:00"
validto: "2024-04-08T04:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64662375981
"@type": Utilization
id: 64662375981
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T04:00:00+00:00"
validto: "2024-04-08T05:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64663273597
"@type": Utilization
id: 64663273597
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 203738
volume: 203738
percentage: 0.009588370099663734
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T05:00:00+00:00"
validto: "2024-04-08T06:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64664174373
"@type": Utilization
id: 64664174373
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 1446915
volume: 1446915
percentage: 0.06809412688016891
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T06:00:00+00:00"
validto: "2024-04-08T07:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64666015522
"@type": Utilization
id: 64666015522
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 3550966
volume: 3550966
percentage: 0.16711124777793884
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T07:00:00+00:00"
validto: "2024-04-08T08:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64667253776
"@type": Utilization
id: 64667253776
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 7319840
volume: 7319840
percentage: 0.3444717526435852
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T08:00:00+00:00"
validto: "2024-04-08T09:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64668164032
"@type": Utilization
id: 64668164032
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 10793753
volume: 10793753
percentage: 0.5079454779624939
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T09:00:00+00:00"
validto: "2024-04-08T10:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64669077448
"@type": Utilization
id: 64669077448
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 11511863
volume: 11511863
percentage: 0.5417295098304749
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T10:00:00+00:00"
validto: "2024-04-08T11:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64669994024
"@type": Utilization
id: 64669994024
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 9024932
volume: 9024932
percentage: 0.42469173669815063
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T11:00:00+00:00"
validto: "2024-04-08T12:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64670913760
"@type": Utilization
id: 64670913760
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 6175851
volume: 6175851
percentage: 0.2906154990196228
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T12:00:00+00:00"
validto: "2024-04-08T13:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64671836656
"@type": Utilization
id: 64671836656
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 5653102
volume: 5653102
percentage: 0.2660120129585266
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T13:00:00+00:00"
validto: "2024-04-08T14:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64672762712
"@type": Utilization
id: 64672762712
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 7324411
volume: 7324411
percentage: 0.3446510136127472
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T14:00:00+00:00"
validto: "2024-04-08T15:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64673691928
"@type": Utilization
id: 64673691928
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 7249623
volume: 7249623
percentage: 0.3411257565021515
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T15:00:00+00:00"
validto: "2024-04-08T16:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64674624304
"@type": Utilization
id: 64674624304
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 5476551
volume: 5476551
percentage: 0.25769075751304626
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T16:00:00+00:00"
validto: "2024-04-08T17:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64675559840
"@type": Utilization
id: 64675559840
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 1945323
volume: 1945323
percentage: 0.09153279662132263
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T17:00:00+00:00"
validto: "2024-04-08T18:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64676498536
"@type": Utilization
id: 64676498536
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 146292
volume: 146292
percentage: 0.006883342284709215
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T18:00:00+00:00"
validto: "2024-04-08T19:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64677440392
"@type": Utilization
id: 64677440392
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T19:00:00+00:00"
validto: "2024-04-08T20:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64678385408
"@type": Utilization
id: 64678385408
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T20:00:00+00:00"
validto: "2024-04-08T21:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
- "@id": /v1/utilizations/64679333584
"@type": Utilization
id: 64679333584
point: /v1/points/0
type: /v1/types/2
granularity: /v1/granularities/5
granularitytimezone: /v1/granularity_time_zones/0
activity: /v1/activities/1
classification: /v1/classifications/2
capacity: 0
volume: 0
percentage: 0
emission: 0
emissionfactor: 0
validfrom: "2024-04-08T21:00:00+00:00"
validto: "2024-04-08T22:00:00+00:00"
lastupdate: "2024-04-11T06:35:50+00:00"
friendly_name: ned_voorspelling_zon
Download the custom-template-card card and setup like this
type: custom:config-template-card
variables:
- states['sensor.gosund2_watt'].state
entities: sensor.gosund2_watt
card:
type: custom:apexcharts-card
graph_span: 48h
span:
start: day
offset: '-1d'
now:
show: true
color: '#999999'
label: ${vars[0]}
2 Likes
I like this Card and was able to make some progress with my project.
But there are 2 Problems where I’m struggling.
My sensors values are seconds. It was easy to convert them in hours. But (how) is it possible to convert them in a Timestamp (HH:mm:ss)?
Unfortunately, I have no idea at all about Java.
And is there a way to change the scaling of the Y-Axis?
I would like to have a uniform scale with a 2-Step (0, 2, 4, 6, 8, 10, …)
This is my Code:
type: custom:apexcharts-card
apex_config:
chart:
stacked: true
height: 250px
header:
show: true
show_states: true
colorize_states: true
graph_span: 7d
yaxis:
- min: 0
max: ~24
decimals: 0
all_series_config:
type: column
unit: Stunden
transform: return x /3600
color_list:
- '#ffa500'
- '#00bfff'
- '#00008b'
series:
- entity: input_number.sonnenschein_letzte_10_minuten
name: Sonnenschein
group_by:
func: sum
duration: 1d
- entity: sensor.tagesdauer_ohne_sonnenschein_1h_refresh
name: Tag
group_by:
func: last
duration: 1d
- entity: sensor.tagesdauer_nachtstunden_1h_refresh
name: Nacht
group_by:
func: max
duration: 1d
Thank you!
Hello there,
Is it possible to always display the 0 value on the y-axis? I have a graph where new energy prices come in every day, and sometimes there are negative values. The way the graph looks now, it’s odd that the columns seem to be floating. Using the ‘min: 0’ configuration doesn’t achieve this because the negative values are not displayed.
Perfect! Works like a charm. Thanks! 
Hello,
Can anyone say why it doesn’t show values of the last two sensors?
Sensor ”Yhteensä / kk” is a collector of sensor ”Yhteensä” and is cleared monthly. Further, ”Yhteensä” is a template sensor that sums sensors ”Kotona / kk” and ”Muualla / kk”. All the sensor values are shown below the chart.
Sorry, working on phone and wasn’t able to copy the code (formatting errors), therefore the screenshot:
It seems to have something to do with the statistics option, because the values are visible if I remove the option. But I want to have monthly values instead.
Never mind. I gave up and show the series as stacked so the sum now visible in that way.
However, the problem still is that it takes long time to see the updated sensor value in the Apexchart. I have forced the chart to update every 10s (I can see the spinning icon), but the sensor values are not just updated. Currently I have waited 10 minutes it to update the new values. If I click the sensor value in the header, HA history graph pops up and shows the correct value. Why doesn’t the Apexchart?
edit. It took 40 minutes to update the value to the chart. What could be are a reason for this? So it would seem like the sensor values are updated only once per 40 minutes to the chart, not after every value update as I would interpret it from the docs.
In the last Days I made a bit Progress.
I have found the way to set the Data Label Position.
Unfortunately I can only set the Position for all.
Is there a way how I can set a different Label-Position for each Entity?
I want the Labels of the dark Blue Bars at the top.
How can i invert the values of the second y-axes?
Instead to go upwards 0 to 3.7 it should show 0 to -3.7
Ciao, can you share the complete code of your card?
I am using Tado too, so i want to check his status like you do…
Garzie in advance…
Versione 1 (originale)
Codice:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Temperatura e umidità
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: mdi:minus
tap_action:
action: call-service
service: counter.decrement
data: {}
target:
entity_id: counter.grafici_temperatura_ore
hold_action:
action: call-service
service: counter.reset
data: {}
target: {}
- type: template
icon: mdi:chart-box-outline
content: >-
{{ states('counter.grafici_temperatura_ore') }}
{% if states('counter.grafici_temperatura_ore') | int == 1 %} ora nei
grafici
{% else %} ore nei grafici
{% endif %}
tap_action:
action: more-info
entity: counter.grafici_temperatura_ore
- type: template
icon: mdi:plus
content: ''
tap_action:
action: call-service
service: counter.increment
data: {}
target:
entity_id: counter.grafici_temperatura_ore
double_tap_action:
action: none
hold_action:
action: call-service
service: counter.increment
data: {}
target:
entity_id: counter.grafici_temperatura_ore
alignment: center
- type: custom:config-template-card
entities:
- counter.grafici_temperatura_ore
card:
type: custom:apexcharts-card
update_interval: 1m
graph_span: ${{states['counter.grafici_temperatura_ore'].state+'h'}}
header:
show: true
title: Temperatura soggiorno
show_states: true
colorize_states: false
series:
- entity: sensor.grafico_riscaldamento_soggiorno_sta_riscaldando
name: Sta riscaldando
stroke_width: 0
type: column
color: '#F5B041'
opacity: 0.3
show:
in_header: false
legend_value: false
group_by:
func: avg
duration: 2m
- entity: sensor.tado_riscaldamento_soggiorno_temperature
name: Temp attuale
stroke_width: 3
type: area
color: '#f8e07d'
opacity: 0.25
unit: °C
show:
extremas: true
name_in_header: false
in_header: true
group_by:
func: avg
duration: 2m
- entity: climate.tado_riscaldamento_soggiorno
attribute: temperature
name: Temp desiderata
stroke_width: 1.5
type: line
color: '#CC3333'
opacity: 1
unit: °C
show:
extremas: false
in_header: false
group_by:
func: avg
duration: 2m
- type: custom:config-template-card
entities:
- counter.grafici_temperatura_ore
card:
type: custom:apexcharts-card
update_interval: 1m
graph_span: ${{states['counter.grafici_temperatura_ore'].state+'h'}}
header:
show: true
title: Umidità soggiorno
show_states: true
colorize_states: false
series:
- entity: sensor.tado_riscaldamento_soggiorno_humidity
name: Umidità
stroke_width: 3
type: area
color: '#7AB7FF'
opacity: 0.15
show:
extremas: true
name_in_header: false
in_header: true
Versione 2 (senza temperatura desiderata; non vedi il grafico colorato solo perché in questi giorni l’aria condizionata è spenta)
Codice:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Grafici
alignment: center
- type: custom:vertical-stack-in-card
cards:
- type: entities
entities:
- type: custom:slider-entity-row
entity: >-
input_number.ac_app_9_camera_ale_grafici_temperatura_e_umidita_numero_di_ore_da_mostrare
full_row: false
grow: true
name: Ore da mostrare nei grafici
state_color: false
show_header_toggle: false
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
padding-top: 22px;
}
- type: custom:config-template-card
entities:
- >-
input_number.ac_app_9_camera_ale_grafici_temperatura_e_umidita_numero_di_ore_da_mostrare
card:
type: custom:apexcharts-card
update_interval: 1m
graph_span: >-
${{states['input_number.ac_app_9_camera_ale_grafici_temperatura_e_umidita_numero_di_ore_da_mostrare'].state+'h'}}
header:
show: true
title: Temperatura
show_states: true
colorize_states: false
series:
- entity: sensor.ac_app_9_camera_ale_grafico_sta_raffrescando
name: Sta raffrescando
stroke_width: 0
type: area
color: '#F5B041'
opacity: 0.3
show:
in_header: false
legend_value: false
- entity: climate.ac_app_9_camera_ale_condizionatore
attribute: current_temperature
name: Temperatura
stroke_width: 2
type: area
color: '#f8e07d'
opacity: 0.25
unit: °C
fill_raw: last
show:
extremas: true
name_in_header: false
in_header: false
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
- type: custom:config-template-card
entities:
- >-
input_number.ac_app_9_camera_ale_grafici_temperatura_e_umidita_numero_di_ore_da_mostrare
card:
type: custom:apexcharts-card
update_interval: 1m
graph_span: >-
${{states['input_number.ac_app_9_camera_ale_grafici_temperatura_e_umidita_numero_di_ore_da_mostrare'].state+'h'}}
header:
show: true
title: Umidità
show_states: true
colorize_states: false
series:
- entity: climate.ac_app_9_camera_ale_condizionatore
attribute: current_humidity
name: Umidità
stroke_width: 2
type: area
color: '#7AB7FF'
unit: '%'
opacity: 0.15
fill_raw: last
show:
extremas: true
name_in_header: false
in_header: false
card_mod:
style: |
ha-card {
background: transparent;
border-style: none;
}
Versione 3 (quella che mi piace di più, ma ti sconsiglio di utilizzare perché purtroppo il creatore del tipo di grafico utilizzato non porterà avanti il progetto; non vedi il grafico colorato di verde solo perché l’aria condizionata è spenta in questi giorni)
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Grafici
alignment: center
- type: custom:history-explorer-card
cardName: Appartamento 9
graphs:
- type: line
title: Temperatura (verde = sta raffrescando)
entities:
- entity: sensor.ac_app_9_camera_andrea_grafico_temperatura_sta_raffrescando
name: sta raffrescando
color: RGBA(60,179,113,0.5)
fill: RGBA(60,179,113,0.5)
width: 0
process: |
( state > 0 ) ? state = Math.round(state*10)/10 : "unavailable"
- entity: sensor.temperatura_app_9_camera_andrea
name: temperatura
color: rgba(244, 209, 96, 1)
width: 2
fill: rgba(244, 209, 96, 0.2)
process: |
state = Math.round(state*10)/10
options:
showSamples: false
- type: line
title: Umidità (verde = sta raffrescando)
entities:
- entity: sensor.ac_app_9_camera_andrea_grafico_umidita_sta_raffrescando
name: sta raffrescando
color: RGBA(60,179,113,0.5)
fill: RGBA(60,179,113,0.5)
width: 0
process: |
( state > 0 ) ? state : "unavailable"
- entity: sensor.umidita_app_9_camera_andrea
name: umidità
color: rgba(122, 183, 255, 1)
width: 2
fill: rgba(122, 183, 255, 0.15)
process: |
state = Math.round(state)
options:
showSamples: false
showCurrentValues: true
combineSameUnits: true
refresh:
interval: 60
defaultTimeRange: 12h
defaultTimeOffset: 15m
header: hide
uiLayout:
toolbar: bottom
selector: hide
labelsVisible: false
labelAreaWidth: 35
tooltip:
showDuration: true
showUnavailable: true
legendVisible: false
lineMode: curves
uiColors:
buttons: rgba(0,0,0,0.05)
Le soluzioni 1 e 2 richiedono di creare un template sensor che ho dettagliato a lungo nei miei precedenti messaggi e che ti scrivo qua:
template:
#### GRAFICI RISCALDAMENTO (codice aggiunto il 10 gennaio 2023) E RAFFRESCAMENTO (codice aggiunto il 1 giugno 2023)
#### Sensori creati per avere la serie "Sta riscaldando / sta raffrescando" nei grafici relativi alla temperatura delle stanze. La logica è la seguente:
#### Ho creato un apex-chart card volto a mostrare il grafico del riscaldamento / raffrescamento in ogni stanza.
#### Il grafico ha tre serie:
#### 1) serie uno: temperatura attuale
#### 2) serie due: temperatura desiderata
#### 3) serie tre: sta riscaldando / sta raffrescando -> serire che colorara il grafico se tado sta riscaldando / l'aria condizionata sta raffrescando.
#### Per la serie tre ho dovuto creare dei sensori fittizi (i vari template sensor qui sotto creati) tali per cui
#### - quando il riscaldamento / aria condizionata è 0 -> il sensore non fornisce alcun valore (risultato ottenuto con la funzione availability, la quale disattiva il sensore [availabiliy = 0] quando tado non sta riscaldando / l'aria condizionata non sta raffrescando)
#### - quando il riscaldamento / aria condizionata è diverso da 0 -> fornisce il medesimo valore della temperatura attuale, cosicchè ho una serie che si sovrappone perfettamente alla temperatura attuale
- sensor:
- name: Grafico riscaldamento soggiorno - sta riscaldando
state: "{{ states('sensor.tado_riscaldamento_soggiorno_temperature') | float }}"
availability: "{{ states('sensor.tado_riscaldamento_soggiorno_heating') | int}}"
La soluzione 3 richiede il seguente template sensor:
template:
- sensor:
- name: ac - app 9 - camera Andrea - grafico temperatura - sta raffrescando
state: >
{% if is_state("climate.ac_app_9_camera_andrea_condizionatore","cool") -%}
{{ states("sensor.temperatura_app_9_camera_andrea") }}
{%- else -%}
0
{%- endif %}
- sensor:
- name: ac - app 9 - camera Andrea - grafico umidità - sta raffrescando
state: >
{% if is_state("climate.ac_app_9_camera_andrea_condizionatore","cool") -%}
{{ states("sensor.umidita_app_9_camera_andrea") }}
{%- else -%}
0
{%- endif %}
Naturalmente devi scaricare tutte le card HACS che vedi utilizzate nel codice
Ciao!
2 Likes
Grazie, can you tell me how you configure the counter?
Seems like a common want, but I haven’t found anything. Is there a way (seems like it would be possible in JS if nothing else, but way beyond my ability) to add thousands separator commas to an axis label? So 1000 2000 3000 4000 would show as 1,000 2,000 3,000 4,000, etc. on the axis.
1 Like
It’s a banal helper! You can create it through UI or through yaml… You can use an input number or a counter. It’s the same!
UI example:
Yaml example:
input_number:
# GRAFICO (numero di ore da mostrare nei grafici di temperatura e umidità)
riscaldamento_app_9_camera_andrea_ore_da_mostrare_nei_grafici:
name: riscaldamento - app 9 - camera Andrea - ore da mostrare nei grafici
icon: mdi:chart-areaspline
min: 1.0
max: 24.0
step: 1.0
unit_of_measurement: h
mode: slider
1 Like
I’m sorry if I missed it but, how do you make the chart as wide as the screen? No matter what I do it only takes up the same width.
Click the “pencil” in top right corner, the click pencil to the left, edit view, chose Panel view
If you want more cards in your view, you should either use Grid, or start with a vertical-stack
You use most likely Masonry-View
1 Like