vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
260 lines (244 loc) • 6.79 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Timeline | Sequential Selection</title>
<script src="../../../dist/vis-timeline-graph2d.min.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style>
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.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;
}
</style>
</head>
<body>
<p>This example shows the sequential selection option.</p>
<p>
When <code>sequentialSelection</code> is true, then only sequential items are allowed to be selected (no
gaps).
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>sequentialSelection</code></td>
<td id="seq">true</td>
<td><button onclick="toggleSequentialSelection()">Toggle</button></td>
</tr>
</tbody>
</table>
<br />
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
var groups = new vis.DataSet([
{
id: 'bar',
content: 'bar',
subgroupStack: { sg_1: true, sg_2: true, sg_3: true },
subgroupVisibility: { sg_1: true, sg_2: true, sg_3: true }
},
{
id: 'foo',
content: 'foo',
subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
}
]);
// add items to the DataSet
items.add([
{ id: 'A', start: '2014-01-20', end: '2014-01-22', type: 'background', group: 'foo' },
{
id: 'B',
start: '2014-01-22',
end: '2014-01-23',
type: 'background',
group: 'foo',
className: 'negative'
},
{ id: 0, content: 'no subgroup', start: '2014-01-20', end: '2014-01-22', group: 'foo' },
{
id: 'SG_1_1',
start: '2014-01-25',
end: '2014-01-27',
type: 'background',
group: 'bar',
subgroup: 'sg_1',
subgroupOrder: 0
},
{
id: 'SG_1_2',
start: '2014-01-26',
end: '2014-01-27',
type: 'background',
className: 'positive',
group: 'bar',
subgroup: 'sg_1',
subgroupOrder: 0
},
{
id: 1,
content: 'subgroup0_1',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group: 'bar',
subgroup: 'sg_1',
subgroupOrder: 0
},
{
id: 2,
content: 'subgroup0_2',
start: '2014-01-22T12:00:01',
end: '2014-01-25T12:00:00',
group: 'bar',
subgroup: 'sg_1',
subgroupOrder: 0
},
{
id: 'SG_2_1',
start: '2014-02-01',
end: '2014-02-02',
type: 'background',
group: 'bar',
subgroup: 'sg_2',
subgroupOrder: 1
},
{
id: 'SG_2_2',
start: '2014-02-2',
end: '2014-02-03',
type: 'background',
className: 'negative',
group: 'bar',
subgroup: 'sg_2',
subgroupOrder: 1
},
{
id: 3,
content: 'subgroup1_1',
start: '2014-01-27T02:00:00',
end: '2014-01-29',
group: 'bar',
subgroup: 'sg_2',
subgroupOrder: 1
},
{
id: 4,
content: 'subgroup1_2',
start: '2014-01-28',
end: '2014-02-02',
group: 'bar',
subgroup: 'sg_2',
subgroupOrder: 1
},
{
id: 'SG_3_1',
start: '2014-01-23',
end: '2014-01-25',
type: 'background',
group: 'bar',
subgroup: 'sg_3',
subgroupOrder: 2,
content: 'a'
},
{
id: 'SG_3_2',
start: '2014-01-26',
end: '2014-01-28',
type: 'background',
className: 'positive',
group: 'bar',
subgroup: 'sg_3',
subgroupOrder: 2,
content: 'b'
},
{
id: 5,
content: 'subgroup2_1',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group: 'bar',
subgroup: 'sg_3',
subgroupOrder: 2
},
{
id: 6,
content: 'subgroup2_2',
start: '2014-01-26T12:00:01',
end: '2014-01-29T12:00:00',
group: 'bar',
subgroup: 'sg_3',
subgroupOrder: 2
},
{
id: 'background',
start: '2014-01-29',
end: '2014-01-30',
type: 'background',
className: 'negative',
group: 'bar'
},
{
id: 'background_all',
start: '2014-01-31',
end: '2014-02-02',
type: 'background',
className: 'positive'
}
]);
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: true,
stack: true,
stackSubgroups: true,
multiselect: true,
sequentialSelection: true
};
var timeline = new vis.Timeline(container, items, groups, options);
function toggleSequentialSelection() {
options.sequentialSelection = !options.sequentialSelection;
document.getElementById('seq').innerHTML = options.sequentialSelection;
timeline.setOptions(options);
}
</script>
</body>
</html>