summaryrefslogtreecommitdiff
path: root/www/lib/vis/examples/timeline/interaction/navigationMenu.html
diff options
context:
space:
mode:
Diffstat (limited to 'www/lib/vis/examples/timeline/interaction/navigationMenu.html')
-rwxr-xr-xwww/lib/vis/examples/timeline/interaction/navigationMenu.html80
1 files changed, 0 insertions, 80 deletions
diff --git a/www/lib/vis/examples/timeline/interaction/navigationMenu.html b/www/lib/vis/examples/timeline/interaction/navigationMenu.html
deleted file mode 100755
index cb7c19ad..00000000
--- a/www/lib/vis/examples/timeline/interaction/navigationMenu.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!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>