diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/interaction')
6 files changed, 447 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/interaction/animateWindow.html b/www/lib/vis/examples/timeline/interaction/animateWindow.html new file mode 100644 index 00000000..40a416f1 --- /dev/null +++ b/www/lib/vis/examples/timeline/interaction/animateWindow.html @@ -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" /> + <script src="../../googleAnalytics.js"></script> +</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>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/interaction/clickToUse.html b/www/lib/vis/examples/timeline/interaction/clickToUse.html new file mode 100644 index 00000000..d00f4428 --- /dev/null +++ b/www/lib/vis/examples/timeline/interaction/clickToUse.html @@ -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" /> + <script src="../../googleAnalytics.js"></script> +</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>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/interaction/eventListeners.html b/www/lib/vis/examples/timeline/interaction/eventListeners.html new file mode 100644 index 00000000..f3a9bcc5 --- /dev/null +++ b/www/lib/vis/examples/timeline/interaction/eventListeners.html @@ -0,0 +1,79 @@ +<!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" /> + <script src="../../googleAnalytics.js"></script> +</head> +<body> + <p> + This example listens for events <code>select</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline, 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 + }; + 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'); + }); + + items.on('*', function (event, properties) { + logEvent(event, properties); + }); + + function logEvent(event, properties) { + var log = document.getElementById('log'); + var msg = document.createElement('div'); + msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' + + 'properties=' + JSON.stringify(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>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html b/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html new file mode 100644 index 00000000..4eadd36a --- /dev/null +++ b/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html @@ -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" /> + <script src="../../googleAnalytics.js"></script> +</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>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/interaction/navigationMenu.html b/www/lib/vis/examples/timeline/interaction/navigationMenu.html new file mode 100755 index 00000000..cb7c19ad --- /dev/null +++ b/www/lib/vis/examples/timeline/interaction/navigationMenu.html @@ -0,0 +1,80 @@ +<!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" /> + <script src="../../googleAnalytics.js"></script> +</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"/> + </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); }; + +</script> +</body> +</html> diff --git a/www/lib/vis/examples/timeline/interaction/setSelection.html b/www/lib/vis/examples/timeline/interaction/setSelection.html new file mode 100644 index 00000000..f6a038ce --- /dev/null +++ b/www/lib/vis/examples/timeline/interaction/setSelection.html @@ -0,0 +1,66 @@ +<!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" /> + <script src="../../googleAnalytics.js"></script> +</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> + +<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}); + }; +</script> +</body> +</html>
\ No newline at end of file |