Octopus Energy Integration: Display graph of usage?

Biscuit · April 24, 2024, 5:49pm

In simple terms, Home Assistant uses ‘sensor entities’ that hold ‘state values’, almost all of which are created (registered with HA) by the various ‘integrations’. The creating integration (some of which are built-in) is then responsible for updating the entity state.

Here, we are using the Octopus Energy (Bottlecap Dave) integration. There is quite a lot going on in this integration, and it can be worth reading the documentation if you want to get the most from it. To get a graphical display of usage to work requires many things to be set correctly.

The entity sensors we require here are the previous accumulative consumption (electricity / gas) and the documentation for this can be found at

https://bottlecapdave.github.io/HomeAssistant-OctopusEnergy/entities/electricity/#previous-accumulative-consumption

Note the warning message - the latest data is always for yesterday and may not arrive until very late in the day.

I note that in the latest version 10+ we now have “latest available data timestamp” attribute in this sensor, which should indicate if the consumption values now relate to yesterday (updated) or the day before (yet to update)

Since there is a limit on how many API calls can be made to Octopus Energy each day, the call to update the previous consumption figures will clearly only happen infrequently.

https://bottlecapdave.github.io/HomeAssistant-OctopusEnergy/faq/#how-often-is-data-refreshed

The integration also includes a service call that can be used to force a refresh (useful where you have just added the integration and would like existing data to be loaded into the sensors).

https://bottlecapdave.github.io/HomeAssistant-OctopusEnergy/services/#octopus_energyrefresh_previous_consumption_data

To get the data for yesterday to arrive into the sensor

Octopus has to read the meter and update your account meter reading history. This only happens during the early morning to late afternoon
The integration has to make the necessary API call to obtain the latest meter readings / consumption. This only happens every 30 minutes or so.
The integration has to process the data and update the sensor.

My electricity consumption has only just updated, and I am still waiting for the gas figures. For most days, I only get to see “yesterday” for gas during the late afternoon-evening, and yesterday my gas figures updated just before midnight, which makes for little practical use. For this reason, the integration configuration allows for changing the previous consumption days offset from 1 (yesterday) to 2 (the day before yesterday) or greater - which would show a full day of figures all day, but for the day before yesterday.

So… here is my latest Octopus Electricity (Import) previous consumption sensor - attributes. You will see that it was last evaluated at 15:37, which is when the graph actually updated with yesterdays figures because the integration actually found something new. The data was last retrieved at 17:37 (which is the integration just going around every 30 minutes looking to see if anything has changed). And the ‘latest available data timestamp’ shows 01:00, which is midnight last night (UTC - BST difference) when the end of yesterday’s figures comes to (allowing for the fact that the consumption figures end at 23:00 yesterday and not midnight).

I am sure that Albert Einstein would have no problems at all understanding this ‘smart meter’ stuff.

epogee · April 26, 2024, 6:59pm

I think there must be something wrong with the comms with Octopus, as there’s nothing sensible in the “previous accumulation consumption” entity. (There are three - total, offpeak and onpeak and a similar effect is on all of them…so probably no surprise that I haven’t got a graph

Biscuit · April 26, 2024, 8:59pm

There is, as I said, a lot going on in this integration, and it is worth going through the documentation if you want to get the best from it (and if you want to get it to work).

If we look at the / each electricity meter device for each account, there are 21 sensor entities created by the integration.

current rate
previous rate
next rate
current day rates
previous day rates
next day rates
off peak
previous accumulative consumption
previous accumulative consumption (peak rate)
previous accumulative consumption (off peak rate)
previous accumulative cost
previous accumulative cost (peak rate)
previous accumulative cost (off peak rate)
previous consumption day rates
current consumption
current demand
current accumulative consumption
current accumulative consumption (peak rate)
current accumulative consumption (off peak rate)
current accumulative cost
current accumulative cost (peak rate)
current accumulative cost (off peak rate)
tariff overrides

This is very impressive, however for someone like myself who is on standard rate, there is no peak and off peak. Hence my peak rate and off peak rate sensors are all disabled and do not work.

The current rate comes from my tariff. On an Agile tariff, previous and next make sense, on a fixed rate tariff they don’t - again these sensors are disabled and/or do not work.

The current consumption figures all come from my Octopus Mini - and if you don’t have one of those then nothing will appear in all of these sensors.

The previous consumption figures all come from the smart meter. If you don’t have a smart meter, or if the integration cannot work out that this is a smart meter, then it cannot pull the smart meter readings (they don’t exist).

For your sensor in your picture, which is previous accumulative consumption (off peak), the docs say this sensor (state value) is

The total consumption reported by the meter for the previous day that applied during off peak hours. This will only be populated if you’re on a tariff with two available rates.

Assuming you have a smart meter
Assuming you have a tariff with off peak periods
For yesterday, assuming you consumed 1.92 kWh during your off peak period (say 02:00 to 05:00) then sometime today the integration will update this sensor state to report that yesterday, off peak, you used 1.92 kWh.

If you look at the documentation, you will also see that this ‘off peak’ sensor does not have an attribute array of consumption figures. If you want a nice graph of consumption, then only the previous accumulated consumption sensor has the charges attribute holding the consumption array (from which we get the graph).

For reference see:
https://bottlecapdave.github.io/HomeAssistant-OctopusEnergy/entities/electricity/#previous-accumulative-consumption

In simple terms, you can’t graph 1.92 kWh.

You can graph the previous_accumulative_consumption (charges attribute) array.

Here is my sensor (previous accumulative consumption)
Here is the state value - 1.074 kWh used yesterday

Here are the attributes, including ‘is smart meter’ - true, and ‘charges’ - which holds an array of consumption figures.
That is what we are plotting in the graph.

And yes, if you look closely, the periods start at 2024-04-24T23:00 (this is UTC), and the array then covers 2024-04-25, which happens to be yesterday, and my graph works.

Here is a copy of my current, working, configuration. You only need to change the xxxxx_xxxxx part to match your mpan and meter serial number.

type: custom:apexcharts-card
header:
  show: true
  title: Octopus Electricity Import - Yesterday
show:
  last_updated: true
graph_span: 24h
span:
  start: day
  offset: '-1d'
series:
  - entity: >-
      sensor.octopus_energy_electricity_xxxxxxxxx_xxxxxxxxx_previous_accumulative_consumption
    data_generator: |
      let array = entity.attributes.charges;
      let final = [];
      let i=0;
      let j=0;
      for (i=0; i<array.length-1; i=i+2){
        final[j] = [new Date(array[i].start).getTime(), array[i].consumption + array[i+1].consumption];
        j++;
      };
      return final;
    type: column
    color: purple
yaxis:
  - min: 0
    max: '|+0.5|'

I’m sure the data_generator code could be refactored to make it neater…

epogee · April 26, 2024, 10:31pm

Thankyou - that was really helpful. I really appreciate you taking the time to explain this - and I have discovered a useful new area of the Home Assistant site - the Developer Tools ‘State’ page! I checked that, and I have data in there, for the accumulative consumption, just like you do. I checked the code I have in the the card, and it looks correct. I carefully checked the sensor name, in case I have any syntax errors, and it looks perfect. So I copied/pasted the sensor name from the ‘States’ page into the Card code, and lo and behold a chart appears!! So I really don’t know why that is - maybe there is a zero where there should be a letter O or something like that. The chart is blank, but I’m guessing that’s because it’s waiting for new data to be uploaded, so I’ll give it 24hours and see if that data appears in the chart, but it’s certainly looking like we’re getting somewhere!

epogee · April 27, 2024, 8:45pm

It’s working! the graph has now appeared. And I understand a bit more about Home Assistant than I did yesterday. Thankyou for all your help!

iamgrog68 · August 9, 2024, 3:54pm

Can I thank you, I couldn’t figure out how to get the bar chart until I found your post.

I modded it a bit to show both usage and cost per hour. simple.

But I was wondering if you or anyone could help, I would like to show a 3rd bar showing an accumulating cost on the bar chart as the day progresses, at the moment it is showing cost for each hour which I also want to show. I just can’t work it out, any idea’s what code I would use

Biscuit · August 13, 2024, 9:02am

The data generator uses JavaScript, which is executed using the JS engine inside the web browser you are using to display your Home Assistant dashboard.

JavaScript is a prescriptive language, in that you have to tell it (prescribe) how to do what you want, and we therefore need to start with an algorithm that, when executed, will get the result.

If I understand your question correctly, you are looking for an accumulative costs value for the time up to and including each hour plotted.

Thus, for a given hour h [00 to 23]
the accumulated cost value is the sum of each cost value for hours 0 to h
or
cost value = entity.attributes.charges.cost [ array index = 0 to 2*h +1]

e.g. for the hour 3, we want to sum costs in array 0, 1, 2, 3, 4, 5, 6, 7 being eight half-hour periods.

This algorithm can be described as
“for each hour from 0 to 23, create the timestamp and also sum the costs for the part of the cost array up to and including the given hour”

which, in meta code, is something like

for hour = 0 to 23
  time = get_timestamp(hour)
  cost = 0
  for index = 0 to 2*hour +1
      cost = cost + cost_array[index].cost
  final_array[hour] = [time, cost]

This should be easy to code in JavaScript, but it is clear that we are summing the same part of the array multiple times, so a more efficient algorithm would be to keep a running cumulative total as we go

cost = 0
for hour = 0 to 23
  time = get_timestamp(hour)
  index = 2*hour
  cost = cost + cost_array[index].cost + cost_array[index+1].cost
  final_array[hour] = [time, cost]

This uses the ‘hour’ to iterate over the cost_array, but we can iterate over the array itself, hence the following as a basic modification to the code already posted in this thread should do the job for us

    data_generator: |
      let array = entity.attributes.charges;
      let final = [];
      let i=0;
      let j=0;
      let cc=0;
      for (i=0; i<array.length-1; i=i+2){
        cc = cc + array[i].cost + array[i+1].cost;
        final[j] = [new Date(array[i].start).getTime(), cc];
        j++;
      };
      return final;

I note that the Octopus Integration has changed a bit, so the time period costs are held in

sensor.octopus_energy_electricity_XXXXX_XXXX_previous_accumulative_cost

and the equivalent ‘_current_accumulative_cost’ entity as an array under attribute ‘charges’

Also the “£” has now been removed so we no longer need to substring(1) to remove it.

I have tested this as best I can!

Since you are plotting both consumption (kWh) and cost (GBP) on the same graph, you may wish to consider using two different axes. Since the cumulative cost will climb during the day, to prevent the graph from becoming unreadable for the smaller hourly figures, I would personally try having the hourly consumption and hourly costs on one axis, and the cumulative on another axis.

The multi-Y axis options are documented here

https://github.com/RomRider/apexcharts-card?tab=readme-ov-file#yaxis-options-multi-y-axis

iamgrog68 · August 13, 2024, 12:54pm

Thanks, that was basically what I had but I kept getting an error saying element unavailable or something and I thought I was doing something wrong, after a couple of attempts it accepted it.

I played with the y axis options as well but in the end I think it looks better having two graphs, one for the hourly usage/cost and then another for ‘day so far’ using line graph showing usage/cost as the day goes on.

SquigglyPanda · August 21, 2024, 9:50am

Hi @iamgrog68

If possible, would you be able to share your Energy Charts YAML code please? I’ve just started my Home Assistant and Octopus Energy Journey and set a bunch of stuff up, but when it comes to charts like these i am lost!

Appreciate any help

Thanks!

iamgrog68 · August 22, 2024, 10:05am

I’ve used the apex charts addon as described further above in this thread and then in the apex chart card the following shows my usage and cost for today, I have the Octopus Mini so get todays usage, if you don’t then you need to use previous sensor instead of current. You also need to change the xxxxx_xxxxx part to match your mpan and meter serial number.

yaxis:
  - id: first
    min: 0
    max: '|+0.25|'
    decimals: 2
    show: true
    apex_config:
      tickAmount: 12
      title:
        text: kWh
  - id: second
    min: 0
    max: '|+0.25|'
    opposite: true
    show: true
    decimals: 2
    apex_config:
      tickAmount: 12
      title:
        text: GBP
all_series_config:
  stroke_width: 4
header:
  show: true
  title: Electricity Used - Today by hour
show:
  last_updated: true
graph_span: 24h
span:
  start: day
  offset: '-'
series:
  - entity: >-
      sensor.octopus_energy_electricity_xxxxxxxxx_xxxxxxxxx_current_accumulative_consumption
    name: Hourly Usage
    yaxis_id: first
    data_generator: |
      let array = entity.attributes.charges;
      let final = [];
      let i=0;
      let j=0;
      for (i=0; i<array.length-1; i=i+2){
        final[j] = [new Date(array[i].start).getTime(), array[i].consumption + array[i+1].consumption];
        j++;
      };
      return final;
    type: column
    color: purple
  - entity: >-
      sensor.octopus_energy_electricity_xxxxxxxxx_xxxxxxxxx_current_accumulative_cost
    yaxis_id: second
    name: Hourly cost
    data_generator: |
      let array = entity.attributes.charges;
      let final = [];
      let i=0;
      let j=0;
      for (i=0; i<array.length-1; i=i+2){
        final[j] = [new Date(array[i].start).getTime(), array[i].cost + array[i+1].cost];
        j++;
      };
      return final;
    type: column
    color: pink
    float_precision: 2

davidtja · September 3, 2024, 5:38pm

Is it possible to get this to show daily/weekly/monthly using same style layout?
Thanks

Biscuit · September 3, 2024, 6:15pm

The Octopus integration provides in a sensor attribute the consumption reading array for a) yesterday from the ‘smart’ meter data and b) today from the Octopus Mini device if you have one. There is no other long-term data held in this integration.

Home Assistant keeps historic data, but only for 10 days by default, and there may be a challenge to get at the historic attribute arrays.

Naturally all your meter records are held by Octopus, and can be pulled down for any period just by using an API call. You may find that using Node-RED is an easier approach to run the data manipulation required to turn an array of half-hourly consumption figures into the format required for a daily/weekly/monthly graph.

davidtja · September 4, 2024, 9:06am

Hi Thank-you so much for taking the time to explain. It obviously makes sense now why I could’nt find a resolution. I have used Node Red a little in the past but not gone as far as pulling an API. If there is any sample Node Red code that I could work with that would be really helpful.
Many thanks for advice.

Biscuit · September 4, 2024, 9:38am

This is what I use to pull down the electricity consumption for the past year as monthly summary values.

[{"id":"573e58aa245d6685","type":"change","z":"7021f7d89ccb8403","name":"Setup - Import","rules":[{"t":"set","p":"topic","pt":"msg","to":"Import","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"mpan","pt":"msg","to":"*mpan goes here*","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":240,"y":360,"wires":[["acb3b14fc6a5f4a5"]]},{"id":"acb3b14fc6a5f4a5","type":"change","z":"7021f7d89ccb8403","name":"Parms","rules":[{"t":"set","p":"meter","pt":"msg","to":"*meter number goes here*","tot":"str"},{"t":"set","p":"apikey","pt":"msg","to":"*your Octopus API key goes here*","tot":"str"},{"t":"set","p":"payload.page_size","pt":"msg","to":"12","tot":"num"},{"t":"set","p":"payload.group_by","pt":"msg","to":"month","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":360,"wires":[["634f5725a55f7515"]]},{"id":"634f5725a55f7515","type":"template","z":"7021f7d89ccb8403","name":"URL","field":"url","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"https://{{apikey}}:@api.octopus.energy/v1/electricity-meter-points/{{mpan}}/meters/{{meter}}/consumption","output":"str","x":510,"y":360,"wires":[["680b6f02d6a927cb"]]},{"id":"680b6f02d6a927cb","type":"http request","z":"7021f7d89ccb8403","name":"GET","method":"GET","ret":"obj","paytoqs":"query","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":630,"y":360,"wires":[["f32c3b7ac3a9292f"]]},{"id":"f32c3b7ac3a9292f","type":"change","z":"7021f7d89ccb8403","name":"Results","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.results","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":360,"wires":[[]]}]

You just need to get your personal (keep it secret) API key. See your Octopus account > Personal Details > Developer settings.

Your MPAN and Meter number will be on your billing statement.

You can use the ‘group by’ and ‘page size’ parameters to get exactly what you want.

Documentation can be found at https://developer.octopus.energy/rest/

vrtareg · September 30, 2024, 9:48am

Hi @iamgrog68 - would it be possible to share other charts YAML also?

I am trying to build mine and your solution looks most promising for me.

Also how you are getting yesterday values? Not sure if I can see them in current or previous entities.

iamgrog68 · October 2, 2024, 9:30am

HI @vrtareg this is what I have now, as yesterdays was normally blank until later in the day I have also added a day before yesterday chart, so one or the other will be blank depending on time of day when chart is loaded

My YAML is below, remember to change xxxxxx_xxxxxx to yourMpan_yourmeterseriel

  - title: Energy Charts
    path: energy-charts
    badges: []
    cards:
      - type: custom:apexcharts-card
        yaxis:
          - id: first
            min: 0
            max: '|+0.25|'
            decimals: 2
            show: true
            apex_config:
              tickAmount: 12
              title:
                text: kWh
          - id: second
            min: 0
            max: '|+0.25|'
            opposite: true
            show: true
            decimals: 2
            apex_config:
              tickAmount: 12
              title:
                text: GBP
        all_series_config:
          stroke_width: 4
        header:
          show: true
          title: Electricity Used - Today by hour
        show:
          last_updated: true
        graph_span: 24h
        span:
          start: day
          offset: '-'
        series:
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_current_accumulative_consumption
            name: Hourly Usage
            yaxis_id: first
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              for (i=0; i<array.length-1; i=i+2){
                final[j] = [new Date(array[i].start).getTime(), array[i].consumption + array[i+1].consumption];
                j++;
              };
              return final;
            type: column
            color: purple
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_current_accumulative_cost
            yaxis_id: second
            name: Hourly cost
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              for (i=0; i<array.length-1; i=i+2){
                final[j] = [new Date(array[i].start).getTime(), array[i].cost + array[i+1].cost];
                j++;
              };
              return final;
            type: column
            color: pink
            float_precision: 2
      - type: custom:apexcharts-card
        yaxis:
          - id: first
            min: 0
            max: '|+0.25|'
            decimals: 2
            show: true
            apex_config:
              tickAmount: 12
              title:
                text: kWh
          - id: second
            min: 0
            max: '|+0.25|'
            opposite: true
            show: true
            decimals: 2
            apex_config:
              tickAmount: 12
              title:
                text: GBP
        all_series_config:
          stroke_width: 3
        header:
          show: true
          title: Electricity Used - Today so far
        show:
          last_updated: true
        graph_span: 24h
        span:
          start: day
          offset: '-'
        series:
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_current_accumulative_cost
            name: Days cost (without standing charge)
            yaxis_id: second
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              let cc=0;
              for (i=0; i<array.length-1; i=i+2){
                cc = cc + array[i].cost + array[i+1].cost;
                final[j] = [new Date(array[i].start).getTime(), cc];
                j++;
              };
              return final;
            type: line
            color: red
            float_precision: 2
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_current_accumulative_consumption
            name: Days consumption
            yaxis_id: first
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              let cc=0;
              for (i=0; i<array.length-1; i=i+2){
                cc = cc + array[i].consumption + array[i+1].consumption;
                final[j] = [new Date(array[i].start).getTime(), cc];
                j++;
              };
              return final;
            type: line
            color: green
            float_precision: 2
      - type: custom:apexcharts-card
        yaxis:
          - id: first
            min: 0
            max: '|+0.25|'
            decimals: 2
            show: true
            apex_config:
              tickAmount: 4
              title:
                text: kWh
          - id: second
            min: 0
            max: '|+0.25|'
            opposite: true
            show: true
            decimals: 2
            apex_config:
              tickAmount: 4
              title:
                text: GBP
        all_series_config:
          stroke_width: 4
        header:
          show: true
          title: Electricity Used - yesterday by hour
        show:
          last_updated: true
        graph_span: 24h
        span:
          start: day
          offset: '-1d'
        series:
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_consumption
            name: Hourly Usage
            yaxis_id: first
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              for (i=0; i<array.length-1; i=i+2){
                final[j] = [new Date(array[i].start).getTime(), array[i].consumption + array[i+1].consumption];
                j++;
              };
              return final;
            type: column
            color: purple
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_cost
            name: Hourly Cost
            yaxis_id: second
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              for (i=0; i<array.length-1; i=i+2){
                final[j] = [new Date(array[i].start).getTime(), array[i].cost + array[i+1].cost];
                j++;
              };
              return final;
            type: column
            color: pink
      - type: custom:apexcharts-card
        yaxis:
          - id: first
            min: 0
            max: '|+0.25|'
            decimals: 2
            show: true
            apex_config:
              tickAmount: 12
              title:
                text: kWh
          - id: second
            min: 0
            max: '|+0.25|'
            opposite: true
            show: true
            decimals: 2
            apex_config:
              tickAmount: 12
              title:
                text: GBP
        all_series_config:
          stroke_width: 3
        header:
          show: true
          title: Electricity Used - yesterday
        show:
          last_updated: true
        graph_span: 24h
        span:
          start: day
          offset: '-1d'
        series:
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_cost
            name: Days cost (without standing charge)
            yaxis_id: second
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              let cc=0;
              for (i=0; i<array.length-1; i=i+2){
                cc = cc + array[i].cost + array[i+1].cost;
                final[j] = [new Date(array[i].start).getTime(), cc];
                j++;
              };
              return final;
            type: line
            color: red
            float_precision: 2
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_consumption
            name: Days consumption
            yaxis_id: first
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              let cc=0;
              for (i=0; i<array.length-1; i=i+2){
                cc = cc + array[i].consumption + array[i+1].consumption;
                final[j] = [new Date(array[i].start).getTime(), cc];
                j++;
              };
              return final;
            type: line
            color: green
            float_precision: 2
      - type: custom:apexcharts-card
        yaxis:
          - id: first
            min: 0
            max: '|+0.25|'
            decimals: 2
            show: true
            apex_config:
              tickAmount: 4
              title:
                text: kWh
          - id: second
            min: 0
            max: '|+0.25|'
            opposite: true
            show: true
            decimals: 2
            apex_config:
              tickAmount: 4
              title:
                text: GBP
        all_series_config:
          stroke_width: 4
        header:
          show: true
          title: Electricity Used - day before yesterday by hour
        show:
          last_updated: true
        graph_span: 24h
        span:
          start: day
          offset: '-2d'
        series:
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_consumption
            name: Hourly Usage
            yaxis_id: first
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              for (i=0; i<array.length-1; i=i+2){
                final[j] = [new Date(array[i].start).getTime(), array[i].consumption + array[i+1].consumption];
                j++;
              };
              return final;
            type: column
            color: purple
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_cost
            name: Hourly Cost
            yaxis_id: second
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              for (i=0; i<array.length-1; i=i+2){
                final[j] = [new Date(array[i].start).getTime(), array[i].cost + array[i+1].cost];
                j++;
              };
              return final;
            type: column
            color: pink
      - type: custom:apexcharts-card
        yaxis:
          - id: first
            min: 0
            max: '|+0.25|'
            decimals: 2
            show: true
            apex_config:
              tickAmount: 12
              title:
                text: kWh
          - id: second
            min: 0
            max: '|+0.25|'
            opposite: true
            show: true
            decimals: 2
            apex_config:
              tickAmount: 12
              title:
                text: GBP
        all_series_config:
          stroke_width: 3
        header:
          show: true
          title: Electricity Used - day before yesterday
        show:
          last_updated: true
        graph_span: 24h
        span:
          start: day
          offset: '-2d'
        series:
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_cost
            name: Days cost (without standing charge)
            yaxis_id: second
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              let cc=0;
              for (i=0; i<array.length-1; i=i+2){
                cc = cc + array[i].cost + array[i+1].cost;
                final[j] = [new Date(array[i].start).getTime(), cc];
                j++;
              };
              return final;
            type: line
            color: red
            float_precision: 2
          - entity: >-
              sensor.octopus_energy_electricity_xxxxxx_xxxxxx_previous_accumulative_consumption
            name: Days consumption
            yaxis_id: first
            data_generator: |
              let array = entity.attributes.charges;
              let final = [];
              let i=0;
              let j=0;
              let cc=0;
              for (i=0; i<array.length-1; i=i+2){
                cc = cc + array[i].consumption + array[i+1].consumption;
                final[j] = [new Date(array[i].start).getTime(), cc];
                j++;
              };
              return final;
            type: line
            color: green
            float_precision: 2

vrtareg · October 2, 2024, 9:46am

Thanks a lot @iamgrog68
I will give it a go and will post mine.

andyblac · October 3, 2024, 12:59pm

would it be possible to change your apex chart to use only sensor.octopus_energy_electricity_xxxxxxxx_xxxxx_current_accumulative_consumption as I do have a Octopus Home Mini, But my smart meter can not send reading to Octopus due to the signal being too week, so my sensor sensor.octopus_energy_electricity_xxxxxx_xxxxxx_pervious_accumulative_consumption and cost does not get filled with data.

I tried this but it does not work.

type: custom:apexcharts-card
yaxis:
  - id: first
    min: 0
    max: '|+0.25|'
    decimals: 2
    show: true
    apex_config:
      tickAmount: 4
      title:
        text: kWh
  - id: second
    min: 0
    max: '|+0.25|'
    opposite: true
    show: true
    decimals: 2
    apex_config:
      tickAmount: 4
      title:
        text: GBP
all_series_config:
  stroke_width: 4
header:
  show: true
  title: Electricity Used - yesterday by hour
show:
  last_updated: true
graph_span: 24h
span:
  start: day
  offset: '-1d'
series:
  - entity: >-
      sensor.octopus_energy_electricity_xxxx_xxxxx_current_accumulative_consumption
    name: Hourly Usage
    yaxis_id: first
    data_generator: |
      let array = entity.attributes.charges;
      let final = [];
      let i=0;
      let j=0;
      for (i=0; i<array.length-1; i=i+2){
        final[j] = [new Date(array[i].start).getTime(), array[i].consumption + array[i+1].consumption];
        j++;
      };
      return final;
    type: column
    color: purple
  - entity: >-
      sensor.octopus_energy_electricity_xxxxx_xxxxx_current_accumulative_cost
    name: Hourly Cost
    yaxis_id: second
    data_generator: |
      let array = entity.attributes.charges;
      let final = [];
      let i=0;
      let j=0;
      for (i=0; i<array.length-1; i=i+2){
        final[j] = [new Date(array[i].start).getTime(), array[i].cost + array[i+1].cost];
        j++;
      };
      return final;
    type: column
    color: pink

iamgrog68 · October 3, 2024, 2:08pm

remeber the yesterdays figures arrive late, which is why I’ve got yesterday and previous day. at the moment my charts for yesterday shows no usage, but it does for previous day. later when I reload the page it will be the other way round, yesterdays figures will be displayed but the previous day will be blank.

the current variables are showing todays which are collated by the Mini, if octopus has them they should also have yesterdays. Does the octopus app not show you yesterdays usage?

andyblac · October 3, 2024, 2:29pm

as I said, I can only get data that is supplied by the mini, ie in the app, only live and day, works, not the week or month, that why I can not use the previous entity like in your dashboard, as that is grab by the octopus API from the data sent by the meter to octopus which does not get sent from my meter.

in the current_accumulative_consumption entity it does have all the previous data, and why I am asking if it is possible to use this data.