is it possible to have an different value in the header than the chart is showing ?
Im not sure where to look for help on making the yaxis adjustable in the front end.
I have 8 ApexCharts displaying the temperature in each room. On each configuration I have:
yaxis:
min: 15
max: 22
This works fine but as the summer approaches I would like to change the setting to something like:
yaxis:
min: 20
max: 30
At the moment I have to manually go into all 8 chart yaml files and change the numbers and the same when winter comes. Is there a way to have these numbers set up as a input_number.min_number and input_number.max_number and relate to them in the yaml files so I can set these once in the front end? Hope this makes sense.
This can be done the way you describe with the help of config-template-card. There’s similar examples in this thread.
Great charts, I new into this, so I really appreciate some help here.
I get energy prices from an electricity company in Denmark through a restful call. I got the data in Home Assitant and as you can see, the data is coming as attributes in the format 00:00: 0.28 which means that price at 00:00 is 0.28.
I have the data for each hour and I’m getting them in two sensors one for today and the other for tomorrow.
I want to plot the data in a chart, I tried to use ApexCharts card as I can see other have been doing similar thing, but unfortunately I’m not able to crack the format for data-generator. Can someone please help in explaining what should be written in the data-generator to get the value plotted at the right time on the graph.
I tried the following but it did not work,
type: custom:apexcharts-card
header:
show: true
title: ApexCharts-Card
show_states: true
colorize_states: true
series:
- entity: sensor.jyske_energi_priser_today
type: line
data_generator: |
return entity.attributes.map((entry) => {
return [new Date(entry), entry.value];
});
Thanks.
I’ve been looking, and I haven’t found a way to do something like this. It’s… not quite a candlestick graph, but sorta.
Is there any way to format specific point based on what whether the last point is higher or lower than the previous point? Also, dig my mad MSPaint skills below.
Did you every solve this one? I’ve got the same issue with the same data from EMHASS.
I thought I’d share the day length chart I made.
- type: custom:apexcharts-card
series:
- entity: sensor.daylight
color: var(--custom-color-yellow)
min: 0
max: 24
chart_type: radialBar
apex_config:
legend:
show: false
plotOptions:
radialBar:
startAngle: -170
endAngle: 170
dataLabels:
value:
show: true
# the trick to insert a "newline" is to return the strings as an array
formatter: |
EVAL:function (percentage) {
const value = percentage * 24 / 100;
const hour = Math.floor(value);
const minute = Math.round((value - hour) * 60);
return [`${hour}h${minute.toString().padStart(2, '0')}m`, `(${percentage.toFixed(0)}%)`];
}
7 Likes
Hi Pieter, the code in the formatter is python function?
Can I do the same inside the data generator?
It’s JS.
What do you want to achieve with your data generator?
The Apex Charts docs will tell you where scripting is allowed.
About data_generator:
I have an entity that has an attribute called profile
profile:
- 2023-07-06T00:00:00+0200: 60
- 2023-07-06T01:00:00+0200: 65
- 2023-07-06T02:00:00+0200: 60
- 2023-07-06T03:00:00+0200: 50
- 2023-07-06T04:00:00+0200: 70
etc
I cannot get any examples I can find to get this right.
I guess the reason is that the time has the extra +200 for CET.
Is it possible to make this work?
What should the data_generator look like?
I am looking for a way to show the AVERAGE of the MAX temps from my pool sensor.
If you see below, I have a nice graph of the MAX temps and MIN temps over the past 14 days.
Works awesome.
What I want is to take all those MAX temps, and get an average of those.
I got close, but the number is off. when I throw the past numbers into Excel and do an average, i am coming out with 94.
Here i am getting 92.
Anyone know how I can do this? I dont want to show it in the chart, just at the top like you see.
type: custom:apexcharts-card
graph_span: 14d
yaxis:
- id: Max
min: 0
max: 105
- id: Min
opposite: true
min: 0
max: 105
- id: Avg
opposite: true
min: 0
max: 105
show: false
span:
end: day
header:
show: true
title: Pool Temperature 30 Days Max/Min
show_states: true
colorize_states: true
series:
- entity: sensor.pool_temp
name: Today Max
yaxis_id: Max
type: column
group_by:
func: max
duration: 1d
color: rgb(255, 0, 0)
data_generator: ''
- entity: sensor.pool_temp
name: Today Min
yaxis_id: Min
type: column
group_by:
func: min
duration: 1d
data_generator: ''
- entity: sensor.pool_temp
name: Average Max
yaxis_id: Avg
type: column
color: rgb(255,165,0)
group_by:
func: median
duration: 14d
data_generator: ''
show:
in_chart: false
1 Like
Greetings,
so i have 3 sensors.
1.Electricity usage from grid
2.Electricity usage of the home
3.Solar production
How can i make this graph like this one, colors below the solar production is a different color for the electricity usage and above solar production is electricity usage from grid.
I made a post 3 posts before yours. I have a sensor with attributes that contains a time key and value. I want to plot them in using apex charts but I need to extract these values in a way that apex chart understand it. I could not, probably due to my limited JS knowledge.
I did some javascript coding and I reached so far to return the data correctly to ApexCharts, but still it is not plotted correctly, any one can give a clue?
As show in the attached picture, I’m printing the time and value to the console and it is correct, but the chart is plotted only at the end of the time axis, not from the start.
I donot believe this is correct as you are using the time ‘now’.
I tried this, i.e. construct a date time with today in front of the key…this works (!)
let res = [];
let day = new Date().toLocaleDateString()
for (const [key, value] of Object.entries(entity.attributes.test1)) {
res.push([new Date(day + ' ' + key).getTime(), value]);
}
return res
based on this:
if the key/values are preceded by a hyphen it no longer works (see the ‘profile’ attribite) as it is seen differently then and I guess this requires indexing …for which my js skill are not good enough.
1 Like
I tried your suggestion, it gave me the exact same result as mine.
It seems that the ApexChart is ploting only the time for the current hour and onwards. i.e. when I checked the graph today at 19, I saw all the data till today 19:00. I do not see the data I have for the following hours.
Hi All,
Probably this is a stupid question, but I can’t figure it out.
How can I increase the data frequency from 1 hour to say 1 minute in the graph?
Example:
Every minute I want to see the amps of L1, L2 and L3.
That fixed it for me, thanks.
I was missing the following:
span:
start: day
Hi,
What I’m trying to do is to compare solar power of today vs. yesterday. Not as total but at given time of day.
Do you have any idea how to display 2 series in same graphs of same entity but second one shifted 24h right?
Final usage would be to compare any given days as I need to compare days with similar weather but it’s just a detail.
Sorry if it was already discussed, but I was not able to find it.