Stacked bar charts

[oischinger]

Hi @dbuezas
thanks for this fantastic component.
I was trying to create some stacked bar charts with it like here but it seems that barmode: stack doesn't do anything if I add it to the layout section. Does this make sense?

Cheers, Hans

[dbuezas]

hi @oischinger 👋
Paste the yaml file with your configuration and I'll try to see what's wrong

[oischinger]

Thanks, @dbuezas

I try to show the power consumption of various sensors as either a stacked bar chart or a stacked area graph.
To do that I had a look at #20 to flatten spikes from short time windows (e.g. opening shutters) and create bars for 15 minute (or whatever) time frames.

type: custom:plotly-graph
entities:
  - entity: sensor.garden_a_switch_current_power_w
  - entity: sensor.livingroom_all_lights_current_power_w
  - entity: sensor.switch_ebike_wattage
  - entity: sensor.switch_gefrierschrank_power
  - entity: sensor.switch_kuehlschrank_kueche_power
  - entity: sensor.switch_trockner_wattage
  - entity: sensor.switch_waschmaschine_wattage
hours_to_show: 6
refresh_interval: 10
title: Power Consumption (24h)
layout:
  barmode: stack
defaults:
  entity:
    type: bar
    lambda: |- 
      (ys, xs) => {
        const MINUTES = 15 // <-- change here

        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        let x_next = +xs[0] + window_size_ms
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next = +x + window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }

Unfortunately the bars aren't stacked.

[dbuezas]

I really like this idea! I'll use it myself :)

The problem you have is that the x coordinates of each sensor are not aligned, so plotlyjs doesn't stack them.
Try this:

Alternative 1

type: custom:plotly-graph
entities:
  - entity: sensor.garden_a_switch_current_power_w
  - entity: sensor.livingroom_all_lights_current_power_w
  - entity: sensor.switch_ebike_wattage
  - entity: sensor.switch_gefrierschrank_power
  - entity: sensor.switch_kuehlschrank_kueche_power
  - entity: sensor.switch_trockner_wattage
  - entity: sensor.switch_waschmaschine_wattage
hours_to_show: 6
refresh_interval: 10
title: Power Consumption (24h)
layout:
  barmode: stack
defaults:
  entity:
    type: bar
    lambda: |-
      (ys, xs) => {
        const MINUTES = 15 // <-- change here
        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        // x_next resolution is lowered to exact intervals of window_size_ms
        let x_next = Math.floor(+xs[0] / window_size_ms) * (window_size_ms + 1) // <--- change 1
        let y_accum = 0
        let y_count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next += window_size_ms // <-- change 2
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }

• Change 1: make the starting point of x be on an exact multiple of 15 minutes. This ensures the bars shift as time goes by.
• Change 2: make the following x coordinates be on exact multiples of 15 minutes. This ensures each bar has the same x coordinate.

Alternative 2

Another thing you can do that I think looks better is to stick to scatter lines but set the stackgroup. This way you can also set the color_scheme

type: custom:plotly-graph
entities:
  - entity: sensor.teich_plug_wattage
  - entity: sensor.beamer_plug_wattage
  - entity: sensor.office_plug_wattage
  - entity: sensor.backofen_plug_wattage
color_scheme: 2
hours_to_show: 6
refresh_interval: 10
title: Power Consumption (24h)
defaults:
  entity:
    stackgroup: one
    lambda: |-
      (ys, xs) => {
        const MINUTES = 15 // <-- change here
        const window_size_ms = 1000*60*MINUTES 
        const result = {x:[], y:[]}
        // x_next resolution is lowered to exact intervals of window_size_ms
        let x_next = Math.floor(+xs[0]/window_size_ms)*window_size_ms + window_size_ms
        let y_accum = 0
        let y_count = 0
        let count = 0
        for (let i = 0; i < xs.length; i++) {
          const x = +xs[i]
          const y = +ys[i]
          if (x>x_next){
            result.y.push(y_accum/y_count)
            result.x.push(new Date(x_next))
            y_accum = 0
            y_count = 0
            x_next += window_size_ms
          }
          if (y){
            // ignore unavailable/unknown state points
            y_accum += y
            y_count ++
          }
        } 
        return result;
      }

Alternative 3

Dropping the bar mode (like alternative 2) allows you to set the line shape to spline too:

defaults:
  entity:
    stackgroup: one
    line:
      shape: spline
     lambda: |- .....

[oischinger]

wow, this is exactly it. Great!

However there's one issue:
have a look at this switch_ebike_wattage graph

in plotly-graph it seems that the graph is somehow stretched:

Looking at only this sensor it looks like this:

I guess this is because HA's history doesn't have individual "0" values for each point in time when the switch was off, right?

[dbuezas]

Try this instead then:

type: custom:plotly-graph
entities:
  - entity: sensor.teich_plug_wattage
  - entity: sensor.beamer_plug_wattage
  - entity: sensor.office_plug_wattage
  - entity: sensor.backofen_plug_wattage
hours_to_show: 6
refresh_interval: 1
title: Power Consumption (24h)
color_scheme: 2
layout:
  barmode: stack
defaults:
  entity:
    stackgroup: one
    line:
      shape: spline
    lambda: |-
      (ys, xs) => {
        const MINUTES = 15; // <-- change here
        const window_size_ms = 1000*60*MINUTES ;
        const result = {x:[], y:[]};
        const t0 = Math.ceil(+xs[0]/window_size_ms)*window_size_ms;
        const t1 = Math.ceil(+xs[xs.length-1]/window_size_ms)*window_size_ms;
        let i = 0; 
        let y_accum = 0;
        let y_count = 0;
        for (let t = t0; t <= t1; t+= window_size_ms){
          while(xs[i] < t && i < xs.length){
            const x = +xs[i];
            const y = +ys[i];
            if (!Number.isNaN(y)){
              // ignore unavailable/unknown state points
              y_accum += y;
              y_count ++;
            }   
            i++;
          }
          const avg = y_count==0? 0 :y_accum/y_count;
          result.y.push(avg);
          result.x.push(new Date(t));
          y_accum = 0;
          y_count = 0;
        }
        return result;
      }

In this approach, we're iterating over each interval and then searching for the datapoints that happen to fall within it. This ensures that intervals without datapoints will still be present in the result (with an average of zero)

The only issue I see with this approach is that the first and last interval may be incomplete so it will show lower than real values. You can fix that by removing the first and last element of the x and y attributes before returning the result

[oischinger]

works like charm. thanks alot for your help!

[lloyda]

When I use this my bars are not correctly aligned with the x axis. For me at least,

result.x.push(new Date(t));

needs to be changes to

result.x.push(new Date(t-window_size_ms));