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.

[Hamudulu]

Perfect, thats what I m looking for. Thanks for the code.
Do you have the same behavor that the graph only update when you modify the graph? Not on the fly when changing the parameter, niveau and curve?

[kristian]

Perfect, thats what I m looking for. Thanks for the code.

Do you have the same behavor that the graph only update when you modify the graph? Not on the fly when changing the parameter, niveau and curve?

Just put all paramters / entities that should update the graph as "internal: true", that will auto update the graph as soon as the entity changes.