Timeline | groups | Subgroups

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>
<div id="visualization"></div>

SCSS

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

.vis-item.vis-background.negative {
  background-color: rgba(255, 0, 0, 0.2);
}
.vis-item.vis-background.positive {
  background-color: rgba(105, 255, 98, 0.2);
}
.vis-item.vis-background.cyan {
  background-color: rgba(#00a0e0, 0.2);
}
.vis-item.vis-background.marker {
  border-left: 2px solid green;
}

table {
  border: 1px solid gray;
}

td {
  text-align: center;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}

JavaScript

var container = document.getElementById("visualization");
var stackingStatus = document.getElementById("stackingStatus");
var stackSubgroupsStatus = document.getElementById("stackSubgroupsStatus");
var options = {
  // orientation:'top'
  start: "2014-01-10",
  end: "2014-02-10",
  editable: false,
  stack: false,
  //stackSubgroups: false,
  horizontalScroll: true,
  verticalScroll: true,
  zoomKey: "shiftKey",
  orientation: {
    axis: "top",
    item: "top",
  },
/*   order: function(a, b) {
    console.log(a,b);
    //return a.subgroupOrder - b.subgroupOrder;
  }, */
};
var items = new vis.DataSet({
  type: {
    start: "ISODate",
    end: "ISODate"
  },
});
var groups = new vis.DataSet([{
  id: "bar",
  content: "bar",
	subgroupStack: true,
  subgroupOrder: function (a, b) {
    console.log(a,b);
    return a.subgroupOrder - b.subgroupOrder;
  },
}]);
// add items to the DataSet
items.add([
  {
    id: 0,
    content: "Order",
    start: "2014-01-22",
    end: "2014-01-26",
    group: "bar",
    subgroup: "sg_1",
    subgroupOrder: 1,
    type: 'range'
  },
  {
    id: 1,
    content: "Pending",
    start: "2014-01-22",
    end: "2014-01-24",
    group: "bar",
    subgroup: "sg_1",
    subgroupOrder: 2,
    type: 'range'
  },
  {
    id: 2,
    content: "Studio",
    start: "2014-01-23",
    end: "2014-01-26",
    group: "bar",
    subgroup: "sg_1",
    subgroupOrder: 3,
    type: 'range'
  },
  
  { 
    id: 3,
    content: "Pending",
    start: "2014-01-27",
    end: "2014-01-29",
    group: "bar",
    subgroup: "sg_2",
    type: 'range'
  },
  {
    id: 4,
    content: "Studio",
    start: "2014-01-28",
    end: "2014-02-02",
    group: "bar",
    subgroup: "sg_2",
    type: 'range'
  }
]);



var timeline = new vis.Timeline(container, items, groups, options);

function toggleStacking() {
  options.stack = !options.stack;
  stackingStatus.innerHTML = options.stack.toString();
  timeline.setOptions(options);
}

function toggleStackSubgroups() {
 ...