Apexcharts and Openweathermap Forecast examples

[ploeffler (Peter)]

This is a working example of the 3 (for me) most important values of a forecast: temperature, cloud-coverage and precipitation-probability. if you use another weatherforecast integration than openweathermap the naming of the values could vary (sorry for the german wordings, but I guess you get what is behind)

type: custom:apexcharts-card
header:
  show: true
  title: Vorhersage
  show_states: false
  colorize_states: true
now:
  show: true
span:
  start: hour
graph_span: 36h
apex_config:
  dataLabels:
    enabled: true
all_series_config:
  stroke_width: 1
yaxis:
  - id: degrees
    decimals: 1
  - id: prozent
    opposite: true
    decimals: 1
    min: 0
    max: 100
series:
  - entity: weather.openweathermap
    name: Temperatur
    yaxis_id: degrees
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
        return [new Date(entry.datetime).getTime(), entry.temperature];
      });
    unit: °C
    color: red
  - entity: weather.openweathermap
    name: Niederschlagswahrscheinlichkeit
    yaxis_id: prozent
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.precipitation_probability];
          });
    color: blue
    unit: '%'
  - entity: weather.openweathermap
    name: Bewölkung
    yaxis_id: prozent
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.cloud_coverage];
          });
    color: orange
    unit: '%'

[Troon]

Perhaps include a screenshot to show your work off?

[jchh ((not John))]

@ploeffler

(sorry for the german wordings,

Please don’t apologise for this - it’s appreciated that you are sharing

Here are mine:

template sensors

# temp forecast ----------------------------------------------------------------
      - name: Weather temp
        unique_id: weather_temp
        device_class: temperature
        unit_of_measurement: '°C'
        state: "{{ state_attr('weather.openweathermap','temperature') }}"
        attributes:
          forecast_state: |
            {{
              state_attr('weather.openweathermap', 'forecast')
              | map(attribute="temperature")
              | map("float")
              | map("round",1)
              | list
            }}        
          forecast_time: |
            {{
              (state_attr('weather.openweathermap', 'forecast')
              | map(attribute="datetime")
              | list)[0:48]
            }}        

# rain forecast ----------------------------------------------------------------
      - name: Weather rain
        unique_id: weather_rain
        device_class: precipitation
        unit_of_measurement: mm
        state: "{{ states('sensor.openweathermap_rain') }}"
        attributes:
          forecast_state: |
            {{
              state_attr('weather.openweathermap', 'forecast')
              | map(attribute="precipitation")
              | map("float")
              | list
            }}        
          forecast_time: |
            {{
              (state_attr('weather.openweathermap', 'forecast')
              | map(attribute="datetime")
              | list)[0:48]
            }}        

# pressure forecast ------------------------------------------------------------
      - name: Weather pressure
        unique_id: weather_pressure
        device_class: pressure
        unit_of_measurement: hPa
        state: "{{ state_attr('weather.openweathermap','pressure') }}"
        attributes:
          forecast_state: |
            {{
              state_attr('weather.openweathermap', 'forecast')
              | map(attribute="pressure")
              | map("int")
              | list
            }}        
          forecast_time: |
            {{
              (state_attr('weather.openweathermap', 'forecast')
              | map(attribute="datetime")
              | list)[0:48]
            }}

# wind forecast ----------------------------------------------------------------
      - name: Weather wind
        unique_id: weather_wind
        device_class: wind_speed
        unit_of_measurement: mph
        state: "{{ (state_attr('weather.openweathermap','wind_speed')*0.62)|round(1) }}"
        attributes:
          forecast_state: |
            {{
              (
                state_attr('weather.openweathermap', 'forecast')
                | map(attribute="wind_speed")
                | map("float")
                | map("multiply", 0.62 )
                | map("round",1)
                | list
              )[0:48]
            }}
          forecast_time: |
            {{
              (
                state_attr('weather.openweathermap', 'forecast')
                | map(attribute="datetime")
                | list
              )[0:48]
            }}     

Have not used this in a while so still looking for the corresponding apex-chart dashboard yaml

[ploeffler (Peter)]

this is the apexchart that is being produced. no additional sensor is required

[derSchreifritz]

is this still working? After the latest ha upgrade, mine was unavailable, seems the function was deprecated and removed.
I followed this workaround, in case it helps anyone:

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

Found a workaround. Create this template Note your original wwather entity is used twice After reboot a new sensor sensor.forecast_home_hourly is available Due to /1 time trigger, wait at least an hour to see it populated 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: enabl…

when creating the new template sensor, I replaced forecast-home with openweathermap, so I now have:

 - trigger:
      - platform: time_pattern
      #  hours: "/1"
        minutes: "/1"
       
   action:
      - service: weather.get_forecasts
        data:
          type: hourly
        target:
          entity_id: weather.openweathermap
        response_variable: hourlyforecast
   sensor:
      - name: "Forecast Home Hourly"
        unique_id: bis202312041810
        icon: mdi:weather-cloudy-clock
        state: "{{ now().isoformat() }}"
        attributes:
          forecast: "{{ hourlyforecast['weather.openweathermap']['forecast'] }}" 

will change the trigger back to hours. This one was just for not having to wait one hour to check…
Then, in the apex chart config, replaced entity weather.openweathermap with

- entity: sensor.forecast_home_hourly

Done. For now…

[DoubleWhisky]

Apologies. I am not so experienced with HA. Where do I create this - trigger in YAML? I’ve been using same Apexchart / forecast solution and trying to fix it.

[jchh ((not John))]

@DoubleWhisky

Where do I create this - trigger in YAML?

It’s a trigger-based template sensor, so goes into configuration.yaml (unless you have split it out). The full header looks like this:

template:
  - trigger:
    ...
    action:
    ...
    sensor:
      - name:
        ...

[DoubleWhisky]

Simple as that… thank you so much! Working fine again

[freeDom-1 (Dominik)]

I am trying to get it right since hours, but I can’t figure out what is actually the problem. I setup the template sensor as described above. My sensors forecast attribute is looking like this:

[{'datetime': datetime.datetime(2024, 6, 2, 17, 0, tzinfo=datetime.timezone.utc), 'precipitation': None, 'precipitation_probability': None, 'cloudcover_percentage': 100, 'cloudless_percentage': 0, 'cloud_area_fraction': 100, 'cloud_area_fraction_high': 100, 'cloud_area_fraction_medium': 2, 'cloud_area_fraction_low': 21, 'fog_area_fraction': 0, 'seeing_percentage': 75, 'transparency_percentage': 35, 'lifted_index': -4, 'condition': 41, 'precipitation_amount': 0.0, 'calm_percentage': 74, 'wind_speed': 4.2, 'wind_bearing': 'NW', 'temperature': 17.8, 'humidity': 85}, {'datetime': datetime.datetime(2024, 6, 2, 18, 0, tzinfo=datetime.timezone.utc), 'precipitation': None, 'precipitation_probability': None, 'cloudcover_percentage': 100, 'cloudless_percentage': 0, 'cloud_area_fraction': 100, 'cloud_area_fraction_high': 100, 'cloud_area_fraction_medium': 19, 'cloud_area_fraction_low': 44, 'fog_area_fraction': 0, 'seeing_percentage': 65, 'transparency_percentage': 0, 'lifted_index': -1, 'condition': 35, 'precipitation_amount': 0.1, 'calm_percentage': 75, 'wind_speed': 4.1, 'wind_bearing': 'NW', 'temperature': 17.3, 'humidity': 86},..]

When trying to use the apex charts as I used to and as described above, the chart states “loading…”. Is this related to the date being stored as python date format? When I call the service I receive normal datestring, but it looks like storing it as a template saves it in this python date format that js cannot understand.
For completeness, here is the chart I am using, which worked before the update (replaced the entity with my template sensor):

type: custom:apexcharts-card
header:
  show: true
  title: ApexCharts-Card
  show_states: true
  colorize_states: true
now:
  show: true
graph_span: 48h
span:
  start: hour
  offset: '-1h'
series:
  - entity: sensor.astroweather_hourly_forecast
    name: Lifted Index
    unit: K
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
        return [new Date(entry.datetime).getTime(), entry.lifted_index];
      });

And here is my template sensor:

# Astroweather
- trigger:
    - platform: time_pattern
      hours: /1
  action:
    - service: weather.get_forecasts
      target:
        entity_id:
          - weather.astroweather
      data:
        type: hourly
      response_variable: hourly_forecast
  sensor:
    - name: Astroweather hourly Forecast
      unique_id: astroweather_hourly_forecast
      state: "{{ now().isoformat() }}"
      icon: mdi:hours-24
      attributes:
        forecast: "{{ hourly_forecast['weather.astroweather']['forecast'] }}"

[SimoneC (Simone)]

This works for me too but VS Studio Code complains about “Property action is not allowed” on “action:” is not supported.
It is a little annoyng, any chance to correct or ignore the error ?