I have put together some graphs similar to the HLKRadarTool app using Apex Charts (installed from HACS).
The following code is based on the work done by patrick3399:
Add the following to configuration.yaml
template:
- sensor:
- name: "chart-MovementThresholds"
state: |
{{ now() }}
attributes:
Heights: |
{% set entities=["number.g0_move_threshold","number.g1_move_threshold","number.g2_move_threshold","number.g3_move_threshold","number.g4_move_threshold","number.g5_move_threshold","number.g6_move_threshold","number.g7_move_threshold","number.g8_move_threshold"] %}
{{ entities | map('states') | list }}
- name: "chart-MovementEnergy"
state: |
{{ now() }}
attributes:
Heights: |
{% set entities=["sensor.g0_move_energy","sensor.g1_move_energy","sensor.g2_move_energy","sensor.g3_move_energy","sensor.g4_move_energy","sensor.g5_move_energy","sensor.g6_move_energy","sensor.g7_move_energy","sensor.g8_move_energy"] %}
{{ entities | map('states') | list }}
- name: "chart-StillThresholds"
state: |
{{ now() }}
attributes:
Heights: |
{% set entities=["number.g0_still_threshold","number.g1_still_threshold","number.g2_still_threshold","number.g3_still_threshold","number.g4_still_threshold","number.g5_still_threshold","number.g6_still_threshold","number.g7_still_threshold","number.g8_still_threshold"] %}
{{ entities | map('states') | list }}
- name: "chart-StillEnergy"
state: |
{{ now() }}
attributes:
Heights: |
{% set entities=["sensor.g0_still_energy","sensor.g1_still_energy","sensor.g2_still_energy","sensor.g3_still_energy","sensor.g4_still_energy","sensor.g5_still_energy","sensor.g6_still_energy","sensor.g7_still_energy","sensor.g8_still_energy"] %}
{{ entities | map('states') | list }}
And the following cards for your dashboard.
Movement Chart:
type: custom:apexcharts-card
header:
show: true
title: Movement Energy
show_states: false
colorize_states: false
graph_span: 8d
update_interval: 15ms
series:
- entity: sensor.chart_movementthresholds
data_generator: |
return entity.attributes.Heights.map((peak, index) => {
return [moment().add(-(8-index), 'd'), entity.attributes.Heights[index]];
});
opacity: 1
color: FB239F
stroke_width: 2
show:
legend_value: false
- entity: sensor.chart_movementenergy
data_generator: |
return entity.attributes.Heights.map((peak, index) => {
return [moment().add(-(8-index), 'd'), entity.attributes.Heights[index]];
});
opacity: 1
color: 0000FF
stroke_width: 2
show:
legend_value: false
apex_config:
xaxis:
type: categories
labels:
rotate: 0
title:
text: Gates
offsetX: 0
offsetY: -10
style:
fontWeight: 600
overwriteCategories:
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
update_delay: 1ms
update_interval: 15ms
dataLabels:
enabled: false
dropShadow:
enabled: false
stroke:
curve: straight
tooltip:
enabled: false
legend:
show: true
legend_values: false
chart:
height: 300px
yaxis:
min: 0
max: 100
Still Chart:
type: custom:apexcharts-card
header:
show: true
title: Still Energy
show_states: false
colorize_states: false
graph_span: 8d
update_interval: 15ms
series:
- entity: sensor.chart_stillthresholds
data_generator: |
return entity.attributes.Heights.map((peak, index) => {
return [moment().add(-(8-index), 'd'), entity.attributes.Heights[index]];
});
opacity: 1
color: FB239F
stroke_width: 2
show:
legend_value: false
- entity: sensor.chart_stillenergy
data_generator: |
return entity.attributes.Heights.map((peak, index) => {
return [moment().add(-(8-index), 'd'), entity.attributes.Heights[index]];
});
opacity: 1
color: 0000FF
stroke_width: 2
show:
legend_value: false
apex_config:
xaxis:
type: categories
labels:
rotate: 0
title:
text: Gates
offsetX: 0
offsetY: -10
style:
fontWeight: 600
overwriteCategories:
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
update_delay: 1ms
update_interval: 15ms
dataLabels:
enabled: false
dropShadow:
enabled: false
stroke:
curve: straight
tooltip:
enabled: false
legend:
show: true
legend_values: false
chart:
height: 300px
yaxis:
min: 0
max: 100