Help needed with year long statistics plot

[Serios]

Can someone help me with an example (although I'm not quite sure if what I want is even achievable with plotly card) how to plot 12 months (yearly) bars graph of electricity usage. I know that there are some examples already, but in my case, there is a twist, that is making me banging my head for couple of weeks already, and I can't work it out...

My electricity company meter reset cycle is on 9-th day of every month, what this mean is that for example - the used kWh for the month of May are calculated from 10-th of May to 9-th of June, the used kWh for the month of June are calculated from 10-th of Jun to 9-th of July and so on... (yeah I know it's a bit strange, but that's the way they do it)

Currently I'm using a CT clamp meter sensor with HA utility meter helper that reset itself each month on the 9-th day, it is working fine. However when I try to plot a 12 months graph based on statistics with bars for each month till the current one, there are two problems:

1. On the X axis the last month name is correct up until the end of the month then gets incorrect. Example of this is couple of days ago the month name was June up until the 1-th of July, then gets changed to July, but the bar value is still summed since the HA utility meter isn't reset yet.

2. The bar value for each month (Y axis), except for the current one, is completely incorrect. I can't figure out how this values are calculated, but basically what I observe is that the value for the last month (the current one) is OK up until the HA utility meter reset day. After that a new bar is generated for the new current month, but the last month value is changed... I think it has something to do with statistic: state

Here is my yaml for the card, currently not working

type: custom:plotly-graph
hours_to_show: 12M
refresh_interval: 43200 #12 hours in seconds

config:
  displayModeBar: false
  scrollZoom: true
  editable: false 

defaults:
  yaxes:
    fixedrange: true
    side: left
    overlaying: 'y'
    visible: true
    showticklabels: false
    title: 
    ticks: ""
    zeroline: false

layout:
  dragmode: "pan"
  paper_bgcolor: rgba(50, 50, 50, 0.0)
  plot_bgcolor: rgba(0, 0, 0, 0.0)
  yref: paper
  automargin: true
  grid:
    ygap: 0
    rows: 2
    columns: 1
    pattern: coupled
    roworder: top to bottom
  margin:
    t: 0
    r: 7
    b: 30
    l: 7
  xaxis:
    fixedrange: true
    tickformat: "%b"
    showline: false
    zeroline: false
    automargin: false
    autorange: true
    nticks: 12
    showgrid: false

entities:
  - entity: sensor.monthly_energy
    name: Consumed (kWh)
    type: bar
    yaxis: y2
    statistic: state
    period: month
    texttemplate:  >- #
      %{y:.0f}
    hovertemplate: | #
      $fn ({ getFromConfig }) =>
      `<b>%{x}</b><br>
      %{y:.2f} kWh
      <extra></extra>` 
    filters:
      - filter: i>0
      - force_numeric 

P.S. Recently I noticed HA introduced a new type of card - "Statistic Card" with the parameter "stat_type" and possible value "change". When used it like this and it's parameter "fixed_period" with start and end 10-th to 9-th for given months it's working and snowing the value absolutely correctly. I tried to to use statistic: change in plotly entity in the above code but it throw an error with the card

[dbuezas]

You can definitely do it with this card, but it may require some filters, and maybe some js functions.
I can't try this now, but in the meanwhile, make sure to read the "filters" and "offset" sections of the readme.

[dbuezas]

I've thought about this a bit, I think the problem is on the Home Assistant side. I speculate that the monthly statistics pick the last value of each month, not whenever the reset point is. This would explain why the values look correct until the 9th comes.
Here are a couple of ideas:

• Use the daily statistics and then use the resample filter with 1 month interval
• Same but make a javascript filter that only keeps the latest value before the 9th of each month, and then subtract 1 month to the x axis (e.g with the offset filter)
• Use the max statistic instead of state

In any case, if you can post plots with period = day and month, I may be able to help further

[Serios]

Hi @dbuezas, I'm not quite sure I understand, but here is the code that I'm using for a month graph

type: custom:plotly-graph
hours_to_show: 1M
entities:
  - entity: sensor.daily_energy
    name: Daily consumed (kWh)
    type: bar
    statistic: state
    period: day
    filters:
      - filter: i>0
      - force_numeric 

This graph is working fine and also sensor.daily_energy is actually another HA utility meter that tracks daily usage with reset cycle - day.

Here are my utility meter helpers

  daily_energy:
    source: sensor.shelly_em_channel_1_energy
    name: Daily energy
    cycle: daily

  monthly_energy:
    source: sensor.shelly_em_channel_1_energy
    name: Monthly energy
    cron: "0 12 9 * *"

Use the daily statistics and then use the resample filter with 1 month interval

Can you give me some example bit of code for this

Same but make a javascript filter that only keeps the latest value before the 9th of each month, and then subtract 1 month to the x axis (e.g with the offset filter)

Uhmm, I definitely don't have enough coding skills to do that

As for

Use the max statistic instead of state

I don't think is possible since the sensors used for the graphs are utility meter helpers with state_class=total

[dbuezas]

Can you share a screenshot of the daily one that spans across 3 months?

[Serios]

Can you share a screenshot of the daily one that spans across 3 months?

Sure, here it is:

[dbuezas]

Oh, I understand, I thought it would be an accumulating value.

I underestimated the problem, but here's a custom filter that should be able to achieve what you want:

type: custom:plotly-graph
hours_to_show: current_year
entities:
  - entity: sensor.openweathermap_temperature
    period: day
    type: bar
    filters:
      - force_numeric
      - fn: |- 
          ({xs, ys, meta, states, statistics, hass}) => {
            const getMonth = date => {
              const d = new Date(date);
              if (d.getDate() < 9){
                d.setMonth(d.getMonth() - 1);
              }
              d.setDate(1);
              d.setHours(0,0,0,0);
              return d;
            }
            const r = { xs: [], ys: [] };
            let acc = ys[0];
            for (let i = 1; i < xs.length; i++) {
              if (getMonth(xs[i-1]) < getMonth(xs[i])) {
                r.xs.push(getMonth(xs[i-1])); 
                r.ys.push(acc);
                acc = 0;
              }
              acc += ys[i];
            }
            if (acc > 0) {
              r.xs.push(getMonth(xs[xs.length-1]));
              r.ys.push(acc);
            }
            return r;
          }

Maybe there is a better way to do this, I don't have experience with utility meters that reset in the middle of the month.

[Serios]

Thank you @dbuezas for the spended time , now is working properly :)

[dbuezas]

Good to hear!
watch out I had a small mistake (the first day was accumulated twice). I corrected the code above now

[Serios]

Thanks again, I will make edits to use the correct one