Extract value from weather integration and display as hourly graph (met.no & apex charts)

Configuration
1

Hi everyone,

I am a hobbyist looking for some guidance on how to create a simple line graph showing the forecasted precipitation for the upcomming 12 hours, so I can decide wether or not to put on a raincoat when leaving for work.

I hope someone can point me in the right direction as to how to extract the data I need and then vizualise it.

I am familiar with Apex, and would like an end result similar to what I have made for electricity pricing below (the intense blue line)

graf linje
graf linje791×627 40.8 KB

But the data I need is stuck within the weather.home_hourly sensor from the met.no integration:

met
met1616×1730 140 KB

How do I extract this data and make use of it in eg. Apex?

I suppose templating may be part of it?

1 Like
2

Yes using a template sensor is exactly how you would access the value.

template:
  - sensor:
      - name: Precipitation
        state: "{{ state_attr('weather.lj32_hourly','forecast')[0]['precipitation'] }}"
        unit_of_measurement: mm #change this to whatever unit you need
        unique_id: precip-0-962b4930-fdcc-45a8-8145-f8d48202c32c
        attributes:
          date: "{{ state_attr('weather.lj32_hourly','forecast')[0]['datetime'] }}"
      - name: Precipitation 1hr
        state: "{{ state_attr('weather.lj32_hourly','forecast')[1]['precipitation'] }}"
        unit_of_measurement: mm #change this to whatever unit you need
        unique_id: precip-1-962b4930-fdcc-45a8-8145-f8d48202c32c
        attributes:
          date: "{{ state_attr('weather.lj32_hourly','forecast')[1]['datetime'] }}"
4

improved…used 'temperature as precip is almost always 0 here :slight_smile:

type: custom:apexcharts-card
header:
  title: Test
  show: true
graph_span: 5d
span:
  start: day
apex_config:
  dataLabels:
    enabled: true
series:
  - entity: weather.home
    name: Test
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime), entry.temperature];
          });
5

Thanks! We are getting closer!

Precip is 0 here as well, so I tested your code with wind_speed:

type: custom:apexcharts-card
header:
  title: Hourly precipitation
  show: true
graph_span: 1d
apex_config:
  dataLabels:
    enabled: true
series:
  - entity: weather.lj32_hourly
    name: Precipitation
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getDate(), entry.wind_speed];
          });

This generates the following flat line for the next 24h:

hourly
hourly865×639 17.8 KB

I would like to show individual hours. Is it the “date” part that should be adjusted?

One clue is possibly that 11,2 is the last (+24h) data point in the forecast?

image
image793×701 62.5 KB

6

try to change getDate() in getTime()…i cannot test this as I do not have hourly sensors

7

Possibly you can remove getTime / Date and probably graph_span too all in all…apex is pretty smart too :slight_smile: …you have to play around a bit with your data-set

8

Thanks again, that works. It looks like this with both precip (nedbør) and probability (sannsynlighet).

image
image832×609 28.5 KB 

type: custom:apexcharts-card
header:
  title: Nedbør og temperatur
  show: true
graph_span: 12h30m
now:
  show: true
span:
  start: hour
apex_config:
  dataLabels:
    enabled: true
yaxis:
  - id: mm
    decimals: 1
    min: 0
    max: ~5
  - id: prosent
    opposite: true
    decimals: 1
    min: 0
    max: 100
series:
  - entity: weather.lj32_hourly
    yaxis_id: prosent
    name: Nedbør sannsynlighet
    type: line
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.precipitation_probability];
          });

  - entity: weather.lj32_hourly
    yaxis_id: mm
    name: Nedbør
    type: column
    data_generator: |
      return entity.attributes.forecast.map((entry) => {
            return [new Date(entry.datetime).getTime(), entry.precipitation];
          });


``
3 Likes