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

[MallocArray]

If you go in HomeAssistant to Settings, devices, and then pick your AirGradient, you can click on one of the sensors and get a direct chart from HA showing the values. Make sure this is updating still.

A flat graph can sometimes be caused by the sensor no longer reporting, and HA will just keep showing the last value it got

[Rog]

I don’t know if this is the sort of thing you are after. There are two ways that I use to display real time graphs, including AG, in Home Assitant:

1. Multi graphs

I created the multi graphs in History (select the entities you want from the Choose entity tab). I then created cards for these by clicking on the three vertical dots button then ’ Add current view as card’. You will then be given the option to select the desktop where you want the card displayed.

I had already created a desktop called Graphs and put the cards in there.

The information is displayed in real time and the time scale can be edited once the card is in the desktop by going into Edit dashboard (on that dashboard) then editing that graph. If you want multiple time scale cards, then just duplicate the card and edit the time.

Note - I found that I could show the same type of entity (e.g. PM2.5) from diferent monitors in the same graph window, but if I selected a different type (e.g. Carbon dioxide), then that was put in a new window below.

2. Single graphs

These graphs were created from the Sensor graphs card (the one that shows a graph) in the available cards list. These are displayed in real time, the time scale can be modified in the card settings.

I also put these graphs in a separate dashboard for convenience (I find these graph cards very useful for an instant at-a-glance view). The dashboard uses the new sections feature which makes it very simple to place the cards where you want and use smaller cards…

[wsm]

thanks for the help.

i had flat graph on all sensors. deleted and re-integrated the air monitor and it seems to be working now.

i’m new to HA, and while i love how much control i have over devices and their sensors, having to delete and re-integrate devices seems to be all too common a “solution.” this resets all the “friendly” names i had for all the sensors, which is rather annoying. will this also mean all my cards connected to those sensors will be disconnected and have to be edited to make sure the sensors are talking to the cards correctly?
i deleted all my cards while trying to remedy this issue… otherwise i’d be able to tell.

is this just the way it is? constant deleting and re-integrating when problems arise?

[wsm]

this is very much what i’m hoping to create.

using the History tab, i see what you are doing, creating graphs and them adding them to a Dashboard. bummer you can’t add multiple sensors to one graph. though you can with ApexGraphs and i think Mini Graph. will have to play around with those more.

the Single graph cards do the job and look pretty clean.

messing with all this is kinda time consuming and frustrating, but it’s certainly a good way to learn it.

thanks for your help!

[MallocArray]

I’ve been using HomeAssistant for 3+ years and I think I only deleted a device and added it again for troubleshooting once or twice. Overall, pretty rare.

I’m not using the add-in charts you mentioned, but in the standard ones, you can click “Show code editor” while editing a graph to get to the YAML format that might be quicker for making bulk changes compared to finding the sensors from the list.