Hourly energy consumption statistics - box plot

[CendaL]

I've created a graph with hourly energy statistic.

It shows data for the current month but I wonder if it would be possible to add buttons to show previous/next months.

I've tried to use custom buttons but it does not work - any idea how to do it?

  updatemenus:
    - buttons:
        - args:
            - xaxis.range
            - $fn() => [Date.now()-1000*60*60*48, Date.now()]
          label: 2d
          method: relayout

Click to show full code for the above graph

type: custom:plotly-graph
hours_to_show: current_month
entities:
  - entity: sensor.total_energy
    statistic: sum
    name: Total
    internal: true
    filters:
      - delta
      - resample: 1h
      - map_y_numbers: y.toFixed(1)
      - fn: |-
          ({ xs, ys, vars, meta, states, statistics, hass }) => {
            console.log("first", xs[0]);
            console.log("last", xs[xs.length-1]);
            vars.hourData = [...Array(25).keys()];
            for (let i = 0; i < xs.length; i++) {
              if (Array.isArray(vars.hourData[xs[i].getHours()])) {
              vars.hourData[xs[i].getHours()].push(ys[i])
              } else {
                vars.hourData[xs[i].getHours()] = [ys[i]]
              }
            }
          }
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[1]
    name: '0:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[2]
    name: '1:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[3]
    name: '2:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[4]
    name: '3:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[5]
    name: '4:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[6]
    name: '5:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[7]
    name: '6:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[8]
    name: '7:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[9]
    name: '8:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[10]
    name: '9:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[11]
    name: '10:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[12]
    name: '11:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[13]
    name: '12:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[14]
    name: '13:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[15]
    name: '14:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[16]
    name: '15:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[17]
    name: '16:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[18]
    name: '17:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[19]
    name: '18:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[20]
    name: '19:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[21]
    name: '20:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[22]
    name: '21:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[23]
    name: '22:00'
  - entity: ''
    type: box
    'y': $fn ({vars}) => vars.hourData[0]
    name: '23:00'
defaults:
  entity:
    boxpoints: all
    jitter: 0.2
    marker:
      size: 3
raw_plotly_config: true
layout:
  clickmode: none
  hovermode: x
  title:
    text: Hourly Energy Statistics
    x: 0.05
    'y': 1.1
  yaxis:
    rangemode: tozero
    title: kWh
  showlegend: false

[CendaL]

I think buttons do not work because x-axis is static so plotly does not load any data. Is there a way how to force plotly reload data? Or how to get data from certain period?

[dbuezas]

Cool plot, I think you are the first to use ths plot type.

That's unfortunately correct.
Maybe you can use x2 instead for your plot so the main x axis can still be used for time. If it works, it should then be possible to hide from view while still working internally