vis-timeline
Version:
Create a fully customizable, interactive timeline with items and ranges.
244 lines (227 loc) • 6.21 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Timeline | Specific Item Selectability</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 ability to set specific items to be selectable.
</p>
<p>
Items selectability can be toggled by setting <code>selectable</code> in the <i>items</i> configuration
options. Note: This will not override the timeline's <code>selectable</code> configuration option. If
the timeline's <code>selectable</code> configuration option is false, then no items will be selectable.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr>
<td>item selectability of 'no subgroup' item in the 'foo' group</td>
<td id="select">true</td>
<td><button onclick="toggleItemSelectability()">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'
},
{
id: 'foo',
content: 'foo'
}
]);
// 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'
},
{
id: 'SG_1_2',
start: '2014-01-26',
end: '2014-01-27',
type: 'background',
className: 'positive',
group: 'bar',
subgroup: 'sg_1'
},
{
id: 1,
content: 'subgroup0_1',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group: 'bar',
subgroup: 'sg_1'
},
{
id: 2,
content: 'subgroup0_2',
start: '2014-01-22T12:00:01',
end: '2014-01-25T12:00:00',
group: 'bar',
subgroup: 'sg_1'
},
{
id: 'SG_2_1',
start: '2014-02-01',
end: '2014-02-02',
type: 'background',
group: 'bar',
subgroup: 'sg_2'
},
{
id: 'SG_2_2',
start: '2014-02-2',
end: '2014-02-03',
type: 'background',
className: 'negative',
group: 'bar',
subgroup: 'sg_2'
},
{
id: 3,
content: 'subgroup1_1',
start: '2014-01-27T02:00:00',
end: '2014-01-29',
group: 'bar',
subgroup: 'sg_2'
},
{
id: 4,
content: 'subgroup1_2',
start: '2014-01-28',
end: '2014-02-02',
group: 'bar',
subgroup: 'sg_2'
},
{
id: 'SG_3_1',
start: '2014-01-23',
end: '2014-01-25',
type: 'background',
group: 'bar',
subgroup: 'sg_3',
content: 'a'
},
{
id: 'SG_3_2',
start: '2014-01-26',
end: '2014-01-28',
type: 'background',
className: 'positive',
group: 'bar',
subgroup: 'sg_3',
content: 'b'
},
{
id: 5,
content: 'subgroup2_1',
start: '2014-01-23T12:00:00',
end: '2014-01-26T12:00:00',
group: 'bar',
subgroup: 'sg_3'
},
{
id: 6,
content: 'subgroup2_2',
start: '2014-01-26T12:00:01',
end: '2014-01-29T12:00:00',
group: 'bar',
subgroup: 'sg_3'
},
{
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 options = {
// orientation:'top'
start: '2014-01-10',
end: '2014-02-10',
selectable: true
};
var timeline = new vis.Timeline(container, items, groups, options);
var sel = true;
function toggleItemSelectability() {
items.update({ id: 0, selectable: (sel = !sel) });
document.getElementById('select').innerHTML = items.get(0).selectable;
timeline.setItems(items);
}
</script>
</body>
</html>