How to visualize hourly UV index from weather forecast API in a chart?

Configuration Frontend
1

What kind of card would you recommend for that? Thanks!

2

I use the Australian ARPANZA service via a rest sensor and an apexchart for display:

Screenshot 2024-08-12 at 11-23-50 Administration – Home Assistant

type: custom:apexcharts-card
apex_config:
  chart:
    height: 100%
  dataLabels:
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 24h
header:
  show: true
  show_states: true
  title: UV Index
experimental:
  color_threshold: true
yaxis:
  - id: left
    decimals: 1
    apex_config:
      forceNiceScale: true
series:
  - entity: sensor.uv_index
    stroke_width: 2
    type: line
    color: rgb(192,192,192)
    yaxis_id: left
    float_precision: 0
    statistics:
      type: max
      period: 5minute
      align: middle
    show:
      datalabels: false
      extremas: false
      name_in_header: false
    color_threshold:
      - color: '#b200ff'
        value: 10.5
      - color: '#e45e65'
        value: 7.5
      - color: '#ff8000'
        value: 5.5
      - color: '#e0b400'
        value: 2.5
      - color: '#0da035'
        value: 0
    header_actions:
      tap_action:
        action: more-info

If you want a bar chart that can be done too.

Screenshot 2024-08-12 at 11-23-02 Administration – Home Assistant

type: custom:apexcharts-card
apex_config:
  chart:
    height: 100%
  dataLabels:
    background:
      enabled: false
    style:
      colors:
        - var(--primary-text-color)
graph_span: 24h
header:
  show: true
  show_states: true
  title: UV Index
experimental:
  color_threshold: true
yaxis:
  - id: left
    decimals: 1
    apex_config:
      forceNiceScale: true
series:
  - entity: sensor.uv_index
    type: column
    float_precision: 1
    group_by:
      func: last
      duration: 1h
    show:
      datalabels: false
      extremas: false
      name_in_header: false
    color_threshold:
      - color: '#b200ff'
        value: 10.5
      - color: '#e45e65'
        value: 7.5
      - color: '#ff8000'
        value: 5.5
      - color: '#e0b400'
        value: 2.5
      - color: '#0da035'
        value: 0
    header_actions:
      tap_action:
        action: more-info
1 Like
3

Thanks. The issue is this is a forecast for the future (hourly) so I have a list of values. Can that be fed to a chart?

4

Possibly, have a look here: Apexcharts and Openweathermap Forecast examples

1 Like
5

Hi Tom, would you mind sharing your rest sensor config. I’m trying to create one, but struggling.

This is what I ended up with:

sensor:
  - platform: rest
    name: UV Index Sydney
    resource: https://uvdata.arpansa.gov.au/xml/uvvalues.xml
    headers:
      Content-Type: application/xml
    value_template: >
      {% for location in value_xml.stations.location %}
        {% if location['@id'] == 'Sydney' %}
          {{ location.index }}
        {% endif %}
      {% endfor %}
    unit_of_measurement: "UV Index"
    scan_interval: 600
6

I use the command line. I would not recommend this.

command_line:
  - sensor:
      name: UV Index
      unique_id: c2d041f0-05b6-46e2-af8b-685c7fd0a580
      command: "curl -k --silent 'https://uvdata.arpansa.gov.au/xml/'|sed -n '77p'|cut -c 12-14"
      availability: "{{ value|is_number}}"
      unit_of_measurement: " "
      state_class: measurement

If you use it you will have to adjust it for your location. Just visit https://uvdata.arpansa.gov.au/xml/ in your web browser to work out which value you need to adjust the sed/cut commands for. I’m pretty sure I had help with this because I do not remember how it works. There may even have been instructions on the ARPANSA web page at one time, there isn’t now.

You will need to adjust it if a new site is added (they are always sorted alphabetically). I have had to do this once already. I ended up getting the Macquarie island UV index for weeks before I noticed.

I really should do a search for the correct location rather than relying on the position. This is why I don’t recommend it.

7

Ok, I got some good advice on discord. Try this:

sensor:
  - platform: rest
    unique_id: uv_index_sydney
    name: UV Index Sydney
    resource: https://uvdata.arpansa.gov.au/xml/uvvalues.xml
    value_template: >
      {% if value_json is defined %}
        {{ value_json.stations.location | selectattr('name', 'eq', 'syd') | map(attribute='index') | join }}
      {% else %}
        {{ this.state }}
      {% endif %}
    unit_of_measurement: "UV Index"
    scan_interval: 600