CODEWITHSUNDEEP
javascriptformatcountdowntimelinevis.js
Tom Cheng
Tom Cheng

Reputation: 1389

How to customize time format of the labels on the time axis using vis.js

I'm using vis.js to draw timeline. For the project request, I have to customize the time axis format to countdown of current time in mm:ss. The original time axis label format is: oringial format

and I want to change the time axis like this enter image description here

For example: the current time is 11:20. The next interval 11:25 should be changed to countdown of current time, ie.,5 minutes (label should be shown 05:00 , format is mm:ss). 11:30 change to 10:00, 11:35 change to 15:00 etc. If the countdown is more than 60 mins, the format should be changed to HH:mm:ss automatically. If zoom out to days interval, will show countdown days automatically.

Can anybody help me?

Upvotes: 0

Views: 2579

Answers (1)

Jos de Jong
Jos de Jong

Reputation: 6819

This is not something you can configure in the timeline. You can customize the way the times are formatted, but you can't display a different time.

To solve this you will need to override some of the methods of the Timeline, but I think it's not that complicated in this case. Basically, you have to override the following two methods with your own implementation, returning a time diff somehow: 

vis.timeline.TimeStep.prototype.getLabelMinor
vis.timeline.TimeStep.prototype.getLabelMajor

You don't have to rebuild the library itself, it should be enough to load vis.js, then override these two methods, then load your Timeline.

The sourcecode of the two methods is located here:

https://github.com/almende/vis/blob/master/lib/timeline/TimeStep.js#L522-L550

Upvotes: 3

Related Questions