Apexcharts and Openweathermap Forecast examples

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: '%'

Perhaps include a screenshot to show your work off?

1 Like

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

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

Bildschirmfoto-20240318140036-682x473
this is the apexchart that is being produced. no additional sensor is required

2 Likes