Is there a way to chart time based data during biz hrs only?

[skwasha]

I have a bunch or order data. It is not evenly spaced (time-wise). There might be 10 orders between 9:00 and 10:00, and 5 between 10:00 and 11:00, and so on. There will never be orders between 17:00 and 9:00.

I'd like to be able to chart this with a cartesian time x axis (i.e., equidistant time ticks regardless of the # of data points). But I also want to skip the closed hours. Is this possible? Apologies if this is trivial and I'm just missing something in the docs.

I've tried "timeseries" but because of the inconsistency of the order times, this isn't ideal either.

TIA

[stockiNail]

@skwasha if you want to see the gap during uncovered timeframe, you could:

1. use time scale instead of timeseries
2. add a data point between the time frame 17:00 and 9:00 with NaN value (for instance { x: '2022-09-07 18:00:00', y: NaN })
3. set spanGaps: false in the line dataset. It's default but maybe it's better to set anyway

Here is a codepen: https://codepen.io/stockinail/pen/NWMxpmE

[skwasha]

Thanks for the response. I think I wasn't clear about what I would like to achieve. Where your chart is showing the gaps in data, what I would want is for the scale to jump as well... So, the hours from 17:00-09:00 would be absent from the scale (x-axis).

[stockiNail]

@skwasha Ok, in this way the quick way is do NOT use time or timeseries scale but category one.
You don't have to add any NaN value to the data but leverage on the ticks.callback to show the right tick based on the date.
Here is the codepen: https://codepen.io/stockinail/pen/JjvKaMV

In teh codepen, the ticks.callback is "parsing" the string value checking the index of space and semicolon. But, if you want to include in your application the date library (i.e. luxon) you could leverage on datetime library to parse and return the right tick.

[skwasha]

Thanks so much! Sorry - I jumped the gun here marking this answered... I just realized looking at your pen again that the data points are equidistant. I believe that's what timeseries does as well, no? From my understanding time will ensure equally spaced ticks, regardless of whether there's data or not. So, in your example all the points from 16:00 to 17:00 would be "squeezed" into the 16:00 to 17:00 ticks. So, what I want is the behavior of a time scale but with some of the hours skipped.

Thanks again for any ideas.

[stockiNail]

AFAIK time scale generates anyway the time even if no data are there. see my first codepen, where time scale is used: https://codepen.io/stockinail/pen/NWMxpmE

But you can use a linear scale for line chart. You need to transform the date in millis and add ticks.callback to format the ticks and stepSize to have 1 hour as gap between ticks.
See codepen: https://codepen.io/stockinail/pen/XWqRBZG

[louise-davies]

I also need to have a time scale with some "non-business" hours skipped. As @skwasha says, timeseries isn't appropriate as it distorts the points so that a point at 13:00 is equally close to 13:01 as it is to 12:00, whereas in a time scale these are spaced appropriately. I'm having a look at creating a custom scale, but the code for the time & timeseries scales are quite confusing so I'm struggling a bit on what I would have to change to have a time scale with non-business hours removed...

[skwasha]

I had a thought on this, though I have yet to actually try it... Would it be possible to split my data by day and then stack multiple days with each stack using a time scale?