mega changes, including updates and X

author: Pliable Pixels <pliablepixels@gmail.com> 2017-09-21 12:49:18 -0400
committer: Pliable Pixels <pliablepixels@gmail.com> 2017-09-21 12:49:18 -0400
commit: b28028ac4082842143b0f528d6bc539da6ccb419 (patch)
tree: 1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/timeline/interaction
parent: 676270d21beed31d767a06c89522198c77d5d865 (diff)
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
author	Pliable Pixels <pliablepixels@gmail.com>	2017-09-21 12:49:18 -0400
committer	Pliable Pixels <pliablepixels@gmail.com>	2017-09-21 12:49:18 -0400
commit	b28028ac4082842143b0f528d6bc539da6ccb419 (patch)
tree	1e26ea969a781ed8e323fca4e3c76345113fc694 /www/lib/vis/examples/timeline/interaction
parent	676270d21beed31d767a06c89522198c77d5d865 (diff)