Octopus Energy Integration: Display graph of usage?

Yes, Home Assistant is the electronic equivalent of a garden shed or allotment, although it does not actually get you out of the house.

Glad to hear that you managed to get it all working. This discussion is really about graphing Octopus Energy integration, but you may like to post your Node-RED flow, sensor, and card configuration for others to learn from. I would suggest posting a new discussion, tagged as Node-RED as NR is quite a niche area for HA users.

Thanks, that’s really helpful.

Ended up using something similar to this, along with a utility meter to show exactly what I was after.

For my instance, the start and end components of the charge array fluctuates between 00:00 yesterday and 00:00 the day before yesterday.

Is there a way to calculate the span.offset value of the Apexcharts-card based on the actual values of the first start component of the charge array attribute?

As is typical with the gas readings, they will generally be for the-day-before-yesterday up until around early evening, when they change to those for yesterday. This is indeed challenging if you want to show them regardless of which day.

As far as I recall, the span and offset settings can only be hard literals, and thus passing variables to these settings is either not possible, or requires a template card to hold the graph card and process the variable settings.

I believe that it is easier to expand the graph to span 48 hours and set the offset to -2days, which means it shows the-day-before-yesterday through to yesterday, hence the-day-before-yesterday will show, as will yesterday. You just see either day-empty or empty-day accordingly (and will thus know which day’s worth you are looking at).

Alternatively, a trick is to modify the data by adding extra day(s) as required. This can be done inside the data generator.

type: custom:apexcharts-card
header:
  show: true
  title: Octopus Gas kWh - Previous 'Day' Consumption
show:
  last_updated: true
graph_span: 24h
span:
  start: day
series:
  - entity: >-
      sensor.octopus_energy_gas_xxxxx_xxxxx_previous_accumulative_consumption_kwh
    data_generator: |
      const array = entity.attributes.charges;
      let days = (Date.now() - new Date(array[0].start).getTime())/86400000;
      let delta = Math.floor(days)*86400000;
      let final = [];
      let i, j=0;
      for (i=0; i<array.length-1; i=i+2){
        final[j] = [(new Date(array[i].start).getTime() +delta), array[i].consumption_kwh + array[i+1].consumption_kwh];
        j++;
      };
      return final;
    type: column
    color: green
    unit: kWh

This will shift the-day-before-yesterday up by two days, and yesterday up by one day, thus making either today. Of course, this does not tell you which day you are looking at, and it will still fail if the Gas readings are not updated by the end of the day (which does happen).

1 Like

@Biscuit

Thanks for your detailed answer. It is tremendous helpful.

Nevermind about the actual day. It is not shown on the card anyway.

I would like to share my code based on your code. I utilized the variable start provided by the card to make the chart always show from the beginning. Assuming it always start from midnight, the time axis should be correct. I don’t group the data into hour myself but the following does as yours. Furthermore, I prefer reporting in Wh as KWh is quite a big unit for my usage.

type: custom:apexcharts-card
header:
  show: true
  title: Octopus Electricity Consumption - Previous 'Day' Consumption
show:
  last_updated: true
graph_span: 24h
span:
  start: day
series:
  - entity: >-
sensor.octopus_energy_electricity_xx_yy_previous_accumulative_cost
    data_generator: |
      const array = entity.attributes.charges;
      let delta = (start - new Date(array[0].start).getTime());
      let final = [];
      let i, j=0;
      for (i=0; i < array.length; i=i+1){
        final[j] = [
          (new Date(array[i].start).getTime() + delta),
          array[i].consumption * 1000
          ];
        j++;
      };
      return final;
    name: Electricity Consumption
    unit: Wh
    type: column
    color: Purple
    group_by:
      func: sum
      duration: 1h

A neater solution than mine!

I would like to plot a graph of Calorific value per date as well.
with the following attributes of Entity Current Accumulative Cost Gas (??/??)

Mprn xxx

Serial number yyy

Tariff code zzz

Standing charge 0.3

Total without standing charge 0.59

Total 0.89

Charges - start: '2024-12-14T12:30:00+00:00' end: '2024-12-14T13:00:00+00:00' rate: 0.057192 consumption: 6.41821 cost: 0.37 - start: '2024-12-14T13:00:00+00:00' end: '2024-12-14T13:30:00+00:00' rate: 0.057192 consumption: 3.916 cost: 0.22

Calorific value 39.3

How to do it?