24h precipitation forecast / 24u buienradar buienalarm

Share your Projects! Dashboards & Frontend
18

Hi all,
this post is archived.
See this post for the updated version.

old post

This is the updated version of a two-hour forecast chart, blocks of 5 minutes. The scan_interval is set to 240 seconds = 4 minutes.

Hope this helps,

– Ingrid

STEP 1

Get the latitude and longitude of your location.

STEP 2
Set up sensors in your configuration.yaml file.

Buienalarm

  • Change <lat-3-decimals> and <lon-3-decimals> to your values.
command_line:
  - sensor:
      name: weather_buienalarm_direct
      command: python3 -c "import requests; import json; import random; dataRequest = requests.get('https://cdn-secure.buienalarm.nl/api/3.4/forecast.php?lat=<lat-3-decimals>&long=<lon-3-decimals>&region=nl&unit=mm%2Fu',headers={'Cache-Control':'no-cache'}).text; dataRequest = dataRequest.replace('\r\n',' '); data = '{\"data\":'+dataRequest+'}'; print(data);"
      unique_id: 1701605718
      json_attributes:
        - data
      value_template: "last_changed: {{states.sensor.weather_buienalarm_direct.last_changed | default(now())}}"
      scan_interval: 240

Buienradar

  • Change <lat-2-decimals> and <lon-2-decimals> to your values.
command_line:
  - sensor:
      name: weather_buienradar_direct
      command: python3 -c "import requests; import json; import random; dataRequest = requests.get('https://graphdata.buienradar.nl/2.0/forecast/geo/RainHistoryForecast?lat=<lat-2-decimals>&lon=<lon-2-decimals>',headers={'Cache-Control':'no-cache'}).text; dataRequest = dataRequest.replace('\r\n',' '); data = '{\"data\":'+dataRequest+'}'; print(data);"
      unique_id: 1701083815
      json_attributes:
        - data
      value_template: "last_changed: {{states.sensor.weather_buienradar_direct.last_changed | default(now())}}"
      scan_interval: 240

STEP 4

To display the graph you need the ApexCharts card by @RomRider.

The data_generator starts with some JS removing timepoints that have already passed.

type: custom:apexcharts-card
series:
  - entity: sensor.weather_buienalarm_direct
    name: buienalarm
    color: rgb(3, 170, 244)
    data_generator: >
      var input=entity.attributes.data;var
      start=input.start*1000,delta=input.delta*1000;var
      out=[];input.precip.map((entry,index)=>{if(new
      Date(start+(index*delta))>new Date()){out.push([new
      Date(start+(index*delta)),entry])}}); console.dir(out.slice(0,22)); return
      out.slice(0,22);
  - entity: sensor.weather_buienradar_direct
    name: buienradar
    color: rgb(3, 150, 244)
    data_generator: >
      var input=entity.attributes.data.forecasts;var
      out=[];input.map((entry,index)=>{if(new Date(entry.datetime)>new Date()){
      out.push([new Date(entry.datetime),entry.precipitation])}});return
      out.slice(0,22);
header:
  show: true
  title: 2h precipitation forecast
span:
  start: minute
graph_span: 2h
all_series_config:
  stroke_width: 3
  unit: mm/u
  type: area
  opacity: 0.2
  show:
    offset_in_name: false
apex_config:
  chart:
    height: 250px
  legend:
    show: false
  xaxis:
    tooltip: false
    border:
      show: true
    labels:
      format: HH:mm
      rotate: -45
      rotateAlways: true
      style:
        fontSize: 10px
  yaxis:
    - min: 0
      max: |
        EVAL:function (max) {
          window.chart2u_max = (Math.round(max*2)/2) + 0.5;
          return window.chart2u_max;
        }
      tickAmount: 5
      title:
        text: rain (mm/u)
  grid:
    xaxis:
      lines:
        show: true
  tooltip:
    enabled: true
    shared: true
    x:
      show: true
      format: ddd d MMM HH:mm
    'y':
      formatter: |
        EVAL:function (y) {
          return y.toFixed(2)
        }
  annotations:
    position: back
    yaxis:
      - 'y': 0.4
        label:
          text: 'EVAL:(window.chart2u_max > 0.4 ? ''Light'' : '''')'
          style:
            background: '#666'
            color: '#FFF'
        borderColor: 'EVAL:(window.chart2u_max > 0.4 ? ''#000'' : ''none'')'
      - label:
          text: 'EVAL:(window.chart2u_max > 2 ? ''Medium'' : '''')'
          style:
            background: '#666'
            color: '#FFF'
        'y': 2
        borderColor: 'EVAL:(window.chart2u_max > 2 ? ''#000'' : ''none'')'
      - label:
          text: 'EVAL:(window.chart2u_max > 2 ? ''Heavy'' : '''')'
          style:
            background: '#666'
            color: '#FFF'
        'y': 5
        borderColor: 'EVAL:(window.chart2u_max > 5 ? ''#000'' : ''none'')'
1 Like