Thanks again for the tip, I’ve been researching and I think I’m almost there (I’m not 100% sure) but if possible I need help for the last mile. Below the code I’m using and the string format (I’ve made some changes to the sql that generate the string do adjust to json format). From a javascrip console I see the result to be very similar to format required, but since I can not debug on the card it self, is not been easy this last step:
Any help will be highly appreciated
Note - I’m using the string directly, but final goal is to pass a sensor with a string to be converted.
Many thanks in advance for any help.
Playing with card and graphs height I succeeded in PC browsers (Firefox/Chrome) but on iPhone bottom border is always shown, and any graph size modification expands card size vertically.
And one more thing. With layout:minimal, it seems that separate min/max for y-axes don’t work
I’m just struggling with the column width. I did a
group_by:
duration: 1d
so i expected that the column will be wide as the whole day is on x axis. But this did not happend.
I would like to show a max value on HA utility meter of rain precipitation. My setup look like this.
I would like to format the Y axis with a leading currency symbol. According too Options (Reference) > yaxis – ApexCharts.js the following should work, but the ApexChart card is blank. Any ideas?
Thanks - what’s the best way to try the beta? Overwrite /config/www/community/apexcharts-card/apexcharts-card.js with pexcharts-card.js. I see there is also a .gz file in that directory.
I’d like to make a chart (change the existing bar-card) to display the current power consumption / room (some kind of realtime data). I have the sensors for it but I can’t make it to work. Have no clue how to do it to display only current sensor values and not the historical data. How can I achieve this? Thank you.
Enable the beta versions in HACS for apexcharts-card and you’ll see the beta version:
In HACS → Frontend → look for apexcharts-card → click the 3 dots on the card → reinstall → show beta versions
Thanks - new EVAL works great as seen below.
Is there a way to get use the sensor ‘unit_of_measurement’ attribute in the JavaScript? I could then make this more generic and use it in templates.
How do you have data for the past 30days, is your recorder history 30days long? Or is this using some other data source? I would love to have history like this for a few things for charts, but right now I only have 3 days of history to limit the database size.
I wanted to keep electricity usage and cost long term so decided to put it into InfluxDB. I use the InfluxDB dashboard and charts to dig into the data, and query the trailing 30 days into a sensor for a quick glance on HA dashboard. Setup so far:
Daily, run a script to query InfluxDB for the sum of electricity usage per day, for the trailing 30 days. Write the time and usage as attribute name: value pairs into one sensor. I’ve written this to be reasonably generic, so can post to GitHub if it will be useful.
In apexchart-card use data_generator to use the data from these name+value pairs as the chart data
Repeat above for electricity cost.
An alternative approach would be to query InfluxDB from within data_generator via REST API but felt it would be cumbersome to hard-code connection URL, username, password, database name, query etc + manipulating the data + error checking all into the card.
Diagram background: How could I make the backgroud of the diagram (the red area) be not transparent. I assume, transparency comes from the day and night theme…
Hover box: I would like to have only day and month in the box header - no year and time
Values shown: Today is April 22nd, but the diagram shows a value for tomorrow, April 23rd. What to do that the diagram end today and not tomorrow?
Y-Axis: How could I force the numbers to be something more even. Maybe 50, 100, 150 … 250 or 75, 100, 125, … 225. But I don’t want to fix the min and max of the axis i.e. to 50 till 250…
Here my code:
type: 'custom:apexcharts-card'
card_mod:
class: top-level-graph
graph_span: 4w
update_interval: 1h
span:
end: day
header:
show: true
title: '7-Tage Inzidenz [4w]'
show_states: true
colorize_states: true
apex_config:
yaxis:
decimalsInFloat: 0
seriesname: seriesname
labels:
show: boolean
labels:
format: dd-MM
markers:
size: 2
colors: white
strokeColors: black
strokeWidth: 2
hover:
size: 7
stroke:
width: 3
annotations:
position: back
yaxis:
- 'y': 0
y2: 50
fillColor: '#ADFF2F'
- 'y': 50
y2: 100
fillColor: '#FFA500'
- 'y': 100
y2: 2000
fillColor: '#FF0000'
legend:
show: false
series:
- entity: sensor.rki_covid_germany_incidence
type: line
color: red
float_precision: 0
name: Deutschland
group_by:
func: last
duration: 1d
- entity: sensor.rki_covid_nrw_incidence
type: line
color: blue
float_precision: 0
name: NRW
group_by:
func: last
duration: 1d
- entity: sensor.rki_covid_koln_incidence
type: line
color: green
float_precision: 0
name: Köln
group_by:
func: last
duration: 1d
style: |
ha-card {
font-size: 20px;
}
Wow, yeah that is a good implementation. I have tried to create cards with a Grafana chart from InfluxDB but could never get it to work reliably due to some ingress issue with Grafana. But your method skips all that mumbojumbo and gets the data back into HA directly. If you could put the script on GitHub I’d love to take a look, I have a few charts I’d like to use this method for including exactly what you have for electricity.
and I don’t have it backed up.
