This is not the correct thread for that, you would need a template, start another item in the forum, people are there to help.
1 Like
Hi,
is it possible to set the zero point of the right y-axis to the zero point of the left y-axis?
Much appreciated,
Michael
Following code is used to create a radial bar that dynamically changes the gradient color from blue to red based on the entity value which is a boiler temperature.
For example the right one I would expect to be blue because the temperature is 28 and the left looks good but once the temperature drops, it becomes like the right one.
How can I get the thresholds and stops so that they change color based on the temperature vs the max 80?
Example 1)
On temp 50 the radial should be blue, orange and starting to become red.
Example 2)
On 30 it should go from dark blue to medium blue, hence no orange or red like to picture!
type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.boiler_apartment_temperature
color_threshold:
- value: 0
color: '#0000FF'
- value: 20
color: '#0000FF'
- value: 30
color: '#007FFF'
- value: 40
color: '#FFA500'
- value: 50
color: '#FF0000'
- value: 60
color: '#FF0000'
show:
legend_value: false
max: 80
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 70%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 80%
margin: 0
fill:
type: gradient
gradient:
shade: dark
type: radial
shadeIntensity: 0.5
inverseColors: true
opacityFrom: 1
opacityTo: 1
colorStops:
- offset: 0
color: '#0000FF'
- offset: 25
color: '#007FFF'
- offset: 50
color: '#FFA500'
- offset: 100
color: '#FF0000'
stroke:
lineCap: round
legend:
show: false
chart:
height: 240
- type: custom:mushroom-template-card
multiline_secondary: false
entity: sensor.boiler_apartment_temperature
layout: vertical
primary: |
{{states('sensor.boiler_apartment_temperature')}} °C
secondary: |
Boiler: {{states('switch.ariston_apartment_power')}}
icon: |-
{% if states('sensor.boiler_apartment_temperature') | float < 40 %}
mdi:thermometer-alert
{% else %}
mdi:thermometer
{% endif %}
icon_color: |-
{% if states('sensor.boiler_apartment_temperature') | float > 55 %}
red
{% elif states('sensor.boiler_apartment_temperature') | float > 45 %}
orange
{% else %}
blue
{% endif %}
card_mod:
style: |
ha-card {
margin-top: -120px !important;
width: 120px !important;
margin-left: auto !important;
margin-right: auto !important;
border-width: 0px !important;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: switch.ariston_apartment_power
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.more_info
data:
entity: water_heater.apartment
Hello!
I like the ApexCharts integration and I try to fill up a graph with data from my own custom template sensor with constant values. The values are measured by “hand” and written down. Later I want to add automatic measured values, but for now, I try to get this simple scenario running.
The template is basic and returns a monthly hot-water usage:
sensor:
- platform: template
sensors:
warmwasser_2023_24:
unit_of_measurement: kWh
value_template: >
values:
- time: '2023-01-01T10:00:00+00:00'
value: 495.0
- time: '2023-02-01T10:00:00+00:00'
value: 420.0
- time: '2023-03-01T10:00:00+00:00'
value: 461.0
- time: '2023-04-01T10:00:00+00:00'
value: 169.0
- time: '2023-05-01T10:00:00+00:00'
value: 84.0
- time: '2023-06-01T10:00:00+00:00'
value: 37.0
- time: '2023-07-01T10:00:00+00:00'
value: 37.0
- time: '2023-08-01T10:00:00+00:00'
value: 31.0
- time: '2023-09-01T10:00:00+00:00'
value: 37.0
- time: '2023-10-01T10:00:00+00:00'
value: 54.0
- time: '2023-11-01T10:00:00+00:00'
value: 454.0
- time: '2023-12-01T10:00:00+00:00'
value: 733.0
- time: '2024-01-01T10:00:00+00:00'
value: 667.0
- time: '2024-02-01T10:00:00+00:00'
value: 419.0
- time: '2024-03-01T10:00:00+00:00'
value: 216.0
- time: '2024-04-01T10:00:00+00:00'
value: 173.0
- time: '2024-05-01T10:00:00+00:00'
value: 120.0
Now I try to show these values in a chart (a simple check, if it’s working):
type: custom:apexcharts-card
graph_span: 1y
header:
show: true
title: Warmwasser Z9
show_states: true
colorize_states: true
series:
- entity: sensor.warmwasser_2023_24
name: Warmwasser
type: line
data_generator: |
return entity.attributes.values.map((entry) => {
return [new Date(entry.time).getTime(), entry.value];
});
However, it’s not working. I get an endless “loading…” inside the chart:
I tried two different structures (values as two arrays with an index-access, and the way from above). All time I get a “loading…” without any error.
Maybe I misunderstood something. I googled a lot to find similar examples (most are API-driven) but I don’t get it running.
TIA for any hint.
Never seen this before and although I believe to be more than medioicrate in HA usage, I doubt this will work… what does the sensor itself show?
Hm, it’s more or less documented here:
With the statement:
So, maybe I missed something in the declaration of a sensoror I did something wrong.
Nothing. And unfortunately the data generator is never called (I added a console output, but nothing happens).
It’s unclear to me what type of sensor is meant in the documentation, and my guess was to try a template.