data_generator and graph_span and zooming

[Culan]

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser
• I verified that I'm really running the lastest version in my browser console
• I checked if there is another issue opened with the same problem

Describe the bug
I'm using data_generator to get my series data.
The xaxis is a datetime axis.
The data_generator is producing data timestamped in the future (prices of electricity of coming day).
I do not use graph_span as i want it to zoom to the data available.

The data are (probably) rendered correctly but the zoom of the graph starts from now (so it shows some columns in the end).
Then, i activated the toolbar and if i click on "Reset zoom" it zooms correctly to the area where my data is.

Version of the card
Version: 2.0.1

To Reproduce
This is the configuration I used:

type: custom:apexcharts-card
update_interval: 5s
apex_config:
  chart:
    zoom:
      enabled: true
    toolbar:
      show: true
      tools:
        zoom: true
        zoomin: true
        zoomout: true
        pan: true
        reset: true
    autoScaleXaxis: true
  xaxis.type: datetime
  yaxis:
    min: 0
    decimalsInFloat: 2
hours_12: false
now:
  show: false
series:
  - entity: sensor.nordpool_kwh_se4_sek_3_095_025
    name: Test
    type: column
    float_precision: 3
    data_generator: |
      let res = [];
      res.push([(new Date()).setHours(((new Date()).getHours() + 1)), 1]);
      res.push([(new Date()).setHours(((new Date()).getHours() + 2)), 2]);
      res.push([(new Date()).setHours(((new Date()).getHours() + 3)), 3]);
      res.push([(new Date()).setHours(((new Date()).getHours() + 4)), 4]);
      res.push([(new Date()).setHours(((new Date()).getHours() + 5)), 5]);
      res.push([(new Date()).setHours(((new Date()).getHours() + 6)), 6]);
      res.push([(new Date()).setHours(((new Date()).getHours() + 7)), 7]);

      return res;

Screenshots
Before reset zoom:

After zoom:

Expected behavior
I would expect the zoom to recalculate once the data_generator data has been added.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[Culan]

Anyone have any input on this?

[steinelg]

I am having the same issue when trying to plot a future values, the x-axis does not zoom properly, and data is often "out-of-view".

The partial workaround I am have found is to add "span" to the config, for instance

span:
  start: day
graph_span: 1d

but this is not an ideal solution as this means the amount of previous versus future data shown varies throughout the day. Ideally I would have liked to always look for instance six hours into the the past and six hours into the future, but it does not seem like this is currenlty supported.

One way to remedy this would be to add support in "span" for "now" as a value of "start" or end", so that

span:
  start: now
  offset:  -6h
graph_span:12h

that way you would always have a "sliding window" with the same ratio of past to future data in your plot.

[steinelg]

I found that by combining span offset and graph_span, this desired combination of historic and future values can be displayed in HA.

For instance to view 12 hours of historical data and 12 hours of future data, specify
graph_span: 24h span: offset: +12h

without specifically specifying any "start" or "end" in span.

So this is the work-around, but I agree it would be nice if the card figured this out on its own.

[Culan]

Nice find @steinelg !

In my case, i wan't graph_span to be dynamic to the dataset.
I do not know upfront how far ahead in the future my dataset holds.

I use it to plot electricity prices and at approx. 13:00 the prices of the coming day arrives.
So i want that until i get the prices of the coming day, the graph_span is from now until end of current day.
Then, when coming day prices arrive, i want it to zoom from now until end of day coming day.

Now, not defining any graph_span and having autoScaleXaxis to true seems to do what i want except it does not work with data_generator.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[github-actions]

This issue was closed because it has been stalled for 10 days with no activity.

[BobC76]

For anyone looking for a solution to this, I found one via https://community.home-assistant.io/t/apex-charts-with-a-dynamic-x-axis/554775/4 using "type: custom:card-templater" which let me template the graph_span based on a dynamic calculation