(voor Nederlandse HA gebruikers) Graph for Central heating system monitoring by sniffing the Opentherm Data with a OTWG interface

[deruiter]

After many, many hours tinkering, starting from zero knowledge I came up with this graph.
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!

Thank you for this example! AI was not able to help me get 3 graphs on one display... Stacked graphs with more than one y axis #430

zoomed in on 'Central Heating System Hot Water use'

type: custom:plotly-graph
title: Centrale Verwarming
hours_to_show: 3

config:
  displayModeBar: false

layout:
  height: 750
  dragmode: false
  legend:
    orientation: h
    "y": -0.1
    x: 0.5
    xanchor: center
    itemsizing: constant
    font:
      size: 12

  margin:
    t: 0
    l: 80
    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">CV</span>
      - <span style="color:blue">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

  - 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

  - 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

# Entiteiten voor het middelste domain Y2
  - entity: sensor.opentherm_gateway_otgw_otgw_room_temperature
    name: Kamer Temp
    line:
      color: magenta
      width: 2
    show_value: true
    yaxis: y2

  - entity: sensor.opentherm_gateway_otgw_otgw_room_setpoint
    name: Kamer Setpoint
    line:
      color: yellow
      width: 2
      dash: dot
    show_value: true
    yaxis: y2

# Entiteiten voor het onderste domain Y1
  - entity: sensor.opentherm_gateway_otgw_otgw_relative_modulation_level
    name: Modulatie %
    yaxis: y1
    line:
      color: cyan
      width: 1

  - entity: sensor.opentherm_gateway_otgw_otgw_boiler_flow_water_temperature
    name: AANVOER Temp
    yaxis: y1
    line:
      color: orangered
      width: 1

  - entity: sensor.opentherm_gateway_otgw_otgw_control_setpoint
    name: Control Setpoint
    yaxis: y1
    line:
      color: silver
      width: 1

  - entity: sensor.opentherm_gateway_otgw_otgw_return_water_temperature
    name: RETOUR Temp
    yaxis: y1
    line:
      color: dodgerblue
      width: 1

# --- ---
view_layout:
  position: main