In vis-timeline, how do I make the time axis be labeled by numbers instead of a date/time?

1.2k views Asked by At

I'm trying to create a Timeline with a time axis labeled with index values (eg. ints) rather than a date/time value. My items have start and end values of integers. For example:

var container = document.getElementById('visualization');
var items = new vis.DataSet([
    { id: 1, content: 'item 1', start: 0, end: 2 },
    { id: 2, content: 'item 2', start: 2, end: 4 },
    { id: 3, content: 'item 3', start: 4, end: 8 },
]);
var timeline = new vis.Timeline(container, items);

The displayed timeline looks like: enter image description here

The start and end values are interpreted as milliseconds, and the time axis is based on specific times and dates. Is there a way for the time axis to only show the integer values (ie. only the 000, 001, 0002, etc) and not time values? I couldn't find anything in the docs for this use case. Thanks in advance!

1

There are 1 answers

0
Rehan On

Use this function in options to change minorLabels format:

  format: {
    minorLabels: function(date, scale, step) {
      switch (scale) {
        case 'millisecond':
          return new Date(date).getTime() + "ms";
        case 'second':
          var seconds = Math.round(new Date(date).getTime() / 1000);
          return seconds + "s";
        case 'minute':
          var minutes = Math.round(new Date(date).getTime() / 1000 * 60);
          return minutes + "m";
      }
    }
  }