Apex Charts with a dynamic X Axis

Share your Projects! Dashboards & Frontend
5

Found some time but since I donot have the sunris/sunset so I had to tweak things for the power sensor and the rise/set… as a result you cannot blindly copy this but the concept is working

graph_span_template: calculates the hours between sunrise and sunset
offset_template: calculates the hours from midnight

[/quote]

image
image1112×611 36.6 KB 

type: custom:card-templater
card:
  type: custom:apexcharts-card
  graph_span_template: |
    "{{ (( 0 - as_timestamp(state_attr('sun.sun', 'next_setting')) +
    as_timestamp(state_attr('sun.sun', 'next_rising')))/3600) | int(0)  }}h"
  span:
    start: day
    offset_template: >-
      +{{ ((as_timestamp(state_attr('sun.sun','next_rising')) -
      as_timestamp(now().replace(hour=23,minute=59))) / 3600) | round(1) }}h
  header:
    show: true
    title: testing
    show_states: true
    colorize_states: true
  series:
    - entity: sensor.linky_papp
      curve: smooth
      color: '#df6366'
      type: line
      opacity: 1
      stroke_width: 2
      offset: -24h
entities:
  - entity: sensor.linky_pap
    offset: -24h
1 Like
6

Thanks, for taking the time to look at this.
It works nearly,
the Sunrise is correct but the sunset is at least an hour early

Many thanks for your help

7

Great, please mark my post as ‘resolution’ so others can benefit too (I hope)

1 Like
8

Sorry just changed my post.
Bit of an issue with the sunset, which is a bit strange.
Just looking to see why

Its a bit strange, if I press the home button it shows a bit more of the graph and the bottom axis includes the time to sunset momentarily and then goes back to 18:00 (should be about 19:40 ish)

9

Nope I can’t get the sunset show and also the graph has stopped at 17:35, which is very odd as my duplicate, which is the before version has just finished at 19:40

10

I notice that your amendment also is constantly updating every second or so.
I already have the following sensors in HA maybe there is a different approach as there is no need to calculate the daylight hour range for example
entities:

  • entity: sensor.sensor_sunrise (datetime)
  • entity: sensor.sunrise (hrs ago)
  • entity: sensor.sensor_sunset (datetime)
  • entity: sensor.sunset (hrs ago)
  • entity: sensor.daylight (number of hh:mm:ss)
  • entity: binary_sensor.above_horizon (on/off)
11

Well, as I said, the concept it working so the rest is up to you :slight_smile:
The graph bases on live data, if one of the sensor updates, the graph should too, probably an option is to ‘average’ that out. There is a very large live post on apexcharts btw.

1 Like
12

I redid all of this with the sensor.sunrise/set… for the annotations, I also can not get it to work with a template, rest seems fine to me

13

The sunrise is perfect.
The sunset ends at 17:00 hours exactly, hover it should be 19:50.
I will have a play around and see what I can come up with.
The 2nd issue, I realise the only way to solve that is to send 0Wh to the energy state on PVoutput at midnight, which is another project

14

Seems your graph span is not working then … did you use this below? And you can check in devtools > template if the provides the right value

graph_span_template: |
    "{{ (( as_timestamp(states('sensor.sunset')) -
    as_timestamp(states('sensor.sunrise')))/3600) | int(0)  }}h"
1 Like
15

Yes I did use that formula exactly and I have checked this in the devtools and the reult is 12hrs
However the picture below shows the actual daylight sensor 13:03:54 plus sunset and sunrise, so it is 1hr wrong.
I am thinking it must be possible to use the data from sensor.sunrise for the offset and sensor.daylight for the span

Sun

16

I made a mistake, INT does not round, so if the diff is 12.9 it will show 12
Use this

"{{ (( as_timestamp(states('sensor.sunset')) -
    as_timestamp(states('sensor.sunrise')))/3600) | round(1)  }}h"
1 Like
17

Yes that works thank you, I did see that, but I thought well you know much more than I do, so you must be right.
I notice that the card refreshes at something like once a second, which I suppose is because it is using the tmestamp.
I have been trying to get my head around YAML, but in my younger more foolish days I got well stuck into Vis Basic, BBC micro machine language and html and now I am very old, (72), I find it difficult to learn new tricks, although I try to have crack at it myself, before asking for help.
Thanks for being patient with me. How do I mark this as a resolution?

18

I looked at the data again and for today (at least), it almost exactly ends at 20:00
7.22+12.77

image
image1141×333 26.6 KB

My graph shows fine
image
image1084×535 44.1 KB

2 Likes
19

‘solution’ is in one of the grey icons underneath a post (sometimes it is not there… then leave it)

20

Screenshot_PV
Screenshot_PV1080×1176 93.7 KB

That’s absolutely correct and exactly what I wanted to show.
I think I will add a couple more traces, such as the voltage and the power from the grid now

Thanks very much for your help, now on to the next project which is ???

21

There are many options, have a look at my graph in the huge-apex-post.
I want to trace consumption per day and set it out vs. production with forecast.
tbh, I have not yet found any practical use for the forecast other than making a nice looking graph :slight_smile:

ApexCharts card - A highly customizable graph card - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)

22

Could you please mark the solution vingerha has provided ?

Would help all others that it is a SOLVED issue and therefore worth to read.
Right now it seems to be still open and I had to read it all instead of clicking the solved button which than pushes his last answert to the TOP and everyone else will know that it is solved.

@vingerha had invested his time to solve it, so now it is your turn to thank him with that solution found button.

23

Well I would be pleased to do that if there was a SOLVED ICON available
see my earlier post in this thread …

****** SOLVED - FINISHED - END OF *********

(what else can I do)

1 Like
24

thanks - I was not aware of that and had thought that you could mark that always or move that tag to a better comment as the solution.

Wish you a great chrismas time.