My electricity price dashboard (with future prices)

[edwardtfn]

My first time playing with this card, I've created an electricity price dashboard where we can see the price per kWh and my consumption (also in kWh), so I can take decision on when to run my appliances and try to save some money.
I've also added a line to show now, with the current price.

type: custom:plotly-graph
time_offset: 1.5d
refresh_interval: 300
hours_to_show: 84
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 7
          step: day
        - count: 12
          step: day
  yaxis:
    rangemode: tozero
    tickformat: .1f
  yaxis2:
    rangemode: tozero
    tickformat: .2f
    fixrange: true
  yaxis9:
    visible: false
    fixedrange: true
round: 2
default: null
entities:
  - entity: sensor.total_energy_utility_meter
    name: Energy consumption
    type: bar
    marker:
      color: rgba(165,165,0,0.6)
    texttemplate: ' %{y:.2f} kr/kWh'
    statistic: state
    period: hour
    filters:
      - fn: |-
          (params) => {
            const ys = [];
            ys.push(0); 
            for (let i = 1; i < params.statistics.length; i++){
              ys.push(params.statistics[i].state-params.statistics[i-1].state);
            }
            return { ys };
          }
  - entity: sensor.electricity_price
    yaxis: y2
    unit_of_measurement: kr/kWh
    line:
      color: rgba(255, 165, 0, 1)
      width: 3
    filters:
      - store_var: electricity_price
      - exponential_moving_average:
          alpha: 1
    show_value: true
    texttemplate: ' %{y:.2f} kr/kWh'
  - entity: sensor.electricity_price
    yaxis: y2
    name: Future price
    fill: tozeroy
    fillcolor: rgba(255, 165, 0,.1)
    line:
      color: rgba(255, 165, 0, 1)
      width: 1
      dash: dot
    filters:
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.electricity_price.xs.slice(-1)[0],...meta.future_prices.map(({ startsAt }) => new Date(startsAt))],
            ys: [vars.electricity_price.ys.slice(-1)[0],...meta.future_prices.map(({ total }) => total)],
          })
      - exponential_moving_average:
          alpha: 1
  - entity: ''
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    'y': $fn () => [0,1]

You can find here my sensors for electricity price from Tibber. I'm not using the official Tibber integration for that, as I got more stable/reliable sensors with direct REST queries.
In that same repository you can find all my energy consumption calculations per room and total at home, used in an utility meter and.then used as a sensor in this dashboard.

Don't hesitate to ask if you have any question. I would love to help.

[princetiwoz]

@edwardtfn Thanks for the quick reply. I am struggling to get the future prices from the array. I use nordpool data.
I see you created a sensor for future prices or am i getting it wrong?

[dbuezas]

Check the attributes of your sensor.electricity_price in .
You are most likely missing the "future_prices" attribute.
I assume you have a different provider and integration

[Rincovanderbeek]

Thanks for your quick reply.
I use tibber, so that should be equal. I checked teh attribues but future prices are in.
If I move my mouse over the graph, the yellow line states future price which is strange as it is current or past price.

[dbuezas]

It looks like the attribute is called "future", not future prices

[edwardtfn]

Sorry, but that code is from a while ago, so it isn't in the top of my mind.
I can take a look at this later, but meanwhile you can find the code I'm using now:

• My Tibber sensors: https://github.com/edwardtfn/HomeAssistant-Config/blob/main/packages/electricity/tibber.yaml
• The plot: https://github.com/edwardtfn/HomeAssistant-Config/blob/main/lovelace/library/cards/card_electricity_price_chart.yaml

[Rincovanderbeek]

Hi Edward,
Thanks! This works like a charm.
Fantastic.

[edwardtfn]

I just installed the NordPool integration, so I don't have historical data to try it, so please try and let me know the results:

type: custom:plotly-graph
time_offset: 1.5d
refresh_interval: 300
hours_to_show: 84
layout:
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 7
          step: day
        - count: 12
          step: day
  yaxis:
    rangemode: tozero
    tickformat: .1f
  yaxis2:
    rangemode: tozero
    tickformat: .2f
    fixrange: true
  yaxis9:
    visible: false
    fixedrange: true
round: 2
default: null
entities:
  - entity: sensor.total_energy_utility_meter
    name: Energy consumption
    type: bar
    marker:
      color: rgba(165,165,0,0.6)
    texttemplate: ' %{y:.2f} kr/kWh'
    statistic: state
    period: hour
    filters:
      - fn: |-
          (params) => {
            const ys = [];
            ys.push(0); 
            for (let i = 1; i < params.statistics.length; i++){
              ys.push(params.statistics[i].state-params.statistics[i-1].state);
            }
            return { ys };
          }
  - entity: sensor.nordpool_kwh_se3_sek_3_10_025
    name: Electricity price
    yaxis: y2
    unit_of_measurement: kr/kWh
    line:
      color: rgba(255, 165, 0, 1)
      width: 3
    filters:
      - store_var: electricity_price
      - exponential_moving_average:
          alpha: 1
    show_value: true
    texttemplate: ' %{y:.2f} kr/kWh'
  - entity: sensor.nordpool_kwh_se3_sek_3_10_025
    yaxis: y2
    name: Future price
    fill: tozeroy
    fillcolor: rgba(255, 165, 0,.1)
    line:
      color: rgba(255, 165, 0, 1)
      width: 1
      dash: dot
    filters:
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.electricity_price.xs.slice(-1)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ start }) => new Date(start))],
            ys: [vars.electricity_price.ys.slice(-1)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ value }) => value)],
          })
      - exponential_moving_average:
          alpha: 1
  - entity: ''
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    'y': $fn () => [0,1]

[princetiwoz]

works perfect. Just made minor adjustments to avoid the overlap from the future prices into current prices with a straight line

[edwardtfn]

Great!

Please share the adjustments you have made, so others can use it. 😉

[princetiwoz]

type: custom:plotly-graph
time_offset: 1.1d
refresh_interval: 10
hours_to_show: 84
layout:
xaxis:
rangeselector:
'y': 1.4
buttons:
- count: 7
step: day
- count: 12
step: day
yaxis:
rangemode: tozero
tickformat: .1f
yaxis2:
rangemode: tozero
tickformat: .2f
fixrange: true
yaxis9:
visible: false
fixedrange: true
round: 2
default: null
entities:

• entity: sensor.aidon_energy_monthly
  name: Energy consumption
  type: bar
  marker:
  color: rgba(165,165,0,1)
  texttemplate: ' %{y:.2f} kr/kWh'
  statistic: state
  period: hour
  filters:
  • fn: |-
    (params) => {
    const ys = [];
    ys.push(0);
    for (let i = 1; i < params.statistics.length; i++){
    ys.push(params.statistics[i].state-params.statistics[i-1].state);
    }
    return { ys };
    }
• entity: sensor.nordpool_kwh_krsand_nok_2_10_025
  name: Electricity price
  yaxis: y2
  unit_of_measurement: kr/kWh
  line:
  color: rgba(255, 165, 0, 1)
  width: 3
  filters:
  • store_var: electricity_price
  • exponential_moving_average:
    alpha: 1
    show_value: true
    texttemplate: ' %{y:.2f} kr/kWh'
• entity: sensor.nordpool_kwh_krsand_nok_2_10_025
  yaxis: y2
  name: Future price
  fill: tozeroy
  fillcolor: rgba(255, 165, 0,.1)
  line:
  color: rgba(255, 165, 0, 1)
  width: 1
  dash: dot
  filters:
  • fn: |-
    ({ meta, vars }) => ({
    xs: [vars.electricity_price.xs.slice(-24)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ start }) => new Date(start))],
    ys: [vars.electricity_price.ys.slice(-24)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ value }) => value)],
    })
  • exponential_moving_average:
    alpha: 1
• entity: ''
  name: Now
  yaxis: y9
  showlegend: false
  line:
  width: 1
  dash: dot
  color: deepskyblue
  x: $fn () => [Date.now(), Date.now()]
  'y': $fn () => [0,1]
  

[edwardtfn]

Add a line with ```yaml before your code and another line with ``` after the code in order to format it as yaml. 😉

Like this (with the right Indentation):

```yaml

type: custom:plotly-graph
time_offset: 1.1d
refresh_interval: 10
hours_to_show: 84
layout:
xaxis:
rangeselector:
'y': 1.4
buttons:
```

And then it will look like this:

type: custom:plotly-graph
time_offset: 1.1d
refresh_interval: 10
hours_to_show: 84
layout:
  xaxis:
    rangeselector:
      'y': 1.4
    buttons:
      - count: 7

[princetiwoz]

type: custom:plotly-graph
time_offset: 1.1d
refresh_interval: 10
hours_to_show: 84
layout:
  xaxis:
    rangeselector:
      'y': 1.4
      buttons:
        - count: 7
          step: day
        - count: 12
          step: day
  yaxis:
    rangemode: tozero
    tickformat: .1f
  yaxis2:
    rangemode: tozero
    tickformat: .2f
    fixrange: true
  yaxis9:
    visible: false
    fixedrange: true
round: 2
default: null
entities:
  - entity: sensor.aidon_energy_monthly
    name: Energy consumption
    type: bar
    marker:
      color: rgba(165,165,0,1)
    texttemplate: ' %{y:.2f} kr/kWh'
    statistic: state
    period: hour
    filters:
      - fn: |-
          (params) => {
            const ys = [];
            ys.push(0); 
            for (let i = 1; i < params.statistics.length; i++){
              ys.push(params.statistics[i].state-params.statistics[i-1].state);
            }
            return { ys };
          }
  - entity: sensor.nordpool_kwh_krsand_nok_2_10_025
    name: Electricity price
    yaxis: y2
    unit_of_measurement: kr/kWh
    line:
      color: rgba(255, 165, 0, 1)
      width: 3
    filters:
      - store_var: electricity_price
      - exponential_moving_average:
          alpha: 1
    show_value: true
    texttemplate: ' %{y:.2f} kr/kWh'
  - entity: sensor.nordpool_kwh_krsand_nok_2_10_025
    yaxis: y2
    name: Future price
    fill: tozeroy
    fillcolor: rgba(255, 165, 0,.1)
    line:
      color: rgba(255, 165, 0, 1)
      width: 1
      dash: dot
    filters:
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.electricity_price.xs.slice(-24)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ start }) => new Date(start))],
            ys: [vars.electricity_price.ys.slice(-24)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ value }) => value)],
          })
      - exponential_moving_average:
          alpha: 1
  - entity: ''
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    'y': $fn () => [0,1]

[toldenburger]

Hey Princetiwoz, I use the Tibber Pulse, it gives me hourly and weekly and monthly stats. Which one should I choose?

[princetiwoz]

Hi, sorry for late reply. I also have the tibber data even and i have used it below
Use the monthly consumption data

type: custom:plotly-graph
time_offset: 1.1d
refresh_interval: 10
hours_to_show: 84
layout:
  xaxis:
    rangeselector:
      'y': 1.4
      buttons:
        - count: 7
          step: day
        - count: 12
          step: day
  yaxis:
    rangemode: tozero
    tickformat: .1f
  yaxis2:
    rangemode: tozero
    tickformat: .2f
    fixrange: true
  yaxis9:
    visible: false
    fixedrange: true
round: 2
default: null
entities:
  - entity: sensor.accumulated_month_consumption
    name: Energy consumption
    type: bar
    marker:
      color: rgba(165,165,0,1)
    texttemplate: ' %{y:.2f} kr/kWh'
    statistic: state
    period: hour
    filters:
      - fn: |-
          (params) => {
            const ys = [];
            ys.push(0); 
            for (let i = 1; i < params.statistics.length; i++){
              ys.push(params.statistics[i].state-params.statistics[i-1].state);
            }
            return { ys };
          }
  - entity: sensor.nordpool_kwh_krsand_nok_2_10_025
    name: Electricity price
    yaxis: y2
    unit_of_measurement: kr/kWh
    line:
      color: rgba(255, 165, 0, 1)
      width: 3
    filters:
      - store_var: electricity_price
      - exponential_moving_average:
          alpha: 1
    show_value: true
    texttemplate: ' %{y:.2f} kr/kWh'
  - entity: sensor.nordpool_kwh_krsand_nok_2_10_025
    yaxis: y2
    name: Future price
    fill: tozeroy
    fillcolor: rgba(255, 165, 0,.1)
    line:
      color: rgba(255, 165, 0, 1)
      width: 1
      dash: dot
    filters:
      - fn: |-
          ({ meta, vars }) => ({
            xs: [vars.electricity_price.xs.slice(-24)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ start }) => new Date(start))],
            ys: [vars.electricity_price.ys.slice(-24)[0],...meta.raw_today.concat(...meta.raw_tomorrow).map(({ value }) => value)],
          })
      - exponential_moving_average:
          alpha: 1
  - entity: ''
    name: Now
    yaxis: y9
    showlegend: false
    line:
      width: 1
      dash: dot
      color: deepskyblue
    x: $fn () => [Date.now(), Date.now()]
    'y': $fn () => [0,1]

[toldenburger]

Hey, thank you for your reply.
I still receive an error:
Error: at [entities.2.filters.0]: Error in filter: TypeError: undefined is not an object (evaluating 'meta.raw_today.concat')
and the graph doesn't look like anything useful yet unfortunately

[princetiwoz]

@edwardtfn hi, can you help here

[edwardtfn]

Sure!

Looks like the issue is when rendering the forecast prices, which are not part of the standard Tibber integration (at least it wasn't there the last time I've used that integration).

So my suggestion is to either use the Tibber data integration, as used by @princetiwoz (at least this is what I understood) or use a direct API call as the one I've shared on my original post on the beginning of this discussion.

Tibber Pulse will give info about your consumption, which is past data. The error message you shared is related to the future data.

[princetiwoz]

Real time meter consumption

[princetiwoz]

type: custom:plotly-graph
hours_to_show: 6
refresh_interval: 1
entities:
  - entity: sensor.aidon_active_power_import
    show_value: true
    name: Pulse now
    fill: tozeroy
    line:
      color: orange
      dash: solid
      width: 1
layout:
  yaxis:
    fixedrange: true
  xaxis:
    rangeselector:
      'y': 1.2
      buttons:
        - count: 5
          step: minute
        - count: 1
          step: hour
        - count: 6
          step: hour
        - count: 12
          step: hour
        - count: 1
          step: day

[shedman214]

I'm new to home assistant and want to try to use this as Want to know my energy cost. How do I set this up? Is there an integration for US prices like Nordpool?