After many, many hours tinkering, starting from zero knowledge I came up with this graph. I got the idea for this graph from here
I use a cheap OTGW (Opentherm) interface to monitor and or control my Remeha Calenta heating system.
I will add another version later…
But this is for me a great help to understand the behaviour of my heating system.
Note that you can use of course the buttons on top to get a more detailed view but also use the mouse scroll wheel!
I found this example! which helped me on the way… A.I. was not able to help me get 3 graphs on one display…
YAML code to paste in the Plotly Graph card configuration:
type: custom:plotly-graph
title: Centrale Verwarming
hours_to_show: 3
config:
displayModeBar: false
layout:
height: 750
dragmode: false
# De NIEUWE legenda voor de onderste grafiek
legend:
orientation: h
"y": -0.1
x: 0.5
xanchor: center
itemsizing: constant
font:
size: 12
# De NIEUWE legenda voor de middelste grafiek
legend2:
orientation: h
"y": 0.60 # Positie in het gat tussen Y1 en Y2
x: 0.5
xanchor: center
font:
size: 12
# marge voor de totale grafiek
margin:
t: 0
l: 90
r: 60
b: 10
grid:
rows: 3
columns: 1
roworder: bottom to top #zonder deze regel staan de x-axis ticks bovenaan
#-------------------------------------------------------------------------------
# --- X-AS ---
#-------------------------------------------------------------------------------
xaxis:
rangeselector:
visible: true
bgcolor: "#242"
font:
color: white
buttons:
- count: 1
label: 1h
step: hour
stepmode: backward
- count: 3
label: 3h
step: hour
stepmode: backward
- count: 6
label: 6h
step: hour
stepmode: backward
- count: 12
label: 12h
step: hour
stepmode: backward
- count: 1
label: 1d
step: day
stepmode: backward
#-------------------------------------------------------------------------------
# --- Y-ASSEN ---
#-------------------------------------------------------------------------------# bovenste domain:
yaxis3:
overlaying: y2 #zeer belangrijk!
visible: true
fixedrange: true
tickmode: array
tickvals:
- 1
- 2
- 3
ticktext:
- <span style="color:red">BRANDER</span>
- <span style="color:green">VERWARMING</span>
- <span style="color:blue">HEET WATER</span>
range:
- 0.5
- 3.5
# title: Status
domain: # 90-100%
- 0.92
- 1
side: left
showgrid: true
gridcolor: rgba(255,255,255,0.1)
# anchor: x
# middelste domain: temperatuur thermostaat en kamer temperatuur
yaxis2:
overlaying: y2 #zeer belangrijk!
visible: true
title: Temperatuur
side: left
fixedrange: true
range:
# de getallen achter de komma zorgen ervoor dat er een lijn zichtbaar is
- 15.95
- 21.05
tickmode: linear
dtick: 1
tickformat: .1f
titlefont:
#color: magenta
tickfont:
#color: magenta
domain: # 65-85%
- 0.60
- 0.90
showgrid: true
gridcolor: rgba(255,255,255,0.1)
# onderste domain - ROWORDER bepaald dus dat dit het onderste domain is
yaxis:
visible: true
title: Status
side: left
fixedrange: true
range:
- 0
- 100
showgrid: true
gridcolor: rgba(255,255,255,0.1)
domain: # 0-60% van het verticale beeld
- 0
- 0.56
#--- ENTITEITEN ---
# Entiteiten voor het bovenste domain Y3
entities:
- entity: binary_sensor.opentherm_gateway_otgw_otgw_flame
name: Brander
line:
color: red
width: 10
filters:
- resample: 1m
- map_y: "(y === 'on' || y === 'true') ? 1 : null"
yaxis: y3
showlegend: false
- entity: binary_sensor.opentherm_gateway_otgw_otgw_central_heating
name: Verwarming
line:
color: green
width: 10
filters:
- resample: 1m
- map_y: "(y === 'on' || y === 'true') ? 2 : null"
yaxis: y3
showlegend: false
- entity: binary_sensor.opentherm_gateway_otgw_otgw_domestic_hot_water
name: Heet water
line:
color: blue
width: 10
filters:
- resample: 1m
- map_y: "(y === 'on' || y === 'true') ? 3 : null"
yaxis: y3
showlegend: false
# Entiteiten voor het middelste domain Y2
- entity: sensor.opentherm_gateway_otgw_otgw_room_temperature
name: Gemeten kamer temperatuur
line:
color: magenta
width: 2
show_value: true
yaxis: y2
legend: legend2 # <--- Koppel aan de middelste legenda
- entity: sensor.opentherm_gateway_otgw_otgw_room_setpoint
name: Ingestelde temperatuur thermostaat
line:
color: yellow
width: 2
dash: dot
show_value: true
yaxis: y2
legend: legend2 # <--- Koppel aan de middelste legenda
# Entiteiten voor het onderste domain Y1
- entity: sensor.opentherm_gateway_otgw_otgw_boiler_flow_water_temperature
name: AANVOER temperatuur CV water
yaxis: y1
line:
color: orangered
width: 1
- entity: sensor.opentherm_gateway_otgw_otgw_return_water_temperature
name: RETOUR temperatuur CV water
yaxis: y1
line:
color: dodgerblue
width: 1
- entity: sensor.opentherm_gateway_otgw_otgw_control_setpoint
name: Gevraagde aanvoertemperatuur Thermostaat
yaxis: y1
line:
color: silver
width: 1
- entity: sensor.opentherm_gateway_otgw_otgw_relative_modulation_level
name: Modulatie percentage
yaxis: y1
line:
color: cyan
width: 1
# --- ---
view_layout:
position: main