Compare Outside temperature with Inside temperature after insulation

[parrel]

Hi,

I'm trying to create a graph that shows how the outside temperature affects the inside temperature of a room. The room was recently insulated and I would like to vizualize how that affects the temperature of the room (before and after insulation).

I created the following graph with markers.

YAML

type: custom:plotly-graph
title: Temperature Outside-Inside
entities:
- entity: sensor.kamer_mathijs_klimaat_temperature
  statistic: mean
  period: day
  internal: true
  fn: $fn ({ xs, ys, vars }) => { vars.inside = ys; vars.xs = xs; }
- entity: sensor.buiten_klimaat_temperature
  statistic: mean
  period: day
  internal: true
  fn: $fn ({ ys, vars }) => vars.outside = ys
- entity: ''
  x: $fn ({ vars }) => vars.outside
  y: $fn ({ vars }) => vars.inside
  mode: markers
hours_to_show: 2y
raw_plotly_config: true
ha_theme: true
layout:
margin:
  t: 10
  l: 70
  r: 0
  b: 70
height: 500
yaxis:
  title:
    text: Inside Temperature
xaxis:
  title:
    text: Outside Temperature

However I would like to create a trendline with the averages, e.g.:

When I change the mode: markers to mode: lines I get the following

What would be the best way to create a trendline based on this data? Thanks in advance

[dbuezas]

Oh, that's a super interesting experiment!
I suggest you:

• Sort the data using the x axis values using JavaScript
• Separate the data before/after datasets with a filter
• Plot each dataset as a different trace
• Add linear trend lines to each

I only have my phone at the moment so I can only guide you, let me know which bullet point I should give more detail about

[parrel]

Thanks, I was able to vizualize it a bit with your help, but the data in the graph is not 100% correct. We haven't had temperatures above 14 degrees after insulation but the graph suggests we did. I suspect the data is shifted and the date of the measurements does not match.

I'm having difficulties 'joining' the outside temperature and the inside temperature, with the key being the date of the measurement.

[dbuezas]

You're getting there! Sorting like this requires extra tricks, you need to first pair the data, then sort the pairs, then separate it back into a usable form

Something like this:

const pairs = vars.inside.ys
   .map((y,i)=> [y, vars.outside.ys[i], vars.outside.xs[i])
   .sort((a,b)=> a[0]-b[0])

const day =  Date("2023-12-01");
const pairsBefore = pairs.filter(([,,date])=> date <day)
const pairsAfter = pairs.filter( ..... > day);

const before = {xs: pairs.map(([x,y])=> x), ys: .....}
const after = ....

// Then put it inside vars and use it inside the two separate traces/entities 

I'm writing this in a phone so you'll have to connect the dots

[dbuezas]

To join the data, the index is usually enough when using statistics, but if it is not use the resample filter

[parrel]

Thanks a lot for the help!

YAML

type: custom:plotly-graph
title: Temperature Outside-Inside
entities:
  - entity: sensor.kamer_mathijs_klimaat_temperature
    statistic: mean
    period: day
    internal: true
    filters:
      - store_var: inside
  - entity: sensor.buiten_klimaat_temperature
    statistic: mean
    period: day
    internal: true
    filters:
      - store_var: outside
  - entity: ''
    internal: true
    filters:
      - fn: |
          ({vars}) => {
            const pairs = vars.inside.ys
              .map((y,i)=> [vars.outside.ys[i], y, vars.outside.xs[i]])
              .sort((a,b)=> a[0]-b[0]);
            const start_day = new Date("2022-07-01");
            const insulation_day = new Date("2023-11-02");
            const pairsBefore = pairs.filter(([,,date])=> (date >= start_day && date < insulation_day))
            const pairsAfter = pairs.filter(([,,date])=> date >= insulation_day);
            vars.before = {xs: pairsBefore.map(([x,y])=> x), ys: pairsBefore.map(([x,y])=> y)};
            vars.after = {xs: pairsAfter.map(([x,y])=> x), ys: pairsAfter.map(([x,y])=> y)};
          } 
  - entity: ''
    name: Before
    filters:
      - load_var: before
      - sliding_window_moving_average:
          window_size: 1
      - trendline: polynomial
      - store_var: before
    x: $fn ({ vars }) => vars.before.xs.map(x=>+x)
    'y': $fn ({ vars }) => vars.before.ys
  - entity: ''
    name: After
    filters:
      - load_var: after
      - sliding_window_moving_average:
          window_size: 1
      - trendline: polynomial
      - store_var: after
    x: $fn ({ vars }) => vars.after.xs.map(x=>+x)
    'y': $fn ({ vars }) => vars.after.ys
hours_to_show: 3y
raw_plotly_config: true
ha_theme: true
layout:
  margin:
    t: 10
    l: 70
    r: 0
    b: 70
  yaxis:
    title:
      text: Inside Temperature
  xaxis:
    title:
      text: Outside Temperature

Now I'll have to wait for more data.

[dbuezas]

Perfect 🎉 ! Does the plot start making sense?
You may want to show the raw data (not only the trend) too. You can set visible: legendonly so it is hidden by default

[dbuezas]

Did you just send me money? Thanks!! :)