Haha, alright, I have been using that code for all my charts without knowing it was wrong But when I change the code to your suggestion i get:
/// apexcharts-card version 1.8.2 /// value.yaxis is extraneous
Haha, alright, I have been using that code for all my charts without knowing it was wrong But when I change the code to your suggestion i get:
/// apexcharts-card version 1.8.2 /// value.yaxis is extraneous
Hello @RomRider
Is there a way to create a graph of a manually inserted data?
I’ll try to explain better.
I have a custom sensor where I daily store some data. I’m using attributes to store the date and the value, as you can see below:
How can i create a line graph with those dates and values?
Thank you!
The error is pretty much explicit. You’re not running the latest version but an older cached one where this feature was not available.
You are completely right, I have the recently released beta with soft bounds but the error message says 1.8.2. Incognito mode in Edge shows it correct.
In cases like this, do I have to clear the browsers cache completely or can I do it so it only affects Home Assistant?
Yes, with data_generator
but your attributes are not very friendly for that, if you could have them in a “sub-attribute” it would be easier.
Eg:
unit_of_measurment: xxx
friendly_name: xxx
my_values:
22-05: 12345
23-05: 12345
This way you could loop over the my_values
object in javascript more easily
Thank you very much for your reply. Where should I use that code?
unit_of_measurment: xxx
friendly_name: xxx
my_values:
22-05: 12345
23-05: 12345
I saw your Data Generator instructions, but I don’t understand how i do create a sensor like the one in your example:
FirstPeak: High
PeakTimes:
- '2021-01-27 03:43:00'
- '2021-01-27 10:24:00'
- '2021-01-27 16:02:00'
- '2021-01-27 22:38:00'
- '2021-01-28 04:21:00'
- '2021-01-28 11:06:00'
- '2021-01-28 16:40:00'
- '2021-01-28 23:18:00'
- '2021-01-29 05:00:00'
- '2021-01-29 11:45:00'
- '2021-01-29 17:19:00'
- '2021-01-29 23:58:00'
- '2021-01-30 05:39:00'
- '2021-01-30 12:25:00'
- '2021-01-30 17:59:00'
PeakHeights:
- 4.99
- 1.41
- 4.96
- 1.33
- 5.22
- 1.19
- 5.15
- 1.14
- 5.42
- 1.01
- 5.3
- 0.99
- 5.57
- 0.87
- 5.39
unit_of_measurement: m
friendly_name: Tides
Is this a template sensor?
EDIT:
Ok @RomRider , so I tried to create a sensor like this one:
sensor:
- platform: template
sensors:
test:
friendly_name: Test
unit_of_measurement: 'X'
value_template: >
FirstPeak: High
PeakTimes:
- '2021-05-22'
- '2021-05-23'
PeakHeights:
- 0.00499446
- 0.01417467
Now, I’m a bit confused about the usage of data_generator.
What is the function of “FirstPeak”?
I don’t have enough acknowledge to generate the value needed for this:
data_generator: | # This is what builds the data
return entity.attributes.PeakTimes.map((peak, index) => {
return [new Date(peak).getTime(), entity.attributes.PeakHeights[index]];
});
@RomRider I tried to go deeper regarding this data_generator and i Found a previous message where someone did something like the one i need.
Now, my sensor.test has the following attributes:
value: |-
- datetime: '2021-05-22T11:05:30+00:00'
test: 0.00499446
- datetime: '2021-05-22T11:05:30+00:00'
test: 0.01417467
unit_of_measurement: X
friendly_name: TEST
And my card code is:
type: 'custom:apexcharts-card'
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
graph_span: 1d
span:
start: day
apex_config:
dataLabels:
enabled: true
series:
- entity: sensor.test
type: line
data_generator: |
return entity.attributes.value.map((entry) => {
return [new Date(entry.datetime), entry.test];
});
Nothing appears. Any clue?
Hi everyone,
do you also have the problem?
The rectangle in extremas is not centered
I realize Color Thresholds are an experimental feature but curious if anyone has run into this and found a fix? Something changed in the last release and now it appears the colors are being applied to small groupings rather than the overall chart?
type: 'custom:apexcharts-card'
apex_config:
chart:
height: 200px
graph_span: 7d
update_delay: 2000ms
span:
start: day
offset: '-3d'
experimental:
color_threshold: true
hidden_by_default: false
now:
show: true
header:
show: true
title: Wind Forecast
show_states: true
colorize_states: true
series:
- entity: weather.to_daynight
name: NWS
attribute: wind_speed
extend_to_end: false
curve: smooth
stroke_width: 3
show:
extremas: true
group_by:
func: max
duration: 15min
color_threshold:
- value: 5
color: green
opacity: 1
- value: 12
color: yellow
- value: 15
color: red
- entity: weather.to_daynight
type: area
name: Forecasted
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime), entry.wind_speed];
});
extend_to_end: false
group_by:
func: max
duration: 30min
stroke_width: 0
opacity: 0.3
color: grey
That’s because you have null values in the serie. Use fill_raw: last
That is a string, not an array (see |-
), it’s the reason it doesn’t work. The data needs to be stored as a native array.
ah yes, I do see when I remove - entity: weather.to_daynight
the issue clears up. I will need to research how to transform the string into a native array. I’m a newbie to templating.
How can I achieve this?
This would need to be done where you set those attributes in the sensor. Is that a custom component?
In my example above weather.to_daynight
is from the NWS (National weather service) integration.
Thank you again @RomRider
No, that’s a sensor template:
sensor:
- platform: template
sensors:
test:
friendly_name: Test
unit_of_measurement: 'X'
value_template: '1'
attribute_templates:
data: >
- date: '2021-05-22T05:30:00.000Z'
value: 0.00499446
- date: '2021-05-23T05:30:00.000Z'
value: 0.01417467
As I said, I daily add one value on this list. But I need to do it manually.
How can i turn this into an array?
Wow that sounds very inconvenient, not very automated for an automation system
Remove >
from data: >
and it’s going to become a native array (if that’s supported by home-assistant, which I don’t know)
True, but currently I don’t have any system to import those value. I just started a project.
Unfortunatelly not =(
Hello! May I ask you which theme are u using?
The only way I can see this working if it needs to be a string is to define it as a string which can be parsed as JSON:
attribute_templates:
data: "[ ['2021-05-22T05:30:00.000Z', 0.00499446], ['2021-05-23T05:30:00.000Z', 0.01417467] ]"
This is now an array of array as a string
And then convert it to a usable array in the data_generator:
data_generator: |
return JSON.parse(entity.attributes.value).map((entry) => {
return [new Date(entry[0]).getTime(), parseFloat(entry[1])];
});