Im Rahmen der Erstellung des Dashboards für meine Heizung bin ich an der custom:plotly-graph Card vorbeigekommen. Bisher habe ich die “custom:apexcharts-card” eingesetz, muss aber sagen, dass die custom:plotly-graph in Sachen Interaktion und auch Konfigurierbarkeit klar überlegen ist.
Um das rüber zu bringen, habe ich ein kleines animiertes GIF erstellt. Hier könnt ihr gut sehen, was mit der Karte in HA so Live möglich ist.
Hier noch der Code für die zu sehende Karte:
type: custom:plotly-graph
entities:
- entity: sensor.wolf_dhk_bm2_0x30_340011_vorlauftemperatur
name: Vorlauf
line:
color: rgb(255, 155, 48)
shape: spline
width: 2
fill: tozeroy
fillcolor: rgba(255, 155, 48, 0.3)
yaxis: y3
show_value: false
showlegend: false
- entity: sensor.wolf_tob_0x3_210004_ruecklauftemperatur
name: Rücklauf
line:
color: rgb(108, 138, 68)
shape: spline
width: 2
fill: tozeroy
fillcolor: rgba(108, 138, 68, 0.3)
yaxis: y3
show_value: false
showlegend: false
- entity: sensor.wolf_tob_0x3_210072_kesselsolltemperatur
line:
color: rgb(255, 80, 80)
width: 2
- entity: sensor.wolf_bm2_0x30_220103_aussentemperatur
line:
color: gray
width: 2
hours_to_show: 1d
refresh_interval: 10
layout:
height: 400
margin:
r: 25
t: 90
annotations:
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: rgb(255, 155, 48)'>"
+ Number(hass.states['sensor.wolf_dhk_bm2_0x30_340011_vorlauftemperatur'].state).toFixed(1) + "</span></span>°C<br>"
+ "</span><span style=''>Vorlauf</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.08
"y": 1.32
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: rgb(108, 138, 68)'>"
+ Number(hass.states['sensor.wolf_tob_0x3_210004_ruecklauftemperatur'].state).toFixed(1) + "</span></span>°C<br>"
+ "</span><span style=''>Rücklauf</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.32
"y": 1.32
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: rgb(255, 30, 30)'>"
+ Number(hass.states['sensor.wolf_tob_0x3_210072_kesselsolltemperatur'].state).toFixed(1) + "</span></span>°C<br>"
+ "</span><span style=''>Kesselsoll</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.56
"y": 1.32
showarrow: false
- text: |-
$fn ({hass}) =>
"<span style='font-size: 24px;'><span style='color: gray'>"
+ Number(hass.states['sensor.wolf_bm2_0x30_220103_aussentemperatur'].state).toFixed(1) + "</span></span>°C<br>"
+ "</span><span style=''>Außen</span><br>"
xref: x domain
yref: y domain
xanchor: center
yanchor: center
x: 0.9
"y": 1.32
showarrow: false
showlegend: false
xaxis:
rangeselector:
"y": 1.034
buttons:
- count: 1
step: hour
- count: 2
step: hour
- count: 4
step: hour
- count: 12
step: hour
- count: 1
step: day
- count: 2
step: day
- count: 7
step: day
Hier gibt es auch nochmals duzende verschiedenen Beispiel inkl. Code zu der Karte
Update nach Kommentar von Bernd:
Das Ganze funktioniert auf Grundlage der “normalen” HA Datenbank, also ohne influx oder Ähnliches.
