You mean the timestamp?
sensor:
- platform: time_date
display_options:
- 'time'
- 'date'
- 'date_time'
- 'date_time_utc'
- 'date_time_iso'
- 'time_date'
- 'time_utc'
- 'beat'
template:
- sensor:
- name: timestamp
state: "{{ as_timestamp(states('sensor.date_time_iso')) }}"
icon: "mdi:calendar-clock"
Got it 
I’m still strugling with YAML for cards configuration sometime, but it works very fine
That solves the first part of the daily consumption over a month,
Now i need to figure out the 1 bar over 9th to 9th, and be able to display 1 bar for each “month” over a year
Which leads to another question, which maybe does not belong here
Why apex-charts or History for my sensor does not display values past a couple of days ? maybe I did something wrong, because the data is here !!
nothing before the 24th of october
while, statistics shows data on the 9th for example, i don’t understand this behavior ?
The situation is the same for several sensors, same date, almost the same hour
Recorder purges after 10 days by default.
If I am not mistaken you have to explicitly tell apexcharts-card to use statistics.
So, if you purge, then the only source of data is statistics, which apexcharts-card does not read by default.
I don’t understand what you mean with one bar per month. Sounds like you want the sum of all data or a mean value or something. Or is it one value or month that is being stored?
Check out the statistics part on the apexcharts-card github. Maybe the mean of month is what you are looking for?
Can anybody think of a way to make the source of data statistics in an apexcharts-card when the charted time is more than 2 weeks without breaking the card when it is less than two weeks?
statistics:
type: mean
period: hour
align: middle
I have not found a way to disable it by setting them to [] or null without breaking the card.
I dug a bit yesterday, my knowledge on this subject was none.
And I don’t inderstand something.
Thanks to you I understand that apexchart do not use statistic that’s why I can’t see the daa befor 10 days, but as I understand by reading the dev page for the long term statistics, the history graph from HA should show the data, as my sensor have a state_class compatible with long term stat (total_increasing)
And I check in the database, data is present
Or am i missing something ?
Regarding the other question.
I want to be able to compare monthly gaz comsumption in a graph based on my billing period (the 9th of every month)
So I want a graph that shows 1 bar per billing period, from the 9th to the 8th of the next month, using my monthly utility meter
Is that clearer ?
Would be much easier if we could set a start date for the energy dashboard.
I will have a look at the statistic option, in fact I don’t think I would need short and long term at the same time.
You can use apexcharts-card with statistics also. For that you simply specify the statistics option per series.
e.g.
type: custom:apexcharts-card
header:
show: true
title: Statistics Test Card
show_states: true
colorize_states: true
series:
- entity: sensor.sony_kd_75xf9005_naim_audio_av_energy_power_0
stroke_width: 2
statistics:
type: max
period: 5minute
align: middle
curve: stepline
- entity: sensor.sony_kd_75xf9005_naim_audio_av_energy_power_0
curve: stepline
stroke_width: 2
In that example one line is the data from the “normal” database and one line is plotted from the statistics data.
I am working on a way to have the chart select which to use. The code itself is simple, but I have not yet found out how to “disable” statistics because it does not accept [] or null.
Anyway, no need to switch cards, you just need to specify the use of statistics (I recommend to plot both lines like I did and then play with the values for type, period and align to see which gives the most accurate representation.
I think the problem with your monthly value is that the monthly value is written to the database with a given date. So for HA this value is one single value in time.
But if you plot that value and e.g. plot 3 months, you should see 3 bars, each one month wide.
Problem, however, could be the date that value is stored.
So if your system writes the monthly value every month on the 9th, then you are golden. If it writes that value every month on e.g. the 15th, then your chart will need to be plotted 15 to 15, other wise you will have a value change/step/bar in between.
Are you plotting a chart_type: line or bar or what? I would think that a line/area with curve: stepline and might look more like what you are looking for.
I hope you understand what I mean.
curve: stepline
type: area #or line
chart_type: line
Careful, those are not the same indentation when you use them. I am just listing them.
I just tried it.
Like you said the value is monthly stored.
And i use bar.
So the graph is wrong
I need my october bar to increase until the 8th of november !!!
Wich i don’t think is possible, unless making some dev and maybe use variable store them in an alternate database ?
I will have the same problem with curve lines I think.
I will try more this afternoon
Thx for help ( a lot !!!)
How is you monthly value stored? What is the trigger? Or does the sensor send this value?
If it comes directly from the sensor, then the date should be correct. If not, maybe adjust the interval in the sensor?
Or did you create a HA sensor that sums up the dailies? In that case you would need to play there.
You can manually change old data if you want by changing the value inside the database, but this is not the best approach for the future.
So first check why the value is written on that date and change that behavior. The chart will then start to be correct.
That would be a plot of the daily (plotted as a stepline area), not monthly. Monthly is a single value, is it not?
P.s.: Looking at that graph I am surprised there are gaps in between the bars. Is there a 0 value in between?
If not, plot as area stepline. Then there will be no gap.
Is there a way to make the bar widths larger in this graph? It seems like they are quite skinny and there is quite a bit of white space between each day (there are 2 possible bars per day).
The values comment from a sensor that read real time gaz comsumption.
The daily value is a utility meter that adds up and reset everday so i can see the daily comsumption
The monthly is the same but reseted on the 9th.
Because my gaz provider bills me on the 9th each month
I’ll try the curve line to see how it goes.
But a daily plot will show me the daily value not the monthly.
The gap seems to be correct, I have one bar for october and one for november.
Edit:
I don’t see anyother option that take my monthly utility meter, which value is OK, and store it somewhere.
Or wait for the energy dashboard to include the start data feature long awaited
I got lots of cool ApexCharts included, many thanks for the card.
Most recently I am struggling with the y-axis in multi y-axis charts.
Concretely, it seems that the scaling does not adopt correctly nor the min max values are correct.
Maybe someone can spot the mistake that I have not been able to find?
In this example I use 3 y-axis, the green line shows a %-ratio (in the chart max point about +44%, lowest point about -77%, endpoint is -27%. It is assigned to the third axis, which is in the chart the axis to the very left.
The problem is that this y-axis shows value between 0 and 5!
(The areas show solar power production for a solar setup with west and east panels; the green line shows the ratio between both of them. I am hoping to use this ratio also for determining if there were a problem with little creatures nibbling on the solar cables, which should change the ratio between both solar panel strings…)
Many thanks for helping out!
type: custom:apexcharts-card
header:
show: true
title: Leistung - Westdach und Ostdach (15 Min Avg)
show_states: true
colorize_states: true
graph_span: 30d
experimental:
brush: true
update_interval: 60m
show:
last_updated: true
apex_config:
legend:
show: false
yaxis:
- id: left
- id: below
show: false
min: 0
- id: right
apex_config:
tickAmount: 2
brush:
selection_span: 8h
series:
- entity: sensor.solar_total_power
name: Summe
type: column
yaxis_id: below
group_by:
func: avg
duration: 15min
show:
legend_value: false
in_header: true
in_chart: false
in_brush: true
- entity: sensor.solar_west_power
name: West
type: area
color: gold
opacity: 0.2
yaxis_id: left
group_by:
func: avg
duration: 15min
- entity: sensor.solar_east_power
name: Ost
type: area
color: red
opacity: 0.2
yaxis_id: left
group_by:
func: avg
duration: 15min
- entity: sensor.solar_west_to_east_power_ratio
name: Power Ratio
type: line
color: green
opacity: 0.2
yaxis_id: right
group_by:
func: avg
duration: 15min
show:
legend_value: false
in_header: true
in_chart: true
Is it possible to create a candlestick chart with this integration?
I know Apex Charts can, I just don’t know how to convert my three values (min, max and avg) to a candlestick to show them?
Any tips?
I got an apex card runing with a zigbee rainsensor. My issue is that the apexcard only get a new value when i rains. I would like to get a new value e.g. every 30 min if nothing has happened so the graph will get filed out. Any idea how I can do this?
- type: custom:apexcharts-card
graph_span: 24h
span:
end: day
offset: +20sec
header:
show: true
title: Døgn
show_states: true
colorize_states: true
series:
- entity: sensor.rainfall_today
name: ' '
extend_to: false
fill_raw: last
so, I think I read through all of the thread again, searched for data_generator and divide entity.state, but am still in the dark… Please help me with what would probably be the silliest question…
trying to have the apex charts plot an entity with unit W(att)
- entity: sensor.netto_verbruik
yaxis_id: power
unit: W
as a kW unit. so need to divide by 1000…
data_generator: |
return entity.state.map((record, index) => {
return [record.time, record.state/1000];
});
would appreciate any nudge/suggestion in the right direction.
(probably could also create a new template sensor for that, but that’s no fun of course…)
For the code for getting the heating mode red bars, is that something you put in the card config or is that like a template sensor?
Cosmetic question. Is there a way to get the dotted line and potentially the font a bit less pronounced? I like them there and font size etc is ok, but it’s very present and would especially the line be a bit more opaque.
Next to that. I’m struggling with the gradient. I would love that the green area was a gradient but if I add it the the card apex_config the bar does not show and if I add it to the series (as per code below), it does not do anything.
Help appreciated
Code:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.benext_solar_electric_production_w
primary_info: state
secondary_info: name
name: Now
icon: mdi:sun-wireless
icon_color: orange
- type: custom:mushroom-entity-card
entity: sensor.solarday
primary_info: state
secondary_info: name
name: Daily
icon: mdi:sun-clock
icon_color: orange
- type: custom:mushroom-entity-card
entity: sensor.solar_net
primary_info: state
secondary_info: name
name: Grid
icon: mdi:solar-power
icon_color: green
- type: custom:apexcharts-card
graph_span: 1d
span:
start: day
apex_config:
chart:
height: 150px
fontFamily: Raleway,sans-serif
legend:
show: false
experimental:
color_threshold: true
brush: true
header:
show: false
title: Server Rack
show_states: false
colorize_states: true
yaxis:
- id: first
decimals: 1
apex_config:
tickAmount: 2
stroke:
width: 1
- id: second
opposite: true
decimals: 0
apex_config:
tickAmount: 2
stroke:
width: 1
fill:
type:
- gradient
gradient:
type: vertical
opacityFrom: 0.6
opacityTo: 0.1
series:
- entity: sensor.power_consumption
name: Power
yaxis_id: first
show:
legend_value: false
type: column
group_by:
func: avg
duration: 60min
color_threshold:
- value: 0
color: '#228B22'
- value: 0.1
color: '#d35400'
- value: 1.5
color: '#c0392b'
- entity: sensor.benext_solar_electric_production_w
name: Solar
yaxis_id: second
type: area
curve: smooth
color: '#00bb33'
show:
legend_value: false
group_by:
func: avg
duration: 60min
it is a template sensor.
Thank you! got it setup and it’s working great
your Google Fit card is awesome - did you share your code anywhere?