JavaScript Scrolling Time Ticks Chart - Editor

Example that showcases the TimeTickStrategy feature with real-time data.

TimeTickStrategy is one of the available options for automatic axis tick placement and formatting. It is designed for depicting milliseconds timestamp data with extremely high resolution and flexibility.

The effective range of TimeTickStrategy starts from maximum of 100 hours all the way down to individual milliseconds level.

For this entire range, the tick labels are formatted dynamically showing the currently relevant precision with all the required accuracy.

TimeTickStrategy is a very powerful feature for real-time data monitoring applications, since its effective range perfectly covers minute, hour and even day intervals - not to mention that you can zoom in so deep that you can even see differences between individual microseconds.

Since TimeTickStrategy interprets axis coordinates as "milliseconds after 0", it doesn't make much sense to supply data directly as UNIX timestamps - instead, most applications would choose some "time origin" and subtract it from the UNIX timestamp. This means that the data will be displayed as "difference from time origin".

In this example, timeOrigin is set to Date.now() at the start, and data point X values are calculated live as x: Date.now() - timeOrigin.

What is the difference between Time ticks and DateTime ticks?

The effective Axis range; TimeTickStrategy is used for depicting high-resolution data within some days max., while DateTimeStrategy is used for depicting lower resolution data over the span of long times, like some months or even tens of years.