Creating forward looking charts

Third party integrations
1

Hi,

I’m pretty new to home assistant and I’m trying to create some code that predicts my home battery and solar for the next 24 hours. The idea is it uses the Solar information from Solcast together with my historical consumption to create a prediction of the battery levels.

I’m using AppDeamon to allow me to write this all in Python as the YML doesn’t really do what I want.

So I have written the first version now and I have my prediction which is an array of values, one per minute.

The question is how can I chart this data? All the charts I see in HA are historical sensor data but this is forward looking information. Is there a way I can save the data such that it will show up on a chart widget?

2

You could possibly use Apexcharts and if the data is not (yet) correct for it, since you are at the root of it you may be able to adapt it too.
You can share something here or go to the vast post on that card
RomRider/apexcharts-card: :chart_with_upwards_trend: A Lovelace card to display advanced graphs and charts based on ApexChartsJS for Home Assistant (github.com)
ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

Alternative is plotly
Plotly interactive Graph Card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

3

Thanks for the pointer.
I guess I don’t understand the fundamental principal, how should I pass the data across. Should I put the array of data with a timestamp and value into an attribute on the sensor?

4

Add the data you have in this post please, let’s see if I or someone else can help
Would be great if you cna provide it formatted as it would be in a HA entity

5

As an example, I have this in one of mine (as attribute) which allows a Apexchart

dailyweek_MP:
  - 1.55
  - 2.41
  - 4.28
  - 2.43
  - 3.27
  - 2.54
  - 3.16
dailyweek_MP_time:
  - '2023-04-27 08:56:41'
  - '2023-04-26 19:13:18'
  - '2023-04-25 18:52:30'
  - '2023-04-24 19:13:15'
  - '2023-04-23 19:17:43'
  - '2023-04-22 19:19:03'
  - '2023-04-21 21:28:51'

EDIT, this would work too

result:
  '2023-04-28 06:29:02': 0
  '2023-04-28 07:00:00': 85
  '2023-04-28 08:00:00': 615
  '2023-04-28 09:00:00': 1036
  '2023-04-28 10:00:00': 1256
  '2023-04-28 11:00:00': 1568
  '2023-04-28 12:00:00': 1791
  '2023-04-28 13:00:00': 1739
  '2023-04-28 14:00:00': 1537
  '2023-04-28 15:00:00': 1185
  '2023-04-28 16:00:00': 788
  '2023-04-28 17:00:00': 421
6

If you pick plotly, this example is very relevant:

image
image986×662 44 KB

7

Okay so I have some data now similar to your above, it’s stored under an attribute ‘results’ in a state element predbat.battery_hours left

I have an Apexcard as below, but it just plots the sensor value, how can I get it to plot my time/values?

type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:

  • entity: predbat.battery_hours_left

— Data —

[{‘2023-04-28 23:31:00+01:00’: 7.2626500000000185}, {‘2023-04-28 23:32:00+01:00’: 7.2626500000000185}, {‘2023-04-28 23:33:00+01:00’: 7.2626500000000185}, {‘2023-04-28 23:34:00+01:00’: 7.2626500000000185}, {‘2023-04-28 23:35:00+01:00’: 7.162650000000019}, {‘2023-04-28 23:36:00+01:00’: 7.162650000000019}, {‘2023-04-28 23:37:00+01:00’: 7.162650000000019}, {‘2023-04-28 23:38:00+01:00’: 7.162650000000019}, {‘2023-04-28 23:39:00+01:00’: 7.162650000000019}, {‘2023-04-28 23:40:00+01:00’: 7.062650000000019}, {‘2023-04-28 23:41:00+01:00’: 7.062650000000019}, {‘2023-04-28 23:42:00+01:00’: 6.962650000000018}, {‘2023-04-28 23:43:00+01:00’: 6.862650000000018}, {‘2023-04-28 23:44:00+01:00’: 6.7626500000000185}, {‘2023-04-28 23:45:00+01:00’: 6.7626500000000185}, {‘2023-04-28 23:46:00+01:00’: 6.7626500000000185}, {‘2023-04-28 23:47:00+01:00’: 6.662650000000019}, {‘2023-04-28 23:48:00+01:00’: 6.662650000000019}, {‘2023-04-28 23:49:00+01:00’: 6.562650000000019}, {‘2023-04-28 23:50:00+01:00’: 6.4626500000000195}, {‘2023-04-28 23:51:00+01:00’: 6.4626500000000195}, {‘2023-04-28 23:52:00+01:00’: 6.4626500000000195}, {‘2023-04-28 23:53:00+01:00’: 6.4626500000000195}, {‘2023-04-28 23:54:00+01:00’: 6.4626500000000195}, {‘2023-04-28 23:55:00+01:00’: 6.4626500000000195}, {‘2023-04-28 23:56:00+01:00’: 6.36265000000002}, {‘2023-04-28 23:57:00+01:00’: 6.36265000000002}, {‘2023-04-28 23:58:00+01:00’: 6.36265000000002}, {‘2023-04-28 23:59:00+01:00’: 6.26265000000002}]

8

The one ith ‘result’ is actually showing solar forecast figures
I made the apex using this (yes…it is not that straifghtforward)

type: custom:apexcharts-card
graph_span: 36h
now:
  show: true
  label: ''
  color: red
span:
  start: day
  offset: +6h
header:
  show: true
  title: Solar Forecast
  show_states: false
  colorize_states: true
series:
  - entity: sensor.solar_forecast_watt_hours_period
    curve: smooth
    color: '#df6366'
    type: line
    opacity: 0.6
    offset: '-1h'
    stroke_width: 1
    data_generator: >
      let res = []; for (const [key, value] of
      Object.entries(entity.attributes.result)) {
      res.push([new Date(key).getTime(), value]);
      } return res.sort((a, b) => { return a[0] - b[0]  })
9

Once you have the graph you’d have to play a bit with span/start/etc. to tune it

10

Awesome that works!

image

11

Good, so now it is tuning time, stroke_width for the offset, span, extend-to to remove the horizontal at the end, etc…check the doc and the posts for many MANY examples

EDIT: plotly has these options too and can go beyond imagination at times :slight_smile:

3 Likes