Home Assistant control panels for AirGradient data

[sesivany]

Hi, I got the outdoor AirGradient air quality monitor and connected it to Home Assistant. I wonder what other people have as control panels/cards to present the data. I’m especially interested in recreation of the AirGradient dashboard graph (showing bars of 5-minute averages in different colors based on the value).

I’ve created the following, but as it is now it should draw every change of the value, which is too many, so the graph is not drawn, only “loading”. I should create 5-minute-average entity out of sensor.o_1pst_pm2_5, but no success with that yet.

[sesivany]

I’ll answer to myself:

Here is what I put together:

I installed Apexcharts-card from HACS and this is how the card is defined:

type: custom:apexcharts-card
header:
  title: Air Quality (PM 2.5)
  show: true
experimental:
  color_threshold: true
series:
  - entity: sensor.o_1pst_pm2_5
    name: Current value
    type: column
    stroke_width: 0
    statistics:
      type: mean
      period: 5minute
    color_threshold:
      - value: 0
        color: green
      - value: 9.1
        color: yellow
      - value: 35.5
        color: orange
      - value: 55.5
        color: red
      - value: 125.5
        color: purple
      - value: 225.5
        color: burgundy
      - value: 1000
        color: blue
  - entity: sensor.o_1pst_pm2_5
    name: 24h median
    group_by:
      func: median
      duration: 24h
    type: line
    stroke_width: 1
apex_config:
  annotations:
    yaxis:
      - "y": 5
        borderColor: skyblue
        label:
          text: WHO Air Guality Guideline
          style:
            color: white
            background: skyblue
  chart:
    height: 250
    type: bar
  xaxis:
    type: datetime
graph_span: 12h
update_interval: 5min