vasturiano / timelines-chart

Timelines Chart
http://vasturiano.github.io/timelines-chart/example/categorical/
MIT License
558 stars 121 forks source link

How can i use microsecond resolution #12

Closed assadtarik closed 4 years ago

assadtarik commented 6 years ago

Hi, The event that i want to plot are in microsec resolution. Is it possible to have the timeline in microsec resolution? If Yes how can i define it.

vasturiano commented 6 years ago

@assadtarik there's an interesting request I haven't seen before. :)

Well, the module relies on the Date object type which only supports down to millisecond granularity so you won't be able to pass usec values to it. How I would approach it is to specify the timestamps of usecs as if they were msecs, so that the component can make time comparisons, and then use the xTickFormat and timeFormat to format the timestamps so that they appear to be displaying usec ranges in the x-axis and tooltips respectively.

Let me know if it works for you. Would love to see a working version. :)

assadtarik commented 6 years ago

@vasturiano thank you. I have done it the similar way. But when the microsec or even nanosec is translated to Date(), there the problem happens. As translating microsec to millisec in the timeline it seams an whole year or months have passed. So this make the whole chart unreadable. As i am using events generated by a processor which are in microsec & nanosec interval, this make whole chart unreadable.

vasturiano commented 6 years ago

@assadtarik You should be able to control how the X axis labels are displayed (as well as times on the tooltips), so you can reverse the time displays back to usecs or nsecs, using the time formatters.

I've made an example here of using custom time formats (source): http://vasturiano.github.io/timelines-chart/example/custom-time-format/

The relevant parts are these:

mGraph
    .xTickFormat(n => +n)  // Controls time display on the X axis
    .timeFormat('%Q')         // Controls time display on the tooltips

You can change those methods to fit your preferred format of the numbers. Specially the function in xTickFormat can easily be modified to display <sec>:<msec>:<usec>:<nsec> or some similar syntax.