Bar Charts by Zone

[m_dap (Marc d'Apice)]

Hi All, I have been driven nuts by GPT’s and Copilot recently trying to get my desired outcome so I thought I’d try the real brains trust.

Problem Statement:
I have a house with air conditioning and 5 zones, all of which I have integrated to be controlled from Home Assistant.
I can use the climate entities attribute temperature to set the desired temperature on each zone.
I also have temperature sensors in all the rooms in each zone (for the purpose of this example I am going to ignore the zones that have multiple temperature sensors in the same zone).

I want to construct a bar graph to show how far off the desired temperature the actual room temp is. Here is an example of what I want to see (note, all the desired temps in this image are set at 25oC)
Zones 1, 3 and 4 are below the desired temp and need to heat up.
Zone 2 is exactly perfect
Zone 5 is too hot

Help, please!

[tom_l]

There are a couple of ways to do this. Would you have any need for the the actual difference values (above or below) in your automations?

If so, for each zone:

Define a template sensor that returns 0 or the positive difference between your current temperature and the set point. This is your above value.

Define a template sensor that returns 0 or the negative difference between your current temperature and the set point. This is your below value.

Then it is simply a matter of plotting the above, below and current sensors as series in an apexcharts stacked column chart. Set the colours for each series appropriately.

If you don’t need the above or below values then it can still be done in apexcharts but you have to define a transformation using JavaScript for the above and below series.

Which method would you like help with?

[m_dap (Marc d'Apice)]

Thanks for the quick reply Tom.

I do have a use for the difference, and have used it in the past (learned the value of periodic testing of backups over the weekend, so I am bringing everything back from scratch). I will use the difference in my automatons going forward.
I was going to use a single sensor with either +'ve or -'ve values to tell the system whet the outcome should be, but i am willing to entertain the two separate sensors.

I’ve had a shot at getting each of the zones into a separate bars in Apex, however that’s been a real struggle. For what ever reason the only way I have been able to get data on the graphs is with time on the x-axis rather than zones.

[tom_l]

I was hoping you would say that. I’m a lot better at jinja than JavaScript.

@m_dap

I was going to use a single sensor with either +'ve or -'ve values

That won’t help.

What are the entity ids of one of the zone’s current temp sensor and set/ideal temp sensor (or single climate device that has both as attributes)?

Tell me that and I’ll write up one zone you can use to copy for the others.

[m_dap (Marc d'Apice)]

Current Temp:
sensor.master_temperature_humidity_sensor_temperature

Desired Temp:
[climate.actron_que_air_conditioner_home_master_bed_air_conditioner_home]
Attribute the Desired Temp sits in:
temperature

Thanks so much for all your help.

Does your design have all the bars on the one graph or are you proposing separate graphs per zone?

[tom_l]

@m_dap

Does your design have all the bars on the one graph or are you proposing separate graphs per zone?

Hmm. I’ve just realised I can’t do it like your original sketch. It would be a chart per zone.

I suspect this could do it:

Plotly interactive Graph Card

[demo] [attributes] [216764329-94b9cd7e-fee9-439b-9134-95b7be626592] [image] [image] [215353175-97118ea7-778b-41b7-96f2-7e52c1c396d3] [image] Here is my first Lovelace card, similar to the history card but leveraging plotly.js to make it interactive. You can scroll and zoom and the missing data will be automatically fetched. Click on the Index of examples with images in the readme The yaml is backwards compatible with the history card but adds a big amount of features, instructions …

But you would have to ask for help in that topic. I’ve never actually used it.

Just FYI these are the sensors I was going to provide per zone:

template:
  - sensor:
      - name: Zone 1 Above
        unit_of_measurement: "°C" # or F
        device_class: temperature
        state_class: measurement
        state: >
          {% set above = states('sensor.master_temperature_humidity_sensor_temperature')|float - state_attr('climate.actron_que_air_conditioner_home_master_bed_air_conditioner_home','temperature')  %}
          {{ above if above > 0 else 0 }}
        availability: >
          {{ states('climate.actron_que_air_conditioner_home_master_bed_air_conditioner_home','temperature')|is_number and
             has_value('sensor.master_temperature_humidity_sensor_temperature') }}

      - name: Zone 1 Below
        unit_of_measurement: "°C" # or F
        device_class: temperature
        state_class: measurement
        state: >
          {% set below = state_attr('climate.actron_que_air_conditioner_home_master_bed_air_conditioner_home','temperature') - states('sensor.master_temperature_humidity_sensor_temperature')|float %}
          {{ below if below > 0 else 0 }}
        availability: >
          {{ states('climate.actron_que_air_conditioner_home_master_bed_air_conditioner_home','temperature')|is_number and
             has_value('sensor.master_temperature_humidity_sensor_temperature') }}

[m_dap (Marc d'Apice)]

Yeah, I’ve had a go with bar-chart and having them separately, but for the life of me I can’t find a way to put all the bars on the same graph. I’m quite amazed that there’s not much out there around it.

I’ll take a closer look at that link you put in your last post, but at first glance most of those graphs are over periods of time, not current state.

[tom_l]

Oh no, it does way more than that. See: https://github.com/dbuezas/lovelace-plotly-graph-card/blob/c958dfa1bd0582ef63da5ea8c0264a8b77291aab/discussion-index.md