Heating Curve (Heizkurve) Visualization (similar to Viessmann App)

[kristian]

I have created a simple visualzation of a Heating Curve, based on a dynamic calculation with the common heating curve inputs (i.e. the setpoint, shift / slope of the heating curve and the min. / max. supply temperature of the heating system). My goal was to make the visualization similar to how the Viessmann ViCare app visualizes the heating curve:

Currently the following simplified foruma is used to calculate the heating curve:

24 + hc_shift + 2 * hc_slope * (room_setpoint - 20) - (0.1 + 0.9 * hc_slope) * (1.5 * (outdoor_temp - 20) + 0.01 * (outdoor_temp - 20) * (outdoor_temp - 20))

Depending on your heating system this formual needs to be replaced, e.g. with either the "classical" Viessmann formula:

room_setpoint + hc_shift - hc_slope * DAR * (1.4348 + 0.021 * DAR + 247.9 * 1e-6 * (DAR * DAR))

Note that DAR is calcualted by DAR = outdoor_temp - room_setpoint.

If you have a more modern Viessmann heating system, e.g. a heat pump, the calculation likely needs to be replaced with:

room_setpoint + hc_shift - hc_slope * DAR * (1.148987 + 0.021 * DAR + 247.9 * 1e-6 * (DAR * DAR)) + 5

Here is the YAML for the ploty:

type: custom:plotly-graph
raw_plotly_config: true
config:
  displayModeBar: false
  staticPlot: true
layout:
  showlegend: false
  margin:
    t: 0
    l: 50
    b: 80
  height: 285
  xaxis:
    title:
      text: Aussentemperatur
      standoff: 20
    tickvals:
      - 20
      - 10
      - 0
      - -10
      - -20
      - -30
    ticktext:
      - +20°
      - +10°
      - 0°
      - "-10°"
      - "-20°"
      - "-30°"
    range:
      - 20
      - -30
    autorange: true
    showline: false
    zeroline: false
    showgrid: true
    gridcolor: rgba(0,0,0,0.1)
    griddash: dash
  yaxis:
    title:
      text: Vorlauftemperatur
    rangemode: tozero
    showticklabels: false
    showline: false
    showgrid: false
    zeroline: false
    ticks: ""
entities:
  - entity: sensor.vitocal_200_s_raumtemperatur_soll_normal
    internal: true
  - entity: sensor.vitocal_200_s_raumtemperatur_soll_reduziert
    internal: true
  - entity: sensor.vitocal_200_s_heizkennlinie_niveau
    internal: true
  - entity: sensor.vitocal_200_s_heizkennlinie_neigung
    internal: true
  - entity: ""
    name: Heizkurve
    mode: lines+markers+text
    line:
      color: "#fa4316"
      width: 2
    marker:
      size: 28
      color: "#ffffff"
      line:
        color: "#fa4316"
        width: 2
    fn: |
      $fn ({ vars, hass }) => {
        const x = [], y = [];
        
        const day_night = 'day';
        const day_setpoint = parseFloat(hass.states["sensor.vitocal_200_s_raumtemperatur_soll_normal"].state); // tag soll
        const night_setpoint = parseFloat(hass.states["sensor.vitocal_200_s_raumtemperatur_soll_reduziert"].state); // nacht soll
        const hc_shift = parseFloat(hass.states["sensor.vitocal_200_s_heizkennlinie_niveau"].state); // niveau
        const hc_slope = parseFloat(hass.states["sensor.vitocal_200_s_heizkennlinie_neigung"].state); // steigung
        const supply_temp_min = 15; // vorlauf min.
        const supply_temp_max = 55; // vorlauf max.
        
        let room_setpoint;
        if (day_night == 'day') {
          room_setpoint = day_setpoint;
        } else {
          room_setpoint = night_setpoint;
        }

        let index = 0, outdoor_temp = 20;
        while (outdoor_temp >= -30) {
          x[index] = outdoor_temp;
          y[index] =
            24 + hc_shift + 2 * hc_slope * (room_setpoint - 20) -
            (0.1 + 0.9 * hc_slope) * (1.5 * (outdoor_temp - 20) + 0.01 * (outdoor_temp - 20) * (outdoor_temp - 20));
          if (y[index] < supply_temp_min) y[index] = supply_temp_min;
          if (y[index] > supply_temp_max) y[index] = supply_temp_max;
          y[index] = Math.round(y[index])

          index += 1;
          outdoor_temp -= 10;
        }

        vars.x = x;
        vars.y = y;
      };
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    text: $fn ({ vars }) => vars.y.map(v => `${v}°`)

Here a more advanced example, with the Viessmann Heat Pump formula in place, as well as an additional line displaying the current flow temperature (Vorlauftemperatur) for the current outside temperature. Please note: Your heating system likely averages the outside temperature over a certain period (3-4 hours mostly), so just taking the current outside temperature likely will yield a little different results than what your heating system uses:

type: custom:plotly-graph
raw_plotly_config: true
config:
  displayModeBar: false
  staticPlot: true
entities:
  - entity: sensor.vitocal_200_s_raumtemperatur_soll_normal
    internal: true
  - entity: sensor.vitocal_200_s_raumtemperatur_soll_reduziert
    internal: true
  - entity: sensor.vitocal_200_s_heizkennlinie_niveau
    internal: true
  - entity: sensor.vitocal_200_s_heizkennlinie_neigung
    internal: true
  - entity: ""
    internal: true
    fn: |
      $fn ({ vars, hass }) => {
        const x = [], y = [];
        
        vars.day_night = 'day';
        vars.day_setpoint = parseFloat(hass.states["sensor.vitocal_200_s_raumtemperatur_soll_normal"].state); // tag soll
        vars.night_setpoint = parseFloat(hass.states["sensor.vitocal_200_s_raumtemperatur_soll_reduziert"].state); // nacht soll
        vars.hc_shift = parseFloat(hass.states["sensor.vitocal_200_s_heizkennlinie_niveau"].state); // niveau
        vars.hc_slope = parseFloat(hass.states["sensor.vitocal_200_s_heizkennlinie_neigung"].state); // steigung
        vars.outdoor_temp = parseFloat(hass.states["sensor.vitocal_200_s_aussentemperatur"].state);
        vars.supply_temp_min = 15; // vorlauf min.
        vars.supply_temp_max = 55; // vorlauf max.
        
        if (vars.day_night == 'day') {
          vars.room_setpoint = vars.day_setpoint;
        } else {
          vars.room_setpoint = vars.night_setpoint;
        }

        vars.calcFlowTemp = (temp, round) => {
          let dar = temp - vars.room_setpoint;
          let flowTemp = vars.room_setpoint + vars.hc_shift - vars.hc_slope * dar *
            (1.148987 + 0.021 * dar + 247.9 * 1e-6 * (dar * dar)) + 5;

          if (flowTemp < vars.supply_temp_min) flowTemp = vars.supply_temp_min;
          if (flowTemp > vars.supply_temp_max) flowTemp = vars.supply_temp_max;
          return flowTemp.toFixed(round || 0)
        };
      };
  - entity: ""
    name: Heizkurve
    mode: lines+markers+text
    line:
      color: "#fa4316"
      width: 2
    marker:
      size: 28
      color: "#ffffff"
      line:
        color: "#fa4316"
        width: 2
    fn: |
      $fn ({ vars, hass }) => {
        const x = [], y = [];
        
        let index = 0, outdoor_temp = 20;
        while (outdoor_temp >= -30) {
          x[index] = outdoor_temp;
          y[index] = vars.calcFlowTemp(outdoor_temp);

          index += 1;
          outdoor_temp -= 10;
        }

        vars.x = x;
        vars.y = y;
      };
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    text: $fn ({ vars }) => vars.y.map(v => `${v}°`)
  - entity: ""
    name: Aktueller Punkt
    mode: markers+text
    marker:
      size: 16
      color: "#fa4316"
      symbol: "circle"
      line:
        color: "#ffffff"
        width: 2
    fn: |
      $fn ({ vars }) => {
        const flow = vars.calcFlowTemp(vars.outdoor_temp, 1);
        vars.x = [vars.outdoor_temp];
        vars.y = [flow];
        vars.text = [`${flow}°`];
      };
    x: $fn ({ vars }) => vars.x
    y: $fn ({ vars }) => vars.y
    text: $fn ({ vars }) => vars.text
    textposition: "top center"
  - entity: ""
    name: Aktuelle Linie
    mode: lines
    line:
      color: "#fa4316"
      width: 1
      dash: dot
    fn: |
      $fn ({ vars }) => {
        vars.x = [vars.outdoor_temp, vars.outdoor_temp];
        vars.y = [vars.calcFlowTemp(vars.outdoor_temp), 0];
      };
    x: $fn ({ vars }) => vars.x
    y: $fn ({ vars }) => vars.y
layout:
  showlegend: false
  margin:
    t: 0
    l: 50
    b: 80
  height: 285
  xaxis:
    title:
      text: Aussentemperatur
      standoff: 20
    tickvals: $fn ({ vars }) => [20, 10, 0, -10, -20, -30, vars.outdoor_temp]
    ticktext: |
      $fn ({ vars }) => ["+20°", "+10°", "0°", "-10°", "-20°", "-30°", `${Math.round(vars.outdoor_temp).toLocaleString('en', { signDisplay: 'exceptZero' })}°`]
    range:
      - 20
      - -30
    autorange: true
    showline: false
    zeroline: false
    showgrid: true
    gridcolor: rgba(0,0,0,0.1)
    griddash: dash
  yaxis:
    title:
      text: Vorlauftemperatur
    rangemode: tozero
    showticklabels: false
    showline: false
    showgrid: false
    zeroline: false
    ticks: ""

The expert example shows two heating curves (e.g. as ViCare adapts one of the curves automatically), so it shows the configured / fixed vs. the current heating curve. It also shows the shift / slope of both curves, as well as the current setpoint temperature as annotations:

type: custom:plotly-graph
raw_plotly_config: true
config:
  displayModeBar: false
  staticPlot: true
entities:
  - entity: sensor.vitocal_200_s_raumtemperatur_soll_normal
    internal: true
  - entity: sensor.vitocal_200_s_raumtemperatur_soll_reduziert
    internal: true
  - entity: sensor.vitocal_200_s_heizkennlinie_niveau
    internal: true
  - entity: sensor.vitocal_200_s_heizkennlinie_neigung
    internal: true
  - entity: sensor.vitocal_200_s_aussentemperatur
    internal: true
  - entity: ""
    internal: true
    fn: |
      $fn ({ vars, hass }) => {
        const x = [], y = [];
        
        vars.day_night = 'day';
        vars.day_setpoint = parseFloat(hass.states["sensor.vitocal_200_s_raumtemperatur_soll_normal"].state); // tag soll
        vars.night_setpoint = parseFloat(hass.states["sensor.vitocal_200_s_raumtemperatur_soll_reduziert"].state); // nacht soll
        vars.hc_shift = parseFloat(hass.states["sensor.vitocal_200_s_heizkennlinie_niveau"].state); // niveau
        vars.hc_slope = parseFloat(hass.states["sensor.vitocal_200_s_heizkennlinie_neigung"].state); // steigung
        vars.outdoor_temp = parseFloat(hass.states["sensor.vitocal_200_s_aussentemperatur"].state);
        vars.supply_temp_min = 15; // vorlauf min.
        vars.supply_temp_max = 55; // vorlauf max.

        vars.fix_hc_shift = 10;
        vars.fix_hc_slope = 0.4;
        
        if (vars.day_night == 'day') {
          vars.room_setpoint = vars.day_setpoint;
        } else {
          vars.room_setpoint = vars.night_setpoint;
        }

        vars.calcFlowTemp = (temp, { vars_override, round } = {}) => {
          const local_vars = Object.assign({}, vars, vars_override),
            dar = temp - local_vars.room_setpoint;
          let flowTemp = local_vars.room_setpoint + local_vars.hc_shift - local_vars.hc_slope * dar *
            (1.148987 + 0.021 * dar + 247.9 * 1e-6 * (dar * dar)) + 5;

          if (flowTemp < local_vars.supply_temp_min) flowTemp = local_vars.supply_temp_min;
          if (flowTemp > local_vars.supply_temp_max) flowTemp = local_vars.supply_temp_max;
          return flowTemp.toFixed(round || 0)
        };

        function formatFlowLabel(hc_shift, hc_slope) {
          return `${hc_shift.toLocaleString('de', { signDisplay: 'exceptZero' })}K°/${hc_slope.toLocaleString('de')}°`;
        }
        vars.label_current = formatFlowLabel(vars.hc_shift, vars.hc_slope);
        vars.label_fixed = formatFlowLabel(vars.fix_hc_shift, vars.fix_hc_slope);
      };
  - entity: ""
    name: Eingestellte Heizkurve
    mode: lines+markers+text
    line:
      color: "#0029a5"
      width: 2
    marker:
      size: 28
      color: "#ffffff"
      line:
        color: "#0029a5"
        width: 2
    fn: |
      $fn ({ vars, hass }) => {
        const x = [], y = [];
        
        let index = 0, outdoor_temp = 20;
        while (outdoor_temp >= -30) {
          x[index] = outdoor_temp;
          y[index] = vars.calcFlowTemp(outdoor_temp, { vars_override: {
              hc_shift: vars.fix_hc_shift,
              hc_slope: vars.fix_hc_slope
            }
          });

          index += 1;
          outdoor_temp -= 10;
        }

        vars.x = x;
        vars.y = y;

        vars.y_right_fixed = y[y.length - 1];
      };
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    text: $fn ({ vars }) => vars.y.map(v => `${v}°`)
  - entity: ""
    name: Heizkurve
    mode: lines+markers+text
    line:
      color: red
      width: 2
    marker:
      size: 28
      color: "#ffffff"
      line:
        color: red
        width: 2
    fn: |
      $fn ({ vars, hass }) => {
        const x = [], y = [];
        
        let index = 0, outdoor_temp = 20;
        while (outdoor_temp >= -30) {
          x[index] = outdoor_temp;
          y[index] = vars.calcFlowTemp(outdoor_temp);

          index += 1;
          outdoor_temp -= 10;
        }

        vars.x = x;
        vars.y = y;

        vars.y_right_current = y[y.length - 1];
      };
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    text: $fn ({ vars }) => vars.y.map(v => `${v}°`)
  - entity: ""
    name: Aktueller Punkt
    mode: markers+text
    marker:
      size: 16
      color: red
      symbol: circle
      line:
        color: "#ffffff"
        width: 2
    fn: |
      $fn ({ vars }) => {
        const flow = vars.calcFlowTemp(vars.outdoor_temp, { round: 1 });
        vars.x = [vars.outdoor_temp];
        vars.y = [flow];
        vars.text = [`${flow}°`];
      };
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
    text: $fn ({ vars }) => vars.text
    textposition: top center
    textfont:
      color: red
      weight: bold
  - entity: ""
    name: Aktuelle Linie
    mode: lines
    line:
      color: red
      width: 1
      dash: dot
    fn: |
      $fn ({ vars }) => {
        vars.x = [vars.outdoor_temp, vars.outdoor_temp];
        vars.y = [vars.calcFlowTemp(vars.outdoor_temp), 0];
      };
    x: $fn ({ vars }) => vars.x
    "y": $fn ({ vars }) => vars.y
layout:
  showlegend: false
  margin:
    t: 10
    l: 50
    r: 80
    b: 80
  height: 285
  xaxis:
    title:
      text: Aussentemperatur
      standoff: 20
    tickvals: $fn ({ vars }) => [20, 10, 0, -10, -20, -30, vars.outdoor_temp]
    ticktext: >
      $fn ({ vars }) => ["+20°", "+10°", "0°", "-10°", "-20°", "-30°",
      `${Math.round(vars.outdoor_temp).toLocaleString('de', { signDisplay:
      'exceptZero' })}°`]
    range:
      - 20
      - -30
    autorange: true
    showline: false
    zeroline: false
    showgrid: true
    gridcolor: rgba(0,0,0,0.1)
    griddash: dash
  yaxis:
    title:
      text: Vorlauftemperatur
    rangemode: tozero
    showticklabels: false
    showline: false
    showgrid: false
    zeroline: false
    ticks: ""
  annotations:
    - xref: paper
      x: 1.165
      xanchor: right
      yref: "y"
      "y": $fn ({ vars }) => vars.y_right_fixed
      showarrow: false
      font:
        size: 12
        color: "#0029a5"
      text: $fn ({ vars }) => vars.label_fixed
    - xref: paper
      x: 1.165
      xanchor: right
      yref: "y"
      "y": $fn ({ vars }) => vars.y_right_current
      showarrow: false
      font:
        size: 12
        color: red
      text: $fn ({ vars }) => vars.label_current
    - xref: paper
      x: 1.165
      xanchor: right
      yref: "y"
      "y": >-
        $fn ({ vars }) => Math.min(vars.y_right_current, vars.y_right_fixed) -
        10
      text: |
        $fn ({ vars }) => `Raum Soll:<br>${vars.room_setpoint}°C`
      showarrow: false
      font:
        color: black

[kristian]

Added a more advanced example, also showing the current flow temperature display.

[kristian]

Added one last "expert" example, showing two heating curves and the current slope / shift of both curves as annotations.