Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

Is it possible to format AxisTickStrategies.Time to display the Date at the start of the chart?

My specific use case involves plotting timestamps on the X axis and numeric values on the Y axis. I require the X axis to display both the date and time with millisecond accuracy. Initially, I achieved this using AxisTickStrategies.DateTime and the provided code. However, I faced the issue of limited zooming accuracy only up to second precision. I then attempted to use AxisTickStrategies.Time to achieve millisecond accuracy, but this resulted in displaying either date or time on the X axis. Can you suggest a solution to display both date and time on the X axis while maintaining millisecond accuracy during zooming?

Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can specify the display of milliseconds (as well as smaller decimal fractions of seconds) by setting the Format property. Here is an example in MATLAB: 
x.Format = 'hh:mm:ss.SSS';
This will display the time with millisecond accuracy. You can also use the datetime function to create a datetime array that includes milliseconds. Here is an example: 
t = datetime('now','Format','yyyy-MM-dd HH:mm:ss.SSS');
This will create a datetime array that includes milliseconds. You can then use this array to plot your data. I hope this helps! Let me know if you have any other questions.

Sources

How to display datetime () value up to millisecondsGet system time accurate to milliseconds in Windows cmdGet DateTime.Now with milliseconds precision - Stack OverflowHow to graph BOTH time AND data on the x-axis in Excel?
avatar
Tolerim
a month ago
Yes, you can display both Date and Time on the X Axis with millisecond accuracy by using the AxisTickFormatter callback function. Here's an example of how you can use it: 
const originDate = new Date();

chart.getDefaultAxisX()
    .setTitle('Timestamp')
    .setTickStrategy(AxisTickStrategies.Time)
    .setTickFormatter((value, index, ticks) => {
        return new Intl.DateTimeFormat('en-US', {
            year: 'numeric',
            month: 'numeric',
            day: 'numeric',
            hour: 'numeric',
            minute: 'numeric',
            second: 'numeric',
            fractionalSecondDigits: 3 // for millisecond accuracy
        }).format(value);
    })
    .setGreatTickStyle(emptyTick)
    .setDateOrigin(originDate);
In this example, we are using the AxisTickFormatter callback function to format the tick labels on the X Axis. We are using the Intl.DateTimeFormat object to format the date and time. By setting the fractionalSecondDigits option to 3, we are getting millisecond accuracy. Note that we are using the AxisTickStrategies.Time tick strategy for millisecond accuracy.
;