Display data for the future in a card

Configuration Frontend
1

The Tibber integration is working quite nicely. I get the data for the next 24 h - just as promised.
My problem:
How do I display this data in a card?

I would like to show a graph displaying the electricity costs for the next 24 hours. But I fail to find an option to do that.
So far, every card seems to work with historic data, without any option to choose anything else.

2

How is the next 24 h data received? Do you get it as the state of any sensor or even state attribute?

3

It’s a sensor: https://www.home-assistant.io/integrations/tibber
There is a nice example for an automation on the page. But I have no idea how to display data.

4

If its a sensor, then you just need to check out this custom card.

5

But how do I display future data points?
I do have the Tibber price in exactly this graph. But it shows the last 24 hours. That’s interesting - but not helpful if I want to know what happens tomorrow.

6

Oh i got you now. If you are using grafana addon, there is a provision for plotting forecast values. Other than that there are no ready made solution available. But if you have some experience with javascript you can edit this custom card and make it adapt to tibber sensor.
This is to forcast rain but I have heard the script is simple

7

I was afraid to hear that.

8

Grafana is the simpler option but you will need to use any database addon like influx db to push data to it.

9

You could use this custom component:


ex2
ex2897×582 86.5 KB
3 Likes
10

Sadly, this solution is broken now.

11

Apex Cards?

1 Like
12

Hi,
I guess my approach here solves your problem:

1 Like
13

Well, it looks like a reasonable workaround.

(I wouldn’t call it a solution, as it really is just a workaround with quite some effort.)

14

Did you look up this solution: Display future values in a graph - #7 by lowlander1977 ?
I did not try it yet, but it seems to exactly do what you want. My usecase would also be to display future electricity prices, in my case from awattar

15

I have recently moved away from ApexChart and now I have my future price chart using Plotly. I’m enjoying the results so far…

image
image1920×1628 102 KB

16

Also looks good.

This is my first attemp, easy to configure:

grafik

Why did you move to Plotly? Since i don’t have any experience with it, what is better there? Maybe i stop investigating in apex and also use plotly.

1 Like
17

My main reason to move was the capability to easily navigate into the past data, zoom, etc…

But to be honest, I’m not using those functionalities that much… maybe just because I’m not that familiar with this yet…

18

This looks really great! Can you please share the code or explain how i could get this nice graph?

19

Sure

grafik

This is an Apex Card: ApexCharts card - A highly customizable graph card

Readme: apexcharts-card/README.md at master · RomRider/apexcharts-card · GitHub

The Code is as follows:

type: custom:apexcharts-card
experimental:
  hidden_by_default: true
graph_span: 45h
all_series_config:
  stroke_width: 2
span:
  start: hour
  offset: '-25h'
now:
  show: true
update_interval: 5min
header:
  show: true
  title: Strompreisprognose (€/kWh)
  show_states: true
  colorize_states: true
series:
  - entity: sensor.awattar_full
    yaxis_id: left
    type: line
    float_precision: 5
    name: Preisprognose
    curve: stepline
    unit: €/kWh
    show:
      in_header: false
      extremas: true
      legend_value: false
    data_generator: |
      return entity.attributes.data.map((record, index) => {
              return [record.start_timestamp, record.marketprice /1000 * 1.20];
            });
  - entity: sensor.awattar_current
    name: Preis
    yaxis_id: left
    type: line
    float_precision: 5
    unit: €/kWh
    curve: stepline
    extend_to: now
    fill_raw: last
    show:
      hidden_by_default: false
      legend_value: false
  - entity: sensor.awattar_median
    yaxis_id: left
    type: line
    curve: stepline
    fill_raw: last
    float_precision: 5
    name: Median
    unit: €/kWh
    show:
      hidden_by_default: true
      legend_value: false
  - entity: sensor.awattar_terzil2
    yaxis_id: left
    type: line
    curve: stepline
    fill_raw: last
    float_precision: 5
    name: oberstes Terzil
    unit: €/kWh
    show:
      hidden_by_default: false
      legend_value: false
  - entity: sensor.wirkenergie
    curve: stepline
    type: area
    opacity: 0.3
    name: Bezug
    extend_to: now
    show:
      in_header: false
      legend_value: false
    yaxis_id: right
    group_by:
      func: delta
      duration: 1h
      fill: zero
yaxis:
  - id: left
    decimals: 2
    min: 0
  - id: right
    opposite: true
    decimals: 2
    min: 0
    max: 10
    show: false
1 Like
20

Thanks, so sensor.awattar_full is somehow providing future data, right? I am using tibber. Nor sure if I can use their sensor, for this, too.