Changes for v22.0.0.OS
This commit is contained in:
Thilina Hasantha
96
web/bower_components/vis/examples/timeline/interaction/animateWindow.html
vendored
Normal file
96
web/bower_components/vis/examples/timeline/interaction/animateWindow.html
vendored
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Animate window</title>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 11pt;
|
||||
}
|
||||
input {
|
||||
margin: 2px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>This example demonstrates functions to programmatically adjust the visible window of the Timeline.</p>
|
||||
|
||||
<p>
|
||||
<input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
|
||||
<input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation"><br>
|
||||
<input type="button" id="moveTo" value="Move to 2014-02-01"><br>
|
||||
<input type="button" id="fit" value="Fit all items"><br>
|
||||
<input type="button" id="select" value="Select & focus items 5 and 6"><br>
|
||||
<input type="button" id="focus1" value="Focus item 2"><br>
|
||||
<input type="button" id="focus2" value="Focus items 5 and 6 (slow and linear animation)"><br>
|
||||
<input type="button" id="focus3" value="Focus current selection"><br>
|
||||
</p>
|
||||
|
||||
<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' }
|
||||
});
|
||||
|
||||
// add items to the DataSet
|
||||
items.add([
|
||||
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
|
||||
{id: 2, content: 'item 2', start: '2014-01-18'},
|
||||
{id: 3, content: 'item 3', start: '2014-01-21'},
|
||||
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
|
||||
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
|
||||
{id: 6, content: 'item 6', start: '2014-01-26'}
|
||||
]);
|
||||
|
||||
var container = document.getElementById('visualization');
|
||||
var options = {
|
||||
start: '2014-01-10',
|
||||
end: '2014-02-10',
|
||||
editable: true,
|
||||
showCurrentTime: true
|
||||
};
|
||||
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
|
||||
document.getElementById('window1').onclick = function() {
|
||||
timeline.setWindow('2014-01-01', '2014-04-01');
|
||||
};
|
||||
document.getElementById('window2').onclick = function() {
|
||||
timeline.setWindow('2014-01-01', '2014-04-01', {animation: false});
|
||||
};
|
||||
document.getElementById('fit').onclick = function() {
|
||||
timeline.fit();
|
||||
};
|
||||
document.getElementById('select').onclick = function() {
|
||||
timeline.setSelection([5, 6], {
|
||||
focus: true
|
||||
});
|
||||
};
|
||||
document.getElementById('focus1').onclick = function() {
|
||||
timeline.focus(2);
|
||||
};
|
||||
document.getElementById('focus2').onclick = function() {
|
||||
timeline.focus([5, 6], {animation: {duration: 3000, easingFunction: 'linear'}}); // ms
|
||||
};
|
||||
document.getElementById('focus3').onclick = function() {
|
||||
var selection = timeline.getSelection();
|
||||
timeline.focus(selection);
|
||||
};
|
||||
document.getElementById('moveTo').onclick = function() {
|
||||
timeline.moveTo('2014-02-01');
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
73
web/bower_components/vis/examples/timeline/interaction/clickToUse.html
vendored
Normal file
73
web/bower_components/vis/examples/timeline/interaction/clickToUse.html
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Click to use</title>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 11pt;
|
||||
}
|
||||
#main {
|
||||
width: 728px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.container {
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<h1>Timeline click to use</h1>
|
||||
<p>
|
||||
This example demonstrates how to use the <code>clickToUse</code> option: before you can scroll and drag in the timeline, you first have to click in the timeline to activate.
|
||||
</p>
|
||||
</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' }
|
||||
});
|
||||
|
||||
// add items to the DataSet
|
||||
items.add([
|
||||
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
|
||||
{id: 2, content: 'item 2', start: '2014-01-18'},
|
||||
{id: 3, content: 'item 3', start: '2014-01-21'},
|
||||
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
|
||||
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
|
||||
{id: 6, content: 'item 6', start: '2014-01-26'}
|
||||
]);
|
||||
|
||||
function createTimeline(main) {
|
||||
var main = document.getElementById('main');
|
||||
var container = document.createElement('div');
|
||||
container.className = 'container';
|
||||
main.appendChild(container);
|
||||
|
||||
var options = {
|
||||
editable: true,
|
||||
clickToUse: true
|
||||
};
|
||||
|
||||
return new vis.Timeline(container, items, options);
|
||||
}
|
||||
|
||||
var timelines = [];
|
||||
for (var i = 0; i < 10; i++) {
|
||||
timelines.push(createTimeline());
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
125
web/bower_components/vis/examples/timeline/interaction/eventListeners.html
vendored
Normal file
125
web/bower_components/vis/examples/timeline/interaction/eventListeners.html
vendored
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Event listeners</title>
|
||||
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
This example listens for events <code>select</code>, <code>click</code>, <code>doubleClick</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline (other possible events: <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>, <code>mouseMove</code>), and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
|
||||
</p>
|
||||
<div id="visualization"></div>
|
||||
<p></p>
|
||||
<div id="hoveredItem"></div>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var items = new vis.DataSet([
|
||||
{id: 1, content: 'item 1', start: '2013-04-20'},
|
||||
{id: 2, content: 'item 2', start: '2013-04-14'},
|
||||
{id: 3, content: 'item 3', start: '2013-04-18'},
|
||||
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
|
||||
{id: 5, content: 'item 5', start: '2013-04-25'},
|
||||
{id: 6, content: 'item 6', start: '2013-04-27'}
|
||||
]);
|
||||
|
||||
var container = document.getElementById('visualization');
|
||||
var options = {
|
||||
editable: true,
|
||||
onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
|
||||
};
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
|
||||
timeline.on('rangechange', function (properties) {
|
||||
logEvent('rangechange', properties);
|
||||
});
|
||||
|
||||
timeline.on('rangechanged', function (properties) {
|
||||
logEvent('rangechanged', properties);
|
||||
});
|
||||
|
||||
timeline.on('select', function (properties) {
|
||||
logEvent('select', properties);
|
||||
});
|
||||
|
||||
timeline.on('itemover', function (properties) {
|
||||
logEvent('itemover', properties);
|
||||
setHoveredItem(properties.item);
|
||||
});
|
||||
|
||||
timeline.on('itemout', function (properties) {
|
||||
logEvent('itemout', properties);
|
||||
setHoveredItem('none');
|
||||
});
|
||||
|
||||
timeline.on('click', function (properties) {
|
||||
logEvent('click', properties);
|
||||
});
|
||||
|
||||
timeline.on('doubleClick', function (properties) {
|
||||
logEvent('doubleClick', properties);
|
||||
});
|
||||
|
||||
timeline.on('contextmenu', function (properties) {
|
||||
logEvent('contextmenu', properties);
|
||||
});
|
||||
|
||||
timeline.on('mouseDown', function (properties) {
|
||||
logEvent('mouseDown', properties);
|
||||
});
|
||||
|
||||
timeline.on('mouseUp', function (properties) {
|
||||
logEvent('mouseUp', properties);
|
||||
});
|
||||
|
||||
// other possible events:
|
||||
|
||||
// timeline.on('mouseOver', function (properties) {
|
||||
// logEvent('mouseOver', properties);
|
||||
// });
|
||||
|
||||
// timeline.on("mouseMove", function(properties) {
|
||||
// logEvent('mouseMove', properties);
|
||||
// });
|
||||
|
||||
items.on('*', function (event, properties) {
|
||||
logEvent(event, properties);
|
||||
});
|
||||
|
||||
function stringifyObject (object) {
|
||||
if (!object) return;
|
||||
var replacer = function(key, value) {
|
||||
if (value && value.tagName) {
|
||||
return "DOM Element";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
return JSON.stringify(object, replacer)
|
||||
}
|
||||
|
||||
function logEvent(event, properties) {
|
||||
var log = document.getElementById('log');
|
||||
var msg = document.createElement('div');
|
||||
msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
|
||||
'properties=' + stringifyObject(properties);
|
||||
log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
|
||||
}
|
||||
|
||||
function setHoveredItem(id) {
|
||||
var hoveredItem = document.getElementById('hoveredItem');
|
||||
hoveredItem.innerHTML = 'hoveredItem=' + id;
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
web/bower_components/vis/examples/timeline/interaction/limitMoveAndZoom.html
vendored
Normal file
53
web/bower_components/vis/examples/timeline/interaction/limitMoveAndZoom.html
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Limit move and zoom</title>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 11pt;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
The visible range is limited in this demo:
|
||||
</p>
|
||||
<ul>
|
||||
<li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
|
||||
<li>maximum visible date is limited to 2013-01-01 (excluded) using option <code>max</code></li>
|
||||
<li>visible zoom interval is limited to a minimum of 24 hours using option <code>zoomMin</code></li>
|
||||
<li>visible zoom interval is limited to a maximum of about 3 months using option <code>zoomMax</code></li>
|
||||
</ul>
|
||||
<div id="visualization"></div>
|
||||
|
||||
<script>
|
||||
// create some items
|
||||
// note that months are zero-based in the JavaScript Date object, so month 4 is May
|
||||
var items = new vis.DataSet([
|
||||
{'start': new Date(2012, 4, 25), 'content': 'First'},
|
||||
{'start': new Date(2012, 4, 26), 'content': 'Last'}
|
||||
]);
|
||||
|
||||
// create visualization
|
||||
var container = document.getElementById('visualization');
|
||||
var options = {
|
||||
height: '300px',
|
||||
min: new Date(2012, 0, 1), // lower limit of visible range
|
||||
max: new Date(2013, 0, 1), // upper limit of visible range
|
||||
zoomMin: 1000 * 60 * 60 * 24, // one day in milliseconds
|
||||
zoomMax: 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
|
||||
};
|
||||
|
||||
// create the timeline
|
||||
var timeline = new vis.Timeline(container);
|
||||
timeline.setOptions(options);
|
||||
timeline.setItems(items);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
83
web/bower_components/vis/examples/timeline/interaction/navigationMenu.html
vendored
Executable file
83
web/bower_components/vis/examples/timeline/interaction/navigationMenu.html
vendored
Executable file
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | navigation menu</title>
|
||||
|
||||
<style type="text/css">
|
||||
body, html, input {
|
||||
font-family: sans-serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
#visualization {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Create your own navigation menu by creating an overlay with buttons to zoom and move.
|
||||
</p>
|
||||
|
||||
<div id="visualization">
|
||||
<div class="menu">
|
||||
<input type="button" id="zoomIn" value="Zoom in"/>
|
||||
<input type="button" id="zoomOut" value="Zoom out"/>
|
||||
<input type="button" id="moveLeft" value="Move left"/>
|
||||
<input type="button" id="moveRight" value="Move right"/>
|
||||
<input type="button" id="toggleRollingMode" value="toggleRollingMode"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create a timeline with some data
|
||||
var container = document.getElementById('visualization');
|
||||
var items = new vis.DataSet([
|
||||
{id: 1, content: 'item 1', start: '2014-04-20'},
|
||||
{id: 2, content: 'item 2', start: '2014-04-14'},
|
||||
{id: 3, content: 'item 3', start: '2014-04-18'},
|
||||
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
|
||||
{id: 5, content: 'item 5', start: '2014-04-25'},
|
||||
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
|
||||
]);
|
||||
var options = {};
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
|
||||
/**
|
||||
* Move the timeline a given percentage to left or right
|
||||
* @param {Number} percentage For example 0.1 (left) or -0.1 (right)
|
||||
*/
|
||||
function move (percentage) {
|
||||
var range = timeline.getWindow();
|
||||
var interval = range.end - range.start;
|
||||
|
||||
timeline.setWindow({
|
||||
start: range.start.valueOf() - interval * percentage,
|
||||
end: range.end.valueOf() - interval * percentage
|
||||
});
|
||||
}
|
||||
|
||||
// attach events to the navigation buttons
|
||||
document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); };
|
||||
document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); };
|
||||
document.getElementById('moveLeft').onclick = function () { move( 0.2); };
|
||||
document.getElementById('moveRight').onclick = function () { move(-0.2); };
|
||||
document.getElementById('toggleRollingMode').onclick = function () { timeline.toggleRollingMode() };
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
web/bower_components/vis/examples/timeline/interaction/rollingMode.html
vendored
Normal file
48
web/bower_components/vis/examples/timeline/interaction/rollingMode.html
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | rolling mode Option</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1><i id="icon">⛶</i>Timeline rolling mode option</h1>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
|
||||
<script>
|
||||
var container = document.getElementById('mytimeline');
|
||||
|
||||
var items = new vis.DataSet();
|
||||
|
||||
for (var i = 10; i >= 0; i--) {
|
||||
items.add({
|
||||
id: i,
|
||||
content: "item " + i,
|
||||
start: new Date(new Date().getTime() + i*100000)
|
||||
});
|
||||
}
|
||||
|
||||
// Configuration for the Timeline
|
||||
// specify options
|
||||
var options = {
|
||||
start: new Date(),
|
||||
end: new Date(new Date().getTime() + 1000000),
|
||||
rollingMode: {
|
||||
follow: true,
|
||||
offset: 0.5
|
||||
}
|
||||
};
|
||||
|
||||
// create a Timeline
|
||||
timeline = new vis.Timeline(container, items, null, options);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
174
web/bower_components/vis/examples/timeline/interaction/setSelection.html
vendored
Normal file
174
web/bower_components/vis/examples/timeline/interaction/setSelection.html
vendored
Normal file
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Select items</title>
|
||||
|
||||
<style>
|
||||
body, html {
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 11pt;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>Set selection</h1>
|
||||
<p style="max-width: 600px;">
|
||||
Enter one or multiple ids of items, then press select to select the items. This demo uses the function <code>Timeline.setSelection(ids)</code>. Optionally, the window can be moved to the selected items.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Select item(s): <input type="text" id="selection" value="5, 6"><input type="button" id="select" value="Select"><br>
|
||||
<label><input type="checkbox" id="focus" checked> Focus on selection</label>
|
||||
</p>
|
||||
<div id="visualization"></div>
|
||||
|
||||
<br/>
|
||||
<p>If the height of the timeline is limited some items may be vertically offscreen. This demo uses <code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that focusing on an item will
|
||||
cause the timeline to scroll vertically to the item that is being focused on. You can use the buttons below select a random item either above or below the currently selected item.
|
||||
</p>
|
||||
<button id="prevFocus">Select Item Above</button>
|
||||
<button id="nextFocus">Select Item Below</button>
|
||||
<br/>
|
||||
|
||||
<p>If focusing on multiple items only the first item will be scrolled to. Try entering several ids and hitting <em>select</em>.</p>
|
||||
<p>
|
||||
Select item(s): <input type="text" id="selectionVertical" value="g1_5, g2_3"><input type="button" id="selectVertical" value="Select"><br>
|
||||
</p>
|
||||
|
||||
<div id="vertical-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' }
|
||||
});
|
||||
|
||||
// add items to the DataSet
|
||||
items.add([
|
||||
{id: 1, content: 'item 1<br>start', start: '2014-01-23'},
|
||||
{id: 2, content: 'item 2', start: '2014-01-18'},
|
||||
{id: 3, content: 'item 3', start: '2014-01-21'},
|
||||
{id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
|
||||
{id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
|
||||
{id: 6, content: 'item 6', start: '2014-01-26'}
|
||||
]);
|
||||
|
||||
var container = document.getElementById('visualization');
|
||||
var options = {
|
||||
editable: true
|
||||
};
|
||||
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
|
||||
var selection = document.getElementById('selection');
|
||||
var select = document.getElementById('select');
|
||||
var focus = document.getElementById('focus');
|
||||
select.onclick = function () {
|
||||
var ids = selection.value.split(',').map(function (value) {
|
||||
return value.trim();
|
||||
});
|
||||
timeline.setSelection(ids, {focus: focus.checked});
|
||||
};
|
||||
|
||||
function getRandomInt(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
|
||||
};
|
||||
|
||||
// Vertical scroll example
|
||||
var groups = [];
|
||||
var items = [];
|
||||
var groupItems = {};
|
||||
|
||||
for (var g = 0; g < 10; g++) {
|
||||
groups.push({
|
||||
id: g,
|
||||
content: "Group " + g
|
||||
});
|
||||
|
||||
groupItems[g] = [];
|
||||
|
||||
for (var i = 0; i < 30; i++) {
|
||||
items.push({
|
||||
id: "g" + g + "_" + i,
|
||||
content: "g" + g + "_" + i,
|
||||
group: g,
|
||||
start: "2014-" + (g + 1) + "-" + getRandomInt(1, 20)
|
||||
});
|
||||
|
||||
groupItems[g].push(items[items.length - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
var container2 = document.getElementById('vertical-visualization');
|
||||
var options = {
|
||||
editable: false,
|
||||
stack: true,
|
||||
height: 300,
|
||||
verticalScroll: true,
|
||||
groupOrder: 'id'
|
||||
};
|
||||
|
||||
var timeline2 = new vis.Timeline(container2, items, groups, options);
|
||||
|
||||
var groupIndex = 0;
|
||||
var itemIndex = 0;
|
||||
|
||||
var moveToItem = function(direction) {
|
||||
itemIndex += direction;
|
||||
groupIndex += direction;
|
||||
|
||||
if (groupIndex < 0) {
|
||||
groupIndex = groups.length - 1;
|
||||
} else if (groupIndex >= groups.length) {
|
||||
groupIndex = 0;
|
||||
}
|
||||
|
||||
var items = groupItems[groupIndex];
|
||||
|
||||
if (itemIndex < 0) {
|
||||
itemIndex = items.length - 1;
|
||||
} else if (itemIndex >= items.length) {
|
||||
itemIndex = 0;
|
||||
}
|
||||
|
||||
var id = items[itemIndex].id;
|
||||
|
||||
timeline2.setSelection(id, {focus: true});
|
||||
}
|
||||
|
||||
var nextFocus = document.getElementById('nextFocus');
|
||||
var prevFocus = document.getElementById('prevFocus');
|
||||
var selectionVertical = document.getElementById('selectionVertical');
|
||||
var selectVertical = document.getElementById('selectVertical');
|
||||
|
||||
selectVertical.onclick = function () {
|
||||
var ids = selectionVertical.value.split(',').map(function (value) {
|
||||
return value.trim();
|
||||
});
|
||||
timeline2.setSelection(ids, {focus: focus.checked});
|
||||
};
|
||||
|
||||
nextFocus.onclick = function() {
|
||||
moveToItem(1);
|
||||
};
|
||||
|
||||
prevFocus.onclick = function() {
|
||||
moveToItem(-1);
|
||||
};
|
||||
|
||||
// Set the initial focus
|
||||
setTimeout(function() {
|
||||
moveToItem(0);
|
||||
}, 500);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user