same issue here!
is it easy to switch from mini graph to apex chart?
a question that has no answer: for some … yes…and for others …no
If you need many graphs (or think to need) then the steep-ish learning curve of Apex is definitely worth investing time.
1 Like
fair answer, thanks - i think i’ll take the plunge
Hi All - hoping for some guidance on some things I’ve been trying to achieve with my apex chart energy plots
-
Top and bottom graphs are covering the same timespan. Tariff price is on a 2nd y-axis on the bottom graph, I’ve also added it to the top, even though it doesn’t display, simply to make sure the dimensions of the chart areas align. Is there a better way to do this? I really don’t need that second axis showing on the top graph.
-
The red line on the bottom graph (arrow) was dashed, and is no longer. I’m not sure if made a change that broke it, or there’s a big with
dashArray. Can anyone confirm?
apex_config:
stroke:
dashArray:
- 0
- 0
- 4
- on the tariff price plot (second axis shown by arrow) - is there a way to make 0 on the right y-axis align to zero on the left y-axis?
Screenshot with highlight attached.
Further to above. Is there a way to add a vertical marker at every midnight (00:00)?
something like now but at a specified time.
edit: nevermind, figured this out from previous posts.
Can someone help, I’m being stupid. I’m making a datagenerator that iterates through a JSON array I download from Openweather (done via RESTful Sensor as integration doesn’t bring minutely data).
JSON looks like this, as attribute minutely in sensor.openweather_all
[
{
"dt": 1721214360,
"precipitation": 0
},
{
"dt": 1721214420,
"precipitation": 0
},
{
"dt": 1721214480,
"precipitation": 0
},
<snip for every minute until…>
{
"dt": 1721217840,
"precipitation": 0
},
{
"dt": 1721217900,
"precipitation": 0
}
]
I need to iterate through this array and modify the time to be in ms, and also I want to do other things with this data that needs me to iterate through it. I did it fine for a simple [[x,y][x,y][x,y]] style JSON array from OpenMetwo data and that plots perfcectly using very similar JS code, but I can’t get the access here working for curly bracketed data. I’m doing something stupid - in Jinja I can extract the data from the JSON array fine, so the data is there in the sensor fine:
{{ state_attr("sensor.openweather_all", "minutely")[1]["dt"] , state_attr("sensor.openweather_all", "minutely")[1]["precipitation"] }}
But the following JS for data generator isn’t working:
series:
- entity: sensor.openweather_all
type: column
name: Rainfall
color: '#00008b'
data_generator: |
var data = []
for (let i = 0; i < 59; i++) {
data.push(1000 * entity.attributes.minutely[i]["dt"], entity.attributes.minutely[i]["precipitation"]);
}
return data;
What am I doing wrong. The graph doesn’t draw out properly and I get some rogue data that looks like it’s trying to plot the dt as rainfall values. It must be silly but I can’t debug the JS in a data generator to find out!
Chris
I decided that a separate graph for tariff may make more sense and avoid the multiple y-axis. Easy, right?
Well now I have a new issue - when there is one series, the yaxis label and padding is closer to the left edge than when there is two or more. Any tips to get all of these aligned?
e
one more if I may:
Brush - can one brush apply to multiple charts in HA?
I see documentation supports chart ID for this, not sure this exists in HA?
You recently opened another post outside of this one where you showed a different resultset for 15-min data. Are you saying thet the 1-minute response looks different form the 15-minute reponse? Is there an option from OWM to provide different formats?
I myself am no datagenerator expert and do not have the time (incentive) to see if this would work at all with above data.
What could be done, is IF(!) the data cannot be provided alike the 15-minute response, you could use a curl and pipe the response through jq to reformat the output. I can try to help with that but that needs a different post as that has nothing to do with Apex itself
Ultimately you could aim for a format alike this:
forecast:
- dt: 1721214360,
precipitation: 0
- dt: 1721217900,
precipitation: 0
etc.
I also forgot if Apex responds well to timestamps but this you can check above in this post too I assume
1 Like
Yes, that other post was OpenMeteo that I got working minutes after I realised how it worked.after your last reply. But then I found that while OpenMeteo provide 15 min data for a whole day, and OpenWeatherMap provides 1 min data for an hour, but neither does both, so I’m using both now! I naievely thought OpenWeatherMap would be a simple change but it’s just very annoying!
Curl is a great suggestion, I’ll do that. That also opens up a load of other ways to reparse the data in a way I can debug
Apexchart timestamps are ms epoch times so you have to x1000 the dt fields returned from these services
Chris
Hi,
can you please give me some hints on how to configure these charts, especially the wind direction one?
Thanks
@vingerha (or anyone who knows) could I instead use JavaScript Object.values to convert that JSON object to a nested array (I can lose the keys, I don’t need them)
I’m not sure what limitations the JavaScript in datagenerator has?
Chris
EDIT I just found out I can use name: ' ' and it will remove the names.
But the double box question remains.
Can the sensor name be removed from this?
The box is so large due to the name being so long that it’s impossible to see what I’m pointing at.
Also why is there two instances of the time?
Both the box below the graph and the main box?
type: custom:apexcharts-card
experimental:
color_threshold: true
apex_config:
legend:
show: false
graph_span: 48h
header:
title: Electricity
show: false
span:
start: day
offset: +0d
now:
show: true
label: Nu
series:
- entity: sensor.nordpool_kwh_se4_sek_3_10_025
type: column
data_generator: |
return entity.attributes.raw_today.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_today[index]["value"]];
});
color_threshold:
- value: 0
color: green
opacity: 1
- value: 0.5
color: yellow
- value: 1
color: red
- entity: sensor.nordpool_kwh_se4_sek_3_10_025
type: column
data_generator: |
return entity.attributes.raw_tomorrow.map((start, index) => {
return [new Date(start["start"]).getTime(), entity.attributes.raw_tomorrow[index]["value"]];
});
color_threshold:
- value: 0
color: green
opacity: 1
- value: 0.5
color: yellow
- value: 1
color: red
As mentioned, I am not a dg expert. Can help with jq …
Turns out you can use Object.values to do this without using command line. The JSON data is a JSON object within the entity (I thought I might have to parse it but I don’t) and Object.values converts a curly bracketed JSON object individual element {“dt”: 190210982019, “precipitation”: 1} into an array format [190210982019,1] … and then the normal way of using data works again
Code for reference:
- entity: sensor.openweather_all
type: column
name: Rainfall
color: '#00008b'
data_generator: |
var data = []
for (let i = 0; i < 59; i++) {
data.push([1000 * Object.values(entity.attributes.minutely[i])[0], Object.values(entity.attributes.minutely[i])[1]]);
}
return data;
if you don’t have a JSON object but just have a normal array, the code is the same but remove the Object.values wrapper (only)
Chris
2 Likes
Hi there,
I spotted a little flaw in my graph and I really would like to get rid off it.
Basically I want to compare the temperature data from today with the data from yesterday. But when I use span with start: day the yesterday state (blue line) in the header and below the graph shows always the last value of the graph (in my case the last value of the day (25.8 °C))
Is it possible to use span with start: day and show the value from exactly -24h (based on the graph below it would be around 24.5 °C)?
Already many thanks for reading so far 
Here is the current layout:
type: custom:apexcharts-card
hours_12: false
graph_span: 1d
update_interval: 5min
span:
start: day
header:
show: true
title: Wohnzimmer
show_states: true
colorize_states: true
series:
- entity: sensor.temperature_11
name: Heute
fill_raw: last
- entity: sensor.temperature_11
name: Gestern
offset: '-1d'
fill_raw: last
Hi All,
is there a way to combine a value from one sensor with another sensor, using a radial chart?
What I’m trying to achieve is show the % used of my HDD, with the actual TB used as text. My code and resultant graph are below. The radial part is my HDD % used, and instead of the 50.6% shown , would like to replace it with the TB left available.
I hope that makes sense - any help is much appreciated
type: custom:apexcharts-card
header:
show: false
chart_type: radialBar
apex_config:
plotOptions:
radialBar:
hollow:
size: 70%
fill:
type: gradient
gradient:
shade: dark
shadeIntensity: 0.15
inverseColors: false
opacityFrom: 1
opacityTo: 1
stroke:
dashArray: 4
lineCap: flat
legend:
show: false
series:
- entity: sensor.new_buzzard_volume_1_volume_used
name: Volume 1
color: green
Add this for the yesterday entity
- entity: sensor.temperature_11
name: Gestern
offset: '-1d'
fill_raw: last
show:
in_header: before_now
1 Like