I really returns the data fast, in 2 seconds.
I have hosted it on my 2 proxmox servers, 2x active and 1 backup
It’s really fast and works great with mariaDB.
That specific device is my off peak usage, it will record ever time it changes.
Same for the other sensors.
I only keep like (all temperature/humid sensors and electricity consume + gas)
It does not make the database any big at all.
For example i also use google sheets integration and imported it into grafana.
On sheets i have 2 year data of all my temp sensors and electricity and gas usage, nothing else, it writes every time it changes value, so it has tons of data on that sheet.
I’m working on a graph for my solar system to show the current solar power coming through my panels and compares against the estimated maximum power I can get from the sun assuming the charge controller can accept it all.
I have the graph looking quite nice, however I would love it if the solar (PV) power would change color according to the charge controller state (eg. red for bulk charging, orange for absorption, then green for float)
Below is my current code:
type: custom:apexcharts-card
header:
show: true
title: Solar Power
show_states: true
colorize_states: true
series:
- entity: sensor.solar_power
data_generator: ''
type: column
stroke_width: 1
group_by:
func: avg
duration: 5min
yaxis_id: power
- entity: sensor.solcast_pv_forecast_power_now
type: column
data_generator: ''
stroke_width: 1
offset: '-30m'
yaxis_id: power
- entity: sensor.battery_soc
type: line
stroke_width: 1
yaxis_id: percentage
graph_span: 14h
span:
start: day
offset: +6h
now:
show: true
color: red
label: Now
yaxis:
- id: power
decimals: 1
apex_config:
tickAmount: 5
- id: percentage
min: 0
max: 100
opposite: true
decimals: 1
apex_config:
tickAmount: 5
Does anyone have a suggestion on how i could get this to work?
I was thinking something along the lines of an if statement alongside “color:”.
if "sensor.pv_charger_state" = Bulk, color = red
if "sensor.pv_charger_state" = absorbtion, color = orange
if "sensor.pv_charger_state" = float, color = green
My attempts along those lines haven’t worked yet though.
I’ve googled and search these forums and read through peoples code but I cannot for the life of me to get my apexchart-card in Homeassistant to fill the width of the screen. They appear to be fixed but I’ve seen posts of graphs showing them much wider?
For anyone who also has the problem with the overlap when displaying a forecast: I have found a solution that cleanly separates both graphs. I’ve modified the data generator as follows:
data_generator: |
return entity.attributes.forecast.map((entry) => {
let cur_hour = new Date(Date.now()).getHours();
return [new Date(entry.datetime).setHours(cur_hour), entry.temperature];
});
For the forecast, the average value is displayed in the middle of the day. In the afternoon, there will be overlaps with the actual measured values of the day. My solution is to modify the timestamp so that the forecast value is calculated at the current hour of the day. This is not a problem as long as the forecast consists of only one value per day. By grouping, the forecast value is still displayed in the middle of the day.
It may not be the best option, but it works.
Complete example code
type: custom:apexcharts-card
graph_span: 8d
span:
start: day
offset: '-3d'
header:
show: true
title: Temperature Forecast
show_states: true
now:
show: true
label: jetzt
apex_config:
legend:
show: false
series:
- entity: weather.wetterstation
name: Temperature
unit: °C
attribute: temperature
fill_raw: last
extend_to: now
group_by:
func: avg
duration: 1h
- entity: weather.forecast_home
type: line
unit: °C
show:
in_header: false
data_generator: |
return entity.attributes.forecast.map((entry) => {
let cur_hour = new Date(Date.now()).getHours();
return [new Date(entry.datetime).setHours(cur_hour), entry.temperature];
});
I’m trying to make a network traffic graph. Here is how it looks in a low activity state:
The issue I’m having relates to the scale of the yaxis(s).
As my maximum download speed is serval times my upload, this necessitates the use of 2 yaxis to provide sufficent resolution for both plots.
Fixed min/max: Either have to set the values high and lose resolution for low values, or set them low and clip the high values.
Soft bounds (min: ~20, max:~20): Work fine until a value exceeds the bound, resulting in the ‘0’ point shifting off centre in the vertical. With two yaxis this looks wrong and defeats the purpose.
Adding to min/max (min: '|-20|', max: '|+20|'): same issues as soft bounds.
Has anyone found a way to use a variable (that’s ultimately determined by a sensor state over time) for min/max? As an example, it would be nice to have: Max: ~20 Min: Max * -1
I’ve tried messing about with config-template-card but I’m either too dense or it’s not possible to grab a value (say max) from the apexcharts-card and modify it (* -1) to create a variable which can be used for min. I’ve managed to set a variable as a min value (MIN_DOWNLOAD: Number(states['sensor.downloadspeed'].state) * -1).
Other than making a helper which is the max value of that sensor over a given period (this just crossed my mind), is there any way to achive the result I’m seeking?
True, that would make a lot of sense, but unfortunately my programming skills are not quite enough for it. This is very close:
data_generator: |
return entity.attributes.forecast.flatMap((entry) => {
let now = new Date();
if (new Date(entry.datetime).setHours(now.getHours(), now.getMinutes()) < now)
return [];
let maxValues = [new Date(entry.datetime).setHours(23,59,59,99), entry.temperature];
let minValues = [new Date(entry.datetime).setHours(12,0,0,0), entry.templow];
return [minValues, maxValues];
});
Unfortunately, there is now a gap of up to 23 hours between the now line and the forecast. I have no idea how this can be solved. But hey: at least no overlap
I have the following chart which I would like to invert the color (white->black and black->white). While I can turn the background to black (see ha-card section), I can’t find a way to change the color of all text. Can anybody help here?
PS: it should be done independently of the light/dark mode setting.
Many thanks
This is indeed how I would like to have the background and the text. But I only get this when if I use the dark mode (which I don’t wont to have permanently activate).
Thanks for the update. I’ve pushed this back to priority number 1 billion for the moment. If I ever get around to it and find a working solution, I’ll post it here.
Ok, in the end I found a solution that is satisfactory for me, which uses highs and lows of the forecast. From these, the average is calculated. No gaps, no overlaps. I’m happy with it.
data_generator: |
return entity.attributes.forecast.map((entry) => {
let cur_hour = new Date(Date.now()).getHours();
let result = (entry.temperature + entry.templow) / 2;
return [new Date(entry.datetime).setHours(cur_hour), result];
});
This issue is marked as completed on Nov 13, 2022
I did give it a try. I can configure a ccomplete apexchart as scatter but not just one of the dataseries while the others in the same card are lines.
Did you ever get it working @AleXSR700 ?
I would love to have some help with this quite unique case, hoping someone has done this.
I have not found any information about how to manipulate normal history entity state and that particular datetime of state inside ApexChart. I would like to move simple semsor containing float value and show all last week values in ApexChart shifted 1 week forward.
Can data_generator manipulate entity.state object this way?
Do you want to change the dates of last week’s values? If not then why not use offset? Provide and example as this may help instead of theoretical stuff
I’m a bit baffled with my multi-Y axis config as the main chart does not honor the yaxis_id, but the brush honors it. I just can not find what’s wrong it, deleted series by series but no avail, -7d offset stays not multiplied on main chart.
