<!DOCTYPE HTML>
<html>
<head>
  <title>Timeline | Custom function label format example</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>

  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  
</head>
<body>
<p>
  This example demonstrate using custom function label formats.
</p>
<div id="visualization"></div>

<script>
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var groupCount = 3;
  var itemCount = 20;

  // create a data set with groups
  var names = ['John', 'Alston', 'Lee', 'Grant'];
  var groups = new vis.DataSet();
  for (var g = 0; g < groupCount; g++) {
    groups.add({id: g, content: names[g]});
  }

  // create a dataset with items
  var items = new vis.DataSet();
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 200, 'hours');
    var group = Math.floor(Math.random() * groupCount);
    items.add({
      id: i,
      group: group,
      content: 'item ' + i +
          ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
      start: start,
      type: 'box'
    });
  }

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    format: {
      minorLabels: function(date, scale, step) {
        var now = new Date();
        var ago = now - date;
        var divider;
        switch (scale) {
          case 'millisecond':
            divider = 1;
            break;
          case 'second':
            divider = 1000;
            break;
          case 'minute':
            divider = 1000 * 60;
            break;
          case 'hour':
            divider = 1000 * 60 * 60;
            break;
          case 'day':
            divider = 1000 * 60 * 60 * 24;
            break;
          case 'weekday':
            divider = 1000 * 60 * 60 * 24 * 7;
            break;
          case 'month':
            divider = 1000 * 60 * 60 * 24 * 30;
            break;
          case 'year':
            divider = 1000 * 60 * 60 * 24 * 365;
            break;
          default:
            return new Date(date);
        } 
        return  (Math.round(ago * step / divider)) + " " + scale + "s ago" 
      },
      majorLabels: function(date, scale, step) {
        var now = new Date();
        var ago = now - date;
        var divider;
        switch (scale) {
          case 'millisecond':
            divider = 1;
            break;
          case 'second':
            divider = 1000;
            break;
          case 'minute':
            divider = 1000 * 60;
            break;
          case 'hour':
            divider = 1000 * 60 * 60;
            break;
          case 'day':
            divider = 1000 * 60 * 60 * 24;
            break;
          case 'weekday':
            divider = 1000 * 60 * 60 * 24 * 7;
            break;
          case 'month':
            divider = 1000 * 60 * 60 * 24 * 30;
            break;
          case 'year':
            divider = 1000 * 60 * 60 * 24 * 365;
            break;
          default:
            return new Date(date);
        } 
        return  (Math.round(ago * step / divider)) + " " + scale + "s ago" 
      }
    }
  };

  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(items);

</script>
</body>
</html>