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

[prouser]

Does anyone else have any interesting HA cards for their AirGradient devices?

I decided to overhaul my HA dashboard so am looking for some inspiration with some new cards. Thanks.

[wsm]

i’m also trying to build out my HA dashboard with graphs from my AirGradient ONE.

i’ve played around with Apex Charts, including copying @sesivany’s ymal. and played with Mini Graph cards. i’m pretty new to HA, so i’m sure i’ve flubbed up the code as the sensor levels are not changing on the graphs for some reason…

it’s frustrating that it’s so difficult to add more than one sensor to a single graph. i got it done with Mini Graph, but again, messed up somewhere to cause the graph not to change with the actual sensor. i think i have it displaying the mean level or something. so it just says 740 CO2 with a straight line across the graph. same with every entity i’ve tried to add…

i’d also love to be able to toggle the timeline, similar to AirGradients dashboard.

here’s my yaml for my ApexChart, taken from @sesivany:

type: custom:apexcharts-card
header:
title: Air Quality (CO2)
show: true
experimental:
color_threshold: true
series:

• entity: sensor.i_9psl_carbon_dioxide
  name: Current value
  type: column
  stroke_width: 0
  statistics:
  type: mean
  period: 5minute
  color_threshold:
  • value: 0
    color: green
  • value: 600
    color: yellow
  • value: 800
    color: orange
  • value: 1000
    color: red
  • value: 1200
    color: purple
  • value: 1400
    color: burgundy
  • value: 1600
    color: blue
• entity: sensor.i_9psl_carbon_dioxide
  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: 24h
    update_interval: 5min