Timeline | items | Item ordering

by joshmoto

HTML

<link rel="stylesheet" href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css">
<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<p>
  <label for="ordering">
    <input type="checkbox" id="ordering" checked /> Apply custom ordering. Order items by their id.
  </label>
</p>

<div id="visualization"></div>

CSS

body,
html {
  font-family: sans-serif;
}
p {
  max-width: 800px;
}

JavaScript

// DOM element where the Timeline will be attached
var container = document.getElementById("visualization");

// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet();
var date = vis.moment("2021-11-26");
for (var i = 1; i < 101; i++) {
  date.add(Math.round(Math.random() * 2), "hour");
  items.add({
    id: i,
    content: "Item " + i,
    start: date.clone(),
    end: date.clone().add(4, "hour"),
  });
}

function customOrder(a, b) {
  // order by id
  return a.id - b.id;
}

// Configuration for the Timeline
var options = {
  order: customOrder,
  editable: false,
  margin: { item: 0 },
  horizontalScroll: true,
  verticalScroll: true,
  zoomKey: "shiftKey",
  orientation: {
    axis: "top",
    item: "top",
  },
};

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);

var ordering = document.getElementById("ordering");
ordering.onchange = function () {
  console.log(ordering.checked);
  timeline.setOptions({
    order: ordering.checked ? customOrder : () => {},
  });
};
ordering.onchange();