Draw graph of a function stored in template

[Fjury]

Hi,

I like to draw the graph of a given function.

Currently this function is stored in a template. Two relevant dynamic values (tendency and level) are used from numeric helper.

The x-axis at 20°C i need to cross y at 0hours.
x: range 20°C -> -20°C
y: range 0h -> 3h

optional: show the current-line at the middle outside temperature from sensor helper

[dbuezas]

Good luck!

[Fjury]

What I did not now yesterday, plotly can calculate functions itself. So it's not essential to use a pre calculated function from template.

My code works, but I'm sure it could be shorter.
Does anyone have an idea how to shorten the outside temperature line in the lower entity? I don't think an fn: is necessary for this.
Maybe with $ex, or map. but I don't understand how to use....

This is not a heating curve for a water heating system, but for an electric heat storage underfloor heating system.

I would be very happy to receive suggestions for improving the Plotly code

type: custom:plotly-graph
refresh_interval: 10
raw_plotly_config: true
defaults:
  entity:
    fill: tozeroy
    line:
      width: 2
layout:
  title: Heizkurve
  showlegend: false
  margin:
    t: 35
    r: 35
    l: 35
    b: 35
  xaxis:
    type: number
    fixedrange: true
    range:
      - 20
      - -20
  yaxis:
    type: number
    fixedrange: true
    range:
      - 0
      - 3
entities:
  - entity: input_number.fussbodenheizung_niveau
    internal: true
    fn: $fn ({ ys }) => { window.niveau_ext = ys[ys.length-1]; }
  - entity: input_number.fusbodenheizung_neigung
    internal: true
    fn: $fn ({ ys }) => { window.neigung_ext = ys[ys.length-1]; }
  - entity: sensor.garten_multisensor_air_temperature
    internal: true
    fn: $fn ({ ys }) => { window.outtemp_ext = ys[ys.length-1]; }
  - entity: ''
    fn: |
      $fn ({ vars, state }) => {
        const x = []; 
        const y = []; 
        let neigung, niveau;
        neigung = window.neigung_ext * 1;
        niveau = window.niveau_ext * 1;
        for (let i = 0; i <= 40; i++) {
          x[i] = i-20;
          y[i] = (-11/21000*((i-20-niveau)*(i-20-niveau)))*(1+neigung)-229/4200*(i-20-niveau)+13/10;
        };
        vars.x = x;
        vars.y = y;
      };
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    line:
      shape: spline
      width: 3
      color: orange
  - entity: ''
    fn: |
      $fn ({ vars, state }) => {
        const x = []; 
        const y = []; 
        let outside;
        outside = window.outtemp_ext * 1;
        for (let i = 0; i <= 3; i++) {
          x[i] = outside;
          y[i] = i;
        };
        vars.x = x;
        vars.y = y;
      };
    x: $fn ({ vars }) => vars.x
    'y': $fn ({ vars }) => vars.y
    mode: lines
    line:
      width: 1
      dash: dot
      color: deepskyblue

[dbuezas]

Good work!

This is the best and shortest way I can think of:

type: custom:plotly-graph
refresh_interval: auto
hours_to_show: 1s
raw_plotly_config: true
defaults:
  entity:
    fill: tozeroy
    line:
      width: 2
layout:
  title: Heizkurve
  showlegend: false
  margin:
    t: 35
    r: 35
    l: 35
    b: 35
  xaxis:
    type: number
    fixedrange: true
    range:
      - 20
      - -20
  yaxis:
    type: number
    fixedrange: true
    range:
      - 0
      - 3
entities:
  - entity: input_number.fussbodenheizung_niveau
    internal: true
    fn: $ex vars.niveau = ys.at(-1)
  - entity: input_number.fusbodenheizung_neigung
    internal: true
    fn: $ex vars.neigung = ys.at(-1)
  - entity: ''
    x: "$ex Array.from({ length: 41 }).map((_,i) => i - 20)"
    y: |
      $ex Array.from({ length: 41 }).map((_,i) =>
        (-11/21000*((i-20-vars.niveau)(i-20-vars.niveau)))(1+vars.neigung)-229/4200*(i-20-vars.niveau)+13/10
      )
    line:
      shape: spline
      width: 3
      color: orange
  - entity: sensor.garten_multisensor_air_temperature
    x: 
      - $ex ys.at(-1)
      - $ex ys.at(-1)
    y: 
      - 0
      - 3
    mode: lines
    line:
      width: 1
      dash: dot
      color: deepskyblue

• 'refresh_interval: auto' # autoupdates when used entities change
• 'hours_to_show: 1s' # since you only use their last values, you may as well minimize requested data
• '$ex' is like '$fn' but the parameters and arrow are added as a prefix automatically. See available parameters here: https://github.com/dbuezas/lovelace-plotly-graph-card?tab=readme-ov-file#available-parameters