Histogram view optimising

[thecem]

I Love this histogram!!

But the main graph is not aligned.

type: custom:plotly-graph
entities:
  - entity: sensor.hmip_sens_out_stho_temperature
    period: day
    internal: true
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: sensor.heizung_oil_consumption_in_energy
    filters:
      - resample: 1d
      - derivate: d
    internal: true
    fn: $fn ({ ys, vars }) => vars.oil = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.oil
    mode: markers
    name: points
    marker:
      color: rgb(102,0,0)
      size: 2
      opacity: 0.4
    type: scatter
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.oil
    name: density
    ncontours: 20
    colorscale: YlGnBu
    nbinsx: 20
    nbinsy: 20
    reversescale: true
    showscale: false
    line:
      color: null
    type: histogram2dcontour
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    name: x density
    marker:
      color: "rgb(40\t57\t143\t)"
    yaxis: y2
    opacity: 1
    type: histogram
  - entity: ''
    x: undefined
    'y': $fn ({ vars }) => vars.oil
    name: y density
    marker:
      color: "rgb(40\t57\t143\t)"
    xaxis: x2
    type: histogram
hours_to_show: 4800
title: >-
  $fn({getFromConfig})=>`Heating - Last ${getFromConfig('hours_to_show')/24}
  days`
raw_plotly_config: true
layout:
  margin:
    t: 10
    l: 70
    r: 0
    b: 70
  height: 400
  bargap: 0.1
  showlegend: false
  xaxis:
    title:
      text: Outside Temperature (°C)
    autorange: true
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  yaxis:
    title:
      text: Oil burned (kWh per day)
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  xaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false
  yaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false

[dbuezas]

🤔 Did you save the yaml and reloaded the page? maybe the plot froze somehow?

[dbuezas]

Here that yaml works as intended 😕

[thecem]

I reloaded every chart, restart FF and tried in edge, same result.
the rest seems to working:

but maybe the data is not syncronized in a timely manner...

[dbuezas]

Or increase the nbinsx to 40

[thecem]

something like this to get the trendline?

    filters:
      - fn: |
         ({ys, xs, vars}) => {
           return {xs: vars.temperaure, ys: vars.oil};
         }
      - trendline

[dbuezas]

Exactly. I think it should work. But it doesn't.
It is an ugly mess and doesn't really work well

  - entity: ''
    filters:
      - fn: |
          ({vars}) => {
            const xs = vars.temperature;
            const ys = vars.oil;
            const pairs = xs.map((x, i) => [x,ys[i]])
              .filter( ([x,y]) => Number.isFinite(x) && Number.isFinite(y)) // unavailables in the x axis break trendlines
              .sort((a,b)=>a[0]-b[0]); // the trendline filter expects the x axis to be sorted
            const r = {
              xs: pairs.map(([x,y])=>x),
              ys: pairs.map(([x,y])=>y),
            };
            console.log(r);
            return r;
          }
      - trendline
      - store_var: trend
    x: $fn ({ vars }) => vars.trend.xs.map(x=>+x) // the trendline made dates out of the x axis
    'y': $fn ({ vars }) => vars.trend.ys // and since this is a raw_plotly_config, we need to set x and y ourselves

The release is only a couple of days old and you already reached its limits it seems

[MarkoPaasila]

What does filter: i>0 do?

[dbuezas]

i is the index. filter: i>0 means remove the first data point (the one with index 0), so the left most value

[thecem]

Actual I get following error:

config

type: custom:plotly-graph
entities:
  - entity: sensor.at_yesterday
    statistic: mean
    period: day
    time_offset: '-1d'
    internal: true
    filters:
      - filter: i>0
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: sensor.gas_verbrauch_kwh
    statistic: state
    period: day
    name: Gas
    internal: true
    filters:
      - filter: i>0
      - derivate: d
    fn: $fn ({ ys, vars }) => vars.gas = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.gas
    mode: markers
    name: points
    marker:
      color: rgb(102,0,0)
      size: 3
      opacity: 0.4
    type: scatter
  - entity: ''
    line:
      shape: linear
      color: blue
    filters:
      - fn: |
          ({ys, xs, vars}) => {
            return {xs: vars.temperature, ys: vars.gas};
          }
      - trendline
  - entity: ''
    filters:
      - fn: |
          ({vars}) => {
            const xs = vars.temperature;
            const ys = vars.gas;
            const pairs = xs.map((x, i) => [x,ys[i]])
              .filter( ([x,y]) => Number.isFinite(x) && Number.isFinite(y)) // unavailables in the x axis break trendlines
              .sort((a,b)=>a[0]-b[0]); // the trendline filter expects the x axis to be sorted
            const r = {
              xs: pairs.map(([x,y])=>x),
              ys: pairs.map(([x,y])=>y),
            };
            console.log(r);
            return r;
          }
      - trendline
      - store_var: trend
    x: >-
      $fn ({ vars }) => vars.trend.xs.map(x=>+x) // the trendline made dates out
      of the x axis
    'y': >-
      $fn ({ vars }) => vars.trend.ys // and since this is a raw_plotly_config,
      we need to set x and y ourselves
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.gas
    name: density
    ncontours: 40
    colorscale: YlGnBu
    nbinsx: 15
    nbinsy: 15
    reversescale: true
    showscale: false
    line:
      color: lightgray
    type: histogram2dcontour
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    name: x density
    texttemplate: '%{x:0.0f}'
    marker:
      color: "rgb(40\t57\t143\t)"
    yaxis: y2
    opacity: 1
    type: histogram
  - entity: ''
    x: undefined
    'y': $fn ({ vars }) => vars.gas
    name: y density
    texttemplate: '%{y:0.0f}'
    marker:
      color: "rgb(40\t57\t143\t)"
    xaxis: x2
    type: histogram
hours_to_show: 2112
title: >-
  $fn({getFromConfig})=>`Heating - Last ${getFromConfig('hours_to_show')/24}
  days`
raw_plotly_config: true
layout:
  margin:
    t: 20
    l: 70
    r: 20
    b: 70
  height: 400
  bargap: 0.1
  showlegend: false
  xaxis:
    title:
      text: Outside Temperature (°C)
    autorange: true
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  yaxis:
    title:
      text: Gas burned (kWh per day)
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  xaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false
  yaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false

May you could help me with the newest filters?

[dbuezas]

Apply resample to both series before storing it to vars. This will ensure they have the same amount of datapoints, and that they are aligned in time.

[thecem]

Actual I get following:

config

type: custom:plotly-graph
entities:
  - entity: sensor.hmip_sens_out_stho_temperature
    statistic: mean
    period: day
    time_offset: '-1d'
    fn: $fn ({ ys, vars }) => vars.temperature = ys
  - entity: sensor.daily_heizoel
    statistic: state
    period: day
    unit_of_measurement: kWh
    name: Heizöl
    internal: true
    filters:
      - map_x: x > 10
      - filter: i>0
      - map_y_numbers: y * 10
    fn: $fn ({ ys, vars }) => vars.oil = ys
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.oil
    mode: markers
    name: points
    marker:
      color: rgb(102,0,0)
      size: 3
      opacity: 0.4
    type: scatter
  - entity: ''
    line:
      shape: linear
      color: blue
    filters:
      - fn: |
          ({ys, xs, vars}) => {
            return {xs: vars.temperature, ys: vars.oil};
          }
      - trendline
  - entity: ''
    line:
      color: green
    filters:
      - fn: |
          ({vars}) => {
            const xs = vars.temperature;
            const ys = vars.oil;
            const pairs = xs.map((x, i) => [x,ys[i]])
              .filter( ([x,y]) => Number.isFinite(x) && Number.isFinite(y)) // unavailables in the x axis break trendlines
              .sort((a,b)=>a[0]-b[0]); // the trendline filter expects the x axis to be sorted
            const r = {
              xs: pairs.map(([x,y])=>x),
              ys: pairs.map(([x,y])=>y),
            };
            console.log(r);
            return r;
          }
      - trendline
      - store_var: trend
    x: >-
      $fn ({ vars }) => vars.trend.xs.map(x=>+x) // the trendline made dates out
      of the x axis
    'y': >-
      $fn ({ vars }) => vars.trend.ys // and since this is a raw_plotly_config,
      we need to set x and y ourselves
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    'y': $fn ({ vars }) => vars.oil
    name: density
    ncontours: 40
    colorscale: YlGnBu
    nbinsx: 40
    nbinsy: 40
    reversescale: true
    showscale: false
    line:
      color: lightgray
    type: histogram2dcontour
  - entity: ''
    x: $fn ({ vars }) => vars.temperature
    name: x density
    texttemplate: '%{x:0.0f}°C'
    marker:
      color: "rgb(40\t57\t143\t)"
    yaxis: y2
    opacity: 1
    type: histogram
  - entity: ''
    x: undefined
    'y': $fn ({ vars }) => vars.oil
    name: y density
    texttemplate: '%{y:0.0f}kWh'
    marker:
      color: "rgb(40\t57\t143\t)"
    xaxis: x2
    type: histogram
hours_to_show: 8760
title: >-
  $fn({getFromConfig})=>`Heating - Last ${getFromConfig('hours_to_show')/24}
  days`
raw_plotly_config: true
layout:
  margin:
    t: 20
    l: 70
    r: 20
    b: 70
  height: 600
  bargap: 0.1
  showlegend: false
  xaxis:
    title:
      text: Outside Temperature (°C)
    autorange: true
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  yaxis:
    title:
      text: Oil burned (kWh per day)
    domain:
      - 0
      - 0.85
    showgrid: false
    zeroline: false
  xaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false
  yaxis2:
    domain:
      - 0.85
      - 1
    showgrid: false
    zeroline: false

How could I filter values starting with 10kWh and don´t show the 0 kWh values?

Would it be possible to show a second graph with the new heatpump and the same for period x in the past with the old oil heating system?

THX!

[dbuezas]

For the second graph, look into time_offset.
To filter values, it is slightly tricky in this case since you need to filter data from two traces based on the value of one of them. Store the resampled kwh entity in a var, and then after the resample of the temperature entity, filter it by parseFloat(vars.oil_trace[i]) > 10 or something like that