Integrate Hourly forecast in apex-charts after update to service.get_forecast

Configuration Frontend
1

Hi all,

after upgrading to the latest Home Assistant (from 2024.1.x to 2024.3.2), it seems that Meteorologisk institutt (Met.no) forecasts “lost” the hourly entity, which I used in apexcharts to draw the temperature for the next 24 hours. This information, if I understand it correctly, is now available by calling the service.get_forecast with hourly option (which works in the developer section nicely). But I have no idea, how I can retrieve it from within an apexcharts card or how to get the service data into an own entity or its attributes.

The code I used pefore looks like this:

  - entity: weather.homebw_hourly
    show:
      extremas: true
      offset_in_name: false
      legend_value: false
    float_precision: 1
    yaxis_id: outtemp
    stroke_width: 1
    color: green
    unit: °C
    group_by:
      fill: 'null'
    data_generator: |
      var now = new Date();
      var tdata = entity.attributes.forecast.map(
          (f) => {
            var ctime = new Date(f.datetime);
            return [ctime.getTime(), f.temperature];
          }        
        );
      tdata.unshift([now.getTime(), entity.attributes.temperature]);
      return tdata;

Any help is appreciated.

Regards,
Daniel

2

Did you figure this out? I have the same issue

This is wat I used: (slightly different)

data_generator: |
  return entity.attributes.forecast.map((entry) => {
        return [new Date(entry.datetime).getTime(), entry.temperature];
      });
3

Found a workaround.

  1. Create this template
  2. Note your original wwather entity is used twice
  3. After reboot a new sensor sensor.forecast_home_hourly is available
  4. Due to /1 time trigger, wait at least an hour to see it populated
  5. Use the new sensor.forecast_home_hourly in apex-chart
type: custom:apexcharts-card
header:
  title: ' '
  show: true
graph_span: 8h00m
span:
  start: hour
  offset: +0.5h
apex_config:
  chart:
    type: line
    height: 250
  legend:
    show: false
  dataLabels:
    enabled: true
    offsetY: -10
    style:
      fontSize: 28px
      colors:
        - lightblue
    background:
      enabled: true
      foreColor: '#111'
      padding: 4
      borderRadius: 10
      borderWidth: 2
      borderColor: '#111'
      opacity: 0.5
  xaxis:
    labels:
      style:
        fontSize: 28px
yaxis:
  - id: temp
    opposite: false
    decimals: 1
    show: false
series:
  - entity: sensor.forecast_home_hourly
    yaxis_id: temp
    name: Temperatuur
    type: line
    color: steelblue
    stroke_width: 5
    show:
      in_header: false
      datalabels: true
      in_chart: true
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.temperature];
          });
card_mod:
  style: |
    ha-card {
      --ha-card-background: rgba(0,0,0,0);
        box-shadow: none !important;
        border-style: none;
    }
1 Like