diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/other')
17 files changed, 0 insertions, 1239 deletions
diff --git a/www/lib/vis/examples/timeline/other/customTimeBars.html b/www/lib/vis/examples/timeline/other/customTimeBars.html deleted file mode 100644 index 2c1a5f7c..00000000 --- a/www/lib/vis/examples/timeline/other/customTimeBars.html +++ /dev/null @@ -1,89 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Show current and custom time bars</title> - - <style type="text/css"> - body, html { - font-family: 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 Timeline has functions to add multiple custom time bars which can be dragged by the user. -</p> -<p> - <input type="button" id="add" value="Add custom vertical bar"> - <input type="text" id="barId" placeholder="custom bar ID"> -</p> -<p> - <input type="button" id="remove" value="Remove custom vertical bar"> - <input type="text" id="barIndex" value="t1" placeholder="custom bar ID"> -</p> -<p> - <code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span> -</p> -<p> - <code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span> -</p><br> - -<div id="visualization"></div> - -<script type="text/javascript"> - var container = document.getElementById('visualization'); - var items = new vis.DataSet(); - var customDate = new Date(); - var options = { - showCurrentTime: true, - start: new Date(Date.now() - 1000 * 60 * 60 * 24), - end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6) - }; - var timeline = new vis.Timeline(container, items, options); - - // Set first time bar - customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); - timeline.addCustomTime(customDate, 't1'); - - document.getElementById('add').onclick = function () { - try { - customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1); - var barId = document.getElementById('barId').value || undefined; - timeline.addCustomTime(customDate, barId); - document.getElementById('barId').value = ''; - } - catch (err) { - console.log(err); - alert(err); - } - }; - - document.getElementById('remove').onclick = function () { - try { - timeline.removeCustomTime(document.getElementById('barIndex').value); - document.getElementById('barIndex').value = ''; - } - catch (err) { - console.log(err); - alert(err); - } - }; - - timeline.on('timechange', function (properties) { - document.getElementById('timechangeBar').innerHTML = properties.id; - document.getElementById('timechangeEvent').innerHTML = properties.time; - }); - timeline.on('timechanged', function (properties) { - document.getElementById('timechangedBar').innerHTML = properties.id; - document.getElementById('timechangedEvent').innerHTML = properties.time; - }); - -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/dataAttributes.html b/www/lib/vis/examples/timeline/other/dataAttributes.html deleted file mode 100644 index 0aa1f14e..00000000 --- a/www/lib/vis/examples/timeline/other/dataAttributes.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Basic demo</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> - In this example all items get an HTML attribute attached: each item gets an attribute <code>data-id</code>, and items 1 and 6 have an additional attribute <code>data-tooltip</code>. -</p> - -<div id="visualization"></div> - -<script type="text/javascript"> - // DOM element where the Timeline will be attached - var container = document.getElementById('visualization'); - - // Create a DataSet (allows two way data-binding) - var items = new vis.DataSet([ - {id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'}, - {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', tooltip: 'This is item 6'} - ]); - - // Configuration for the Timeline - var options = {dataAttributes: ['tooltip', 'id']}; - - // Create a Timeline - var timeline = new vis.Timeline(container, items, options); -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/dataAttributesAll.html b/www/lib/vis/examples/timeline/other/dataAttributesAll.html deleted file mode 100644 index 5b926b54..00000000 --- a/www/lib/vis/examples/timeline/other/dataAttributesAll.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Basic demo</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> - In this example all items get HTML attributes attached: each item gets <code>data-?</code> attributes for each field defined on the JS object. -</p> - -<div id="visualization"></div> - -<script type="text/javascript"> - // DOM element where the Timeline will be attached - var container = document.getElementById('visualization'); - - // Create a DataSet (allows two way data-binding) - var items = new vis.DataSet([ - {id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'}, - {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', tooltip: 'This is item 6'} - ]); - - // Configuration for the Timeline - var options = {dataAttributes: 'all'}; - - // Create a Timeline - var timeline = new vis.Timeline(container, items, options); -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/drag&drop.html b/www/lib/vis/examples/timeline/other/drag&drop.html deleted file mode 100644 index 81bcb1f1..00000000 --- a/www/lib/vis/examples/timeline/other/drag&drop.html +++ /dev/null @@ -1,131 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <meta charset="utf-8"/> - <title>Timeline | Drag & Drop</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> - - <script src="../../googleAnalytics.js"></script> - - <style type="text/css"> - li.item { - list-style: none; - width: 150px; - color: #1A1A1A; - background-color: #D5DDF6; - border: 1px solid #97B0F8; - border-radius: 2px; - margin-bottom: 5px; - padding: 5px 12px; - } - li.item:before { - content: "≣"; - font-family: Arial, sans-serif; - display: inline-block; - font-size: inherit; - cursor: move; - } - </style> -</head> - -<body> - -<h1>Timeline Drag & Drop Example</h1> - -<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p> - -<div id="mytimeline" ></div> -<div> - <h3>Items:</h3> - <ul class="items"> - <li draggable="true" class="item"> - item 1 - box - </li> - <li draggable="true" class="item"> - item 2 - point - </li> - <li draggable="true" class="item"> - item 3 - range - </li> - </ul> -</div> - -<script> - - // create groups - var numberOfGroups = 3; - var groups = new vis.DataSet() - for (var i = 0; i < numberOfGroups; i++) { - groups.add({ - id: i, - content: 'Truck ' + i - }) - } - - // create items - var numberOfItems = 10; - var items = new vis.DataSet(); - - var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); - - for (var truck = 0; truck < numberOfGroups; truck++) { - var date = new Date(); - for (var order = 0; order < itemsPerGroup; order++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - - date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); - var end = new Date(date); - - items.add({ - id: order + itemsPerGroup * truck, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - } - } - - // specify options - var options = { - stack: true, - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - orientation: 'top' - }; - - // create a Timeline - var container = document.getElementById('mytimeline'); - timeline1 = new vis.Timeline(container, items, groups, options); - - function handleDragStart(event) { - dragSrcEl = event.target; - - event.dataTransfer.effectAllowed = 'move'; - var itemType = event.target.innerHTML.split('-')[1].trim(); - var item = { - id: new Date(), - type: itemType, - content: event.target.innerHTML.split('-')[0].trim(), - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - }; - - event.dataTransfer.setData("text/plain", JSON.stringify(item)); - } - - var items = document.querySelectorAll('.items .item'); - - for (var i = items.length - 1; i >= 0; i--) { - var item = items[i]; - item.addEventListener('dragstart', handleDragStart.bind(this), false); - } - -</script> - -</body> -</html> diff --git a/www/lib/vis/examples/timeline/other/functionLabelFormats.html b/www/lib/vis/examples/timeline/other/functionLabelFormats.html deleted file mode 100644 index 9de9023b..00000000 --- a/www/lib/vis/examples/timeline/other/functionLabelFormats.html +++ /dev/null @@ -1,141 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Custom function label format example</title> - - <style> - body, html { - font-family: arial, sans-serif; - font-size: 11pt; - } - - #visualization { - box-sizing: border-box; - width: 100%; - height: 300px; - } - </style> - - <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> - <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> - - <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 demonstrate using custom function label formats. -</p> -<div id="visualization"></div> - -<script> - var now = moment().minutes(0).seconds(0).milliseconds(0); - var groupCount = 3; - var itemCount = 20; - - // create a data set with groups - var names = ['John', 'Alston', 'Lee', 'Grant']; - var groups = new vis.DataSet(); - for (var g = 0; g < groupCount; g++) { - groups.add({id: g, content: names[g]}); - } - - // create a dataset with items - var items = new vis.DataSet(); - for (var i = 0; i < itemCount; i++) { - var start = now.clone().add(Math.random() * 200, 'hours'); - var group = Math.floor(Math.random() * groupCount); - items.add({ - id: i, - group: group, - content: 'item ' + i + - ' <span style="color:#97B0F8;">(' + names[group] + ')</span>', - start: start, - type: 'box' - }); - } - - // create visualization - var container = document.getElementById('visualization'); - var options = { - format: { - minorLabels: function(date, scale, step) { - var now = new Date(); - var ago = now - date; - var divider; - switch (scale) { - case 'millisecond': - divider = 1; - break; - case 'second': - divider = 1000; - break; - case 'minute': - divider = 1000 * 60; - break; - case 'hour': - divider = 1000 * 60 * 60; - break; - case 'day': - divider = 1000 * 60 * 60 * 24; - break; - case 'weekday': - divider = 1000 * 60 * 60 * 24 * 7; - break; - case 'month': - divider = 1000 * 60 * 60 * 24 * 30; - break; - case 'year': - divider = 1000 * 60 * 60 * 24 * 365; - break; - default: - return new Date(date); - } - return (Math.round(ago * step / divider)) + " " + scale + "s ago" - }, - majorLabels: function(date, scale, step) { - var now = new Date(); - var ago = now - date; - var divider; - switch (scale) { - case 'millisecond': - divider = 1; - break; - case 'second': - divider = 1000; - break; - case 'minute': - divider = 1000 * 60; - break; - case 'hour': - divider = 1000 * 60 * 60; - break; - case 'day': - divider = 1000 * 60 * 60 * 24; - break; - case 'weekday': - divider = 1000 * 60 * 60 * 24 * 7; - break; - case 'month': - divider = 1000 * 60 * 60 * 24 * 30; - break; - case 'year': - divider = 1000 * 60 * 60 * 24 * 365; - break; - default: - return new Date(date); - } - return (Math.round(ago * step / divider)) + " " + scale + "s ago" - } - } - }; - - var timeline = new vis.Timeline(container); - timeline.setOptions(options); - timeline.setGroups(groups); - timeline.setItems(items); - -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/groupsPerformance.html b/www/lib/vis/examples/timeline/other/groupsPerformance.html deleted file mode 100644 index 1b16af30..00000000 --- a/www/lib/vis/examples/timeline/other/groupsPerformance.html +++ /dev/null @@ -1,110 +0,0 @@ -<html> -<head> - <title>Timeline | A lot of grouped data</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> - - <style type="text/css"> - body { - color: #4D4D4D; - font: 10pt arial; - } - </style> - <script src="../../googleAnalytics.js"></script> -</head> - -<body onresize="/*timeline.checkResize();*/"> -<h1>Timeline grouping performance</h1> - -<p> - Choose a number of items: - <a href="?count=100">100</a>, - <a href="?count=1000">1000</a>, - <a href="?count=10000">10000</a>, - <a href="?count=100000">100000</a> -<p> -<p> - Current number of items: <span id='count'>100</span> -</p> - -<div id="mytimeline"></div> - -<script> - /** - * Get URL parameter - * http://www.netlobo.com/url_query_string_javascript.html - */ - function gup( name ) { - name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]"); - var regexS = "[\\?&]"+name+"=([^&#]*)"; - var regex = new RegExp( regexS ); - var results = regex.exec( window.location.href ); - if( results == null ) - return ""; - else - return results[1]; - } - - // get selected item count from url parameter - var count = (Number(gup('count')) || 1000); - - // create groups - var groups = new vis.DataSet([ - {id: 1, content: 'Truck 1'}, - {id: 2, content: 'Truck 2'}, - {id: 3, content: 'Truck 3'}, - {id: 4, content: 'Truck 4'} - ]); - - // create items - var items = new vis.DataSet(); - - var order = 1; - var truck = 1; - for (var j = 0; j < 4; j++) { - var date = new Date(); - for (var i = 0; i < count/4; i++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - - date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); - var end = new Date(date); - - items.add({ - id: order, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - - order++; - } - truck++; - } - - // specify options - var options = { - stack: false, - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - margin: { - item: 10, // minimal margin between items - axis: 5 // minimal margin between items and the axis - }, - orientation: 'top' - }; - - // create a Timeline - var container = document.getElementById('mytimeline'); - timeline = new vis.Timeline(container, null, options); - timeline.setGroups(groups); - timeline.setItems(items); - - document.getElementById('count').innerHTML = count; -</script> - -</body> -</html> diff --git a/www/lib/vis/examples/timeline/other/hidingPeriods.html b/www/lib/vis/examples/timeline/other/hidingPeriods.html deleted file mode 100644 index 52ec6f9a..00000000 --- a/www/lib/vis/examples/timeline/other/hidingPeriods.html +++ /dev/null @@ -1,53 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Hiding periods</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> - It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights. -</p> -<div id="visualization"></div> -<script type="text/javascript"> - // DOM element where the Timeline will be attached - var container = document.getElementById('visualization'); - - // Create a DataSet (allows two way data-binding) - var items = new vis.DataSet([ - {id: 1, content: 'item 1', start: '2014-04-19'}, - {id: 2, content: 'item 2', start: '2014-04-21'}, - {id: 3, content: 'item 3', start: '2014-04-18'}, - {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-24'}, - {id: 5, content: 'item 5', start: '2014-04-26 12:00:00'}, - {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'} - ]); - - // Configuration for the Timeline - var options = { - hiddenDates: [ - {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'}, - {start: '2013-10-26 00:00:00', end: '2013-10-28 00:00:00', repeat: 'weekly'}, // daily weekly monthly yearly - {start: '2013-03-29 20:00:00', end: '2013-03-30 09:00:00', repeat: 'daily'} // daily weekly monthly yearly - ], - start: '2014-04-17', - end: '2014-05-01', - height: '200px', - editable: true - }; - - // Create a Timeline - var timeline = new vis.Timeline(container, items, options); - timeline.addCustomTime("2014-04-18 13:00:00"); -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/horizontalScroll.html b/www/lib/vis/examples/timeline/other/horizontalScroll.html deleted file mode 100644 index a999cd51..00000000 --- a/www/lib/vis/examples/timeline/other/horizontalScroll.html +++ /dev/null @@ -1,77 +0,0 @@ -<html> -<head> - <title>Timeline | Horizontal Scroll Option</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> - - <script src="../../googleAnalytics.js"></script> -</head> - -<body> - -<h1>Timeline horizontal scroll option</h1> - -<div id="mytimeline"></div> - -<script> - - // create groups - var numberOfGroups = 25; - var groups = new vis.DataSet() - for (var i = 0; i < numberOfGroups; i++) { - groups.add({ - id: i, - content: 'Truck ' + i - }) - } - - // create items - var numberOfItems = 1000; - var items = new vis.DataSet(); - - var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); - - for (var truck = 0; truck < numberOfGroups; truck++) { - var date = new Date(); - for (var order = 0; order < itemsPerGroup; order++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - - date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); - var end = new Date(date); - - items.add({ - id: order + itemsPerGroup * truck, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - } - } - - // specify options - var options = { - stack: true, - horizontalScroll: true, - zoomKey: 'ctrlKey', - maxHeight: 400, - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - margin: { - item: 10, // minimal margin between items - axis: 5 // minimal margin between items and the axis - }, - orientation: 'top' - }; - - // create a Timeline - var container = document.getElementById('mytimeline'); - timeline = new vis.Timeline(container, items, groups, options); - -</script> - -</body> -</html> diff --git a/www/lib/vis/examples/timeline/other/localization.html b/www/lib/vis/examples/timeline/other/localization.html deleted file mode 100644 index 5b58923b..00000000 --- a/www/lib/vis/examples/timeline/other/localization.html +++ /dev/null @@ -1,68 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Localization</title> - - <style type="text/css"> - body, html, select { - font-family: sans-serif; - font-size: 11pt; - } - </style> - - <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script> - <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> - To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>. -</p> - -<p> - <label for="locale">Select a locale:</label> - <select id="locale"> - <option value="en" selected>en</option> - <option value="it">it</option> - <option value="nl">nl</option> - <option value="de">de</option> - </select> -</p> - -<div id="visualization"></div> - -<script type="text/javascript"> - var DAY = 24 * 60 * 60 * 1000; - - // DOM element where the Timeline will be attached - var container = document.getElementById('visualization'); - - // Create a DataSet (allows two way data-binding) - var items = new vis.DataSet([ - {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)}, - {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)} - ]); - - // Configuration for the Timeline - var options = { - showCurrentTime: true - }; - - // Create a Timeline - var timeline = new vis.Timeline(container, items, options); - timeline.addCustomTime(new Date()); - - timeline.setCustomTime(new Date(new Date().valueOf() + DAY)); - - // update the locale when changing the select box value - var select = document.getElementById('locale'); - select.onchange = function () { - timeline.setOptions({ - locale: this.value - }); - }; - select.onchange(); -</script> -</body> -</html> diff --git a/www/lib/vis/examples/timeline/other/performance.html b/www/lib/vis/examples/timeline/other/performance.html deleted file mode 100644 index 45b22aab..00000000 --- a/www/lib/vis/examples/timeline/other/performance.html +++ /dev/null @@ -1,65 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | performance</title> - - <style> - body, html { - font-family: arial, sans-serif; - font-size: 11pt; - } - </style> - - <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> - <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> - - <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> - Test the performance with a lot of items. The Timeline can load hundreds of thousands of items, but the performance of rendering them in the browser is limited. Rendering typically runs smooth for up to a few hundreds of items at once (you can set a <code>zoomMax</code> to prevent the user from zooming out too far). -</p> -<p> - <label for="count">Number of items</label> - <input id="count" value="10000"> - <input id="draw" type="button" value="draw"> -</p> -<div id="visualization"></div> - -<script> - // create a dataset with items - var now = moment().minutes(0).seconds(0).milliseconds(0); - var items = new vis.DataSet({ - type: {start: 'ISODate', end: 'ISODate' } - }); - - // create data - function createData() { - var count = parseInt(document.getElementById('count').value) || 100; - var newData = []; - var start = now; - for (var i = 0; i < count; i++) { - newData.push({id: i, content: 'item ' + i, start: start + 24*3600*1000 * i}); // much much faster than now.clone add days - } - items.clear(); - items.add(newData); - } - createData(); - - document.getElementById('draw').onclick = createData; - - var container = document.getElementById('visualization'); - var options = { - editable: true, - start: now.clone().add(-3, 'days'), - end: now.clone().add(11, 'days'), - zoomMin: 1000 * 60 * 60 * 24, // a day - zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months - }; - - var timeline = new vis.Timeline(container, items, options); -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html deleted file mode 100644 index 363845fe..00000000 --- a/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html +++ /dev/null @@ -1,17 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline require.js demo</title> - - <script data-main="scripts/main" src="scripts/require.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 shows how to load the vis.js library using require.js. -</p> -<div id="visualization"></div> -</body> -</html> diff --git a/www/lib/vis/examples/timeline/other/requirejs/scripts/main.js b/www/lib/vis/examples/timeline/other/requirejs/scripts/main.js deleted file mode 100644 index f8148540..00000000 --- a/www/lib/vis/examples/timeline/other/requirejs/scripts/main.js +++ /dev/null @@ -1,19 +0,0 @@ -require.config({ - paths: { - vis: '../../../../../dist/vis' - } -}); - -require(['vis'], function (vis) { - var container = document.getElementById('visualization'); - var data = 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 options = {}; - var timeline = new vis.Timeline(container, data, options); -}); diff --git a/www/lib/vis/examples/timeline/other/requirejs/scripts/require.js b/www/lib/vis/examples/timeline/other/requirejs/scripts/require.js deleted file mode 100644 index 8de013dc..00000000 --- a/www/lib/vis/examples/timeline/other/requirejs/scripts/require.js +++ /dev/null @@ -1,35 +0,0 @@ -/* - RequireJS 2.1.2 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved. - Available via the MIT or new BSD license. - see: http://github.com/jrburke/requirejs for details -*/ -var requirejs,require,define; -(function(Y){function H(b){return"[object Function]"===L.call(b)}function I(b){return"[object Array]"===L.call(b)}function x(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function M(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function r(b,c){return da.call(b,c)}function i(b,c){return r(b,c)&&b[c]}function E(b,c){for(var d in b)if(r(b,d)&&c(b[d],d))break}function Q(b,c,d,i){c&&E(c,function(c,h){if(d||!r(b,h))i&&"string"!==typeof c?(b[h]||(b[h]={}),Q(b[h], -c,d,i)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function Z(b){if(!b)return b;var c=Y;x(b.split("."),function(b){c=c[b]});return c}function J(b,c,d,i){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=i;d&&(c.originalError=d);return c}function ea(b){function c(a,g,v){var e,n,b,c,d,j,f,h=g&&g.split("/");e=h;var l=m.map,k=l&&l["*"];if(a&&"."===a.charAt(0))if(g){e=i(m.pkgs,g)?h=[g]:h.slice(0,h.length-1);g=a=e.concat(a.split("/")); -for(e=0;g[e];e+=1)if(n=g[e],"."===n)g.splice(e,1),e-=1;else if(".."===n)if(1===e&&(".."===g[2]||".."===g[0]))break;else 0<e&&(g.splice(e-1,2),e-=2);e=i(m.pkgs,g=a[0]);a=a.join("/");e&&a===g+"/"+e.main&&(a=g)}else 0===a.indexOf("./")&&(a=a.substring(2));if(v&&(h||k)&&l){g=a.split("/");for(e=g.length;0<e;e-=1){b=g.slice(0,e).join("/");if(h)for(n=h.length;0<n;n-=1)if(v=i(l,h.slice(0,n).join("/")))if(v=i(v,b)){c=v;d=e;break}if(c)break;!j&&(k&&i(k,b))&&(j=i(k,b),f=e)}!c&&j&&(c=j,d=f);c&&(g.splice(0,d, -c),a=g.join("/"))}return a}function d(a){z&&x(document.getElementsByTagName("script"),function(g){if(g.getAttribute("data-requiremodule")===a&&g.getAttribute("data-requirecontext")===j.contextName)return g.parentNode.removeChild(g),!0})}function y(a){var g=i(m.paths,a);if(g&&I(g)&&1<g.length)return d(a),g.shift(),j.require.undef(a),j.require([a]),!0}function f(a){var g,b=a?a.indexOf("!"):-1;-1<b&&(g=a.substring(0,b),a=a.substring(b+1,a.length));return[g,a]}function h(a,g,b,e){var n,u,d=null,h=g?g.name: -null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(L+=1));a=f(a);d=a[0];a=a[1];d&&(d=c(d,h,e),u=i(p,d));a&&(d?k=u&&u.normalize?u.normalize(a,function(a){return c(a,h,e)}):c(a,h,e):(k=c(a,h,e),a=f(k),d=a[0],k=a[1],b=!0,n=j.nameToUrl(k)));b=d&&!u&&!b?"_unnormalized"+(M+=1):"";return{prefix:d,name:k,parentMap:g,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(d?d+"!"+k:k)+b}}function q(a){var g=a.id,b=i(k,g);b||(b=k[g]=new j.Module(a));return b}function s(a,g,b){var e=a.id,n=i(k,e);if(r(p,e)&&(!n||n.defineEmitComplete))"defined"=== -g&&b(p[e]);else q(a).on(g,b)}function C(a,g){var b=a.requireModules,e=!1;if(g)g(a);else if(x(b,function(g){if(g=i(k,g))g.error=a,g.events.error&&(e=!0,g.emit("error",a))}),!e)l.onError(a)}function w(){R.length&&(fa.apply(F,[F.length-1,0].concat(R)),R=[])}function A(a,g,b){var e=a.map.id;a.error?a.emit("error",a.error):(g[e]=!0,x(a.depMaps,function(e,c){var d=e.id,h=i(k,d);h&&(!a.depMatched[c]&&!b[d])&&(i(g,d)?(a.defineDep(c,p[d]),a.check()):A(h,g,b))}),b[e]=!0)}function B(){var a,g,b,e,n=(b=1E3*m.waitSeconds)&& -j.startTime+b<(new Date).getTime(),c=[],h=[],f=!1,l=!0;if(!T){T=!0;E(k,function(b){a=b.map;g=a.id;if(b.enabled&&(a.isDefine||h.push(b),!b.error))if(!b.inited&&n)y(g)?f=e=!0:(c.push(g),d(g));else if(!b.inited&&(b.fetched&&a.isDefine)&&(f=!0,!a.prefix))return l=!1});if(n&&c.length)return b=J("timeout","Load timeout for modules: "+c,null,c),b.contextName=j.contextName,C(b);l&&x(h,function(a){A(a,{},{})});if((!n||e)&&f)if((z||$)&&!U)U=setTimeout(function(){U=0;B()},50);T=!1}}function D(a){r(p,a[0])|| -q(h(a[0],null,!0)).init(a[1],a[2])}function G(a){var a=a.currentTarget||a.srcElement,b=j.onScriptLoad;a.detachEvent&&!V?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=j.onScriptError;(!a.detachEvent||V)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function K(){var a;for(w();F.length;){a=F.shift();if(null===a[0])return C(J("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));D(a)}}var T,W,j,N,U,m={waitSeconds:7, -baseUrl:"./",paths:{},pkgs:{},shim:{},map:{},config:{}},k={},X={},F=[],p={},S={},L=1,M=1;N={require:function(a){return a.require?a.require:a.require=j.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m.config&&i(m.config,a.map.id)||{}},exports:p[a.map.id]}}};W=function(a){this.events=i(X,a.id)||{};this.map=a;this.shim= -i(m.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};W.prototype={init:function(a,b,c,e){e=e||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;this.ignore=e.ignore;e.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]= -b)},fetch:function(){if(!this.fetched){this.fetched=!0;j.startTime=(new Date).getTime();var a=this.map;if(this.shim)j.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=this.map.url;S[a]||(S[a]=!0,j.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var e=this.exports,n=this.factory; -if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(H(n)){if(this.events.error)try{e=j.execCb(c,n,b,e)}catch(d){a=d}else e=j.execCb(c,n,b,e);this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==this.exports?e=b.exports:void 0===e&&this.usingExports&&(e=this.exports));if(a)return a.requireMap=this.map,a.requireModules=[this.map.id],a.requireType="define",C(this.error=a)}else e=n;this.exports=e;if(this.map.isDefine&& -!this.ignore&&(p[c]=e,l.onResourceLoad))l.onResourceLoad(j,this.map,this.depMaps);delete k[c];this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=h(a.prefix);this.depMaps.push(d);s(d,"defined",t(this,function(e){var n,d;d=this.map.name;var v=this.map.parentMap?this.map.parentMap.name:null,f=j.makeRequire(a.parentMap,{enableBuildCallback:!0, -skipMap:!0});if(this.map.unnormalized){if(e.normalize&&(d=e.normalize(d,function(a){return c(a,v,!0)})||""),e=h(a.prefix+"!"+d,this.map.parentMap),s(e,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=i(k,e.id)){this.depMaps.push(e);if(this.events.error)d.on("error",t(this,function(a){this.emit("error",a)}));d.enable()}}else n=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),n.error=t(this,function(a){this.inited=!0;this.error= -a;a.requireModules=[b];E(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&delete k[a.map.id]});C(a)}),n.fromText=t(this,function(e,c){var d=a.name,u=h(d),v=O;c&&(e=c);v&&(O=!1);q(u);r(m.config,b)&&(m.config[d]=m.config[b]);try{l.exec(e)}catch(k){throw Error("fromText eval for "+d+" failed: "+k);}v&&(O=!0);this.depMaps.push(u);j.completeLoad(d);f([d],n)}),e.load(a.name,f,n,m)}));j.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){this.enabling=this.enabled=!0;x(this.depMaps,t(this,function(a, -b){var c,e;if("string"===typeof a){a=h(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=i(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",t(this,function(a){this.defineDep(b,a);this.check()}));this.errback&&s(a,"error",this.errback)}c=a.id;e=k[c];!r(N,c)&&(e&&!e.enabled)&&j.enable(a,this)}));E(this.pluginMaps,t(this,function(a){var b=i(k,a.id);b&&!b.enabled&&j.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c= -this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){x(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};j={config:m,contextName:b,registry:k,defined:p,urlFetched:S,defQueue:F,Module:W,makeModuleMap:h,nextTick:l.nextTick,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=m.pkgs,c=m.shim,e={paths:!0,config:!0,map:!0};E(a,function(a,b){e[b]?"map"===b?Q(m[b],a,!0,!0):Q(m[b],a,!0):m[b]=a});a.shim&&(E(a.shim,function(a, -b){I(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=j.makeShimExports(a);c[b]=a}),m.shim=c);a.packages&&(x(a.packages,function(a){a="string"===typeof a?{name:a}:a;b[a.name]={name:a.name,location:a.location||a.name,main:(a.main||"main").replace(ga,"").replace(aa,"")}}),m.pkgs=b);E(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=h(b))});if(a.deps||a.callback)j.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(Y,arguments)); -return b||a.exports&&Z(a.exports)}},makeRequire:function(a,d){function f(e,c,u){var i,m;d.enableBuildCallback&&(c&&H(c))&&(c.__requireJsBuild=!0);if("string"===typeof e){if(H(c))return C(J("requireargs","Invalid require call"),u);if(a&&r(N,e))return N[e](k[a.id]);if(l.get)return l.get(j,e,a);i=h(e,a,!1,!0);i=i.id;return!r(p,i)?C(J("notloaded",'Module name "'+i+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[i]}K();j.nextTick(function(){K();m=q(h(null,a));m.skipMap=d.skipMap; -m.init(e,c,u,{enabled:!0});B()});return f}d=d||{};Q(f,{isBrowser:z,toUrl:function(b){var d=b.lastIndexOf("."),g=null;-1!==d&&(g=b.substring(d,b.length),b=b.substring(0,d));return j.nameToUrl(c(b,a&&a.id,!0),g)},defined:function(b){return r(p,h(b,a,!1,!0).id)},specified:function(b){b=h(b,a,!1,!0).id;return r(p,b)||r(k,b)}});a||(f.undef=function(b){w();var c=h(b,a,!0),d=i(k,b);delete p[b];delete S[c.url];delete X[b];d&&(d.events.defined&&(X[b]=d.events),delete k[b])});return f},enable:function(a){i(k, -a.id)&&q(a).enable()},completeLoad:function(a){var b,c,d=i(m.shim,a)||{},h=d.exports;for(w();F.length;){c=F.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);D(c)}c=i(k,a);if(!b&&!r(p,a)&&c&&!c.inited){if(m.enforceDefine&&(!h||!Z(h)))return y(a)?void 0:C(J("nodefine","No define call for "+a,null,[a]));D([a,d.deps||[],d.exportsFn])}B()},nameToUrl:function(a,b){var c,d,h,f,j,k;if(l.jsExtRegExp.test(a))f=a+(b||"");else{c=m.paths;d=m.pkgs;f=a.split("/");for(j=f.length;0<j;j-=1)if(k= -f.slice(0,j).join("/"),h=i(d,k),k=i(c,k)){I(k)&&(k=k[0]);f.splice(0,j,k);break}else if(h){c=a===h.name?h.location+"/"+h.main:h.location;f.splice(0,j,c);break}f=f.join("/");f+=b||(/\?/.test(f)?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":m.baseUrl)+f}return m.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+m.urlArgs):f},load:function(a,b){l.load(j,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ha.test((a.currentTarget||a.srcElement).readyState))P= -null,a=G(a),j.completeLoad(a.id)},onScriptError:function(a){var b=G(a);if(!y(b.id))return C(J("scripterror","Script error",a,[b.id]))}};j.require=j.makeRequire();return j}var l,w,A,D,s,G,P,K,ba,ca,ia=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ja=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,aa=/\.js$/,ga=/^\.\//;w=Object.prototype;var L=w.toString,da=w.hasOwnProperty,fa=Array.prototype.splice,z=!!("undefined"!==typeof window&&navigator&&document),$=!z&&"undefined"!==typeof importScripts,ha=z&& -"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,V="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),B={},q={},R=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(H(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!H(require)&&(q=require,require=void 0);l=requirejs=function(b,c,d,y){var f,h="_";!I(b)&&"string"!==typeof b&&(f=b,I(c)?(b=c,c=d,d=y):b=[]);f&&f.context&&(h=f.context);(y=i(B,h))||(y=B[h]=l.s.newContext(h)); -f&&y.configure(f);return y.require(b,c,d)};l.config=function(b){return l(b)};l.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=l);l.version="2.1.2";l.jsExtRegExp=/^\/|:|\?|\.js$/;l.isBrowser=z;w=l.s={contexts:B,newContext:ea};l({});x(["toUrl","undef","defined","specified"],function(b){l[b]=function(){var c=B._;return c.require[b].apply(c,arguments)}});if(z&&(A=w.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))A= -w.head=D.parentNode;l.onError=function(b){throw b;};l.load=function(b,c,d){var i=b&&b.config||{},f;if(z)return f=i.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),f.type=i.scriptType||"text/javascript",f.charset="utf-8",f.async=!0,f.setAttribute("data-requirecontext",b.contextName),f.setAttribute("data-requiremodule",c),f.attachEvent&&!(f.attachEvent.toString&&0>f.attachEvent.toString().indexOf("[native code"))&&!V?(O=!0,f.attachEvent("onreadystatechange", -b.onScriptLoad)):(f.addEventListener("load",b.onScriptLoad,!1),f.addEventListener("error",b.onScriptError,!1)),f.src=d,K=f,D?A.insertBefore(f,D):A.appendChild(f),K=null,f;$&&(importScripts(d),b.completeLoad(c))};z&&M(document.getElementsByTagName("script"),function(b){A||(A=b.parentNode);if(s=b.getAttribute("data-main"))return q.baseUrl||(G=s.split("/"),ba=G.pop(),ca=G.length?G.join("/")+"/":"./",q.baseUrl=ca,s=ba),s=s.replace(aa,""),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var i, -f;"string"!==typeof b&&(d=c,c=b,b=null);I(c)||(d=c,c=[]);!c.length&&H(d)&&d.length&&(d.toString().replace(ia,"").replace(ja,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c));if(O){if(!(i=K))P&&"interactive"===P.readyState||M(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),i=P;i&&(b||(b=i.getAttribute("data-requiremodule")),f=B[i.getAttribute("data-requirecontext")])}(f?f.defQueue:R).push([b,c,d])};define.amd= -{jQuery:!0};l.exec=function(b){return eval(b)};l(q)}})(this); diff --git a/www/lib/vis/examples/timeline/other/rtl.html b/www/lib/vis/examples/timeline/other/rtl.html deleted file mode 100644 index f53b1802..00000000 --- a/www/lib/vis/examples/timeline/other/rtl.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | RTL example</title> - - <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>Timeline RTL support</h1> - -<h2>Using <code>dir = "rtl"</code> in any parent node</h2> -<div id="timeline1" dir="rtl"></div> - -<h2>Using <code>options.rtl = true</code></h2> -<div id="timeline2"></div> - -<script> - - var items = new vis.DataSet(); - // add items to the DataSet - items.add([ - {id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'}, - {id: 2, content: '2014-01-18', start: '2014-01-18'}, - {id: 3, content: '2014-01-21', start: '2014-01-21'}, - {id: 4, content: '2014-01-19 - 2014-01-24', start: '2014-01-19', end: '2014-01-24'}, - {id: 5, content: '2014-01-28', start: '2014-01-28', type:'point'}, - {id: 6, content: '2014-01-26', start: '2014-01-26'} - ]); - - var container1 = document.getElementById('timeline1'); - var container2 = document.getElementById('timeline2'); - - var options = { - start: '2014-01-10', - end: '2014-02-10', - height: '300px', - }; - - var options1 = Object.assign({}, options) - var timeline1 = new vis.Timeline(container1, items, options1); - - var options2 = Object.assign({rtl: true}, options) - var timeline2 = new vis.Timeline(container2, items, options2); - -</script> -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/timezone.html b/www/lib/vis/examples/timeline/other/timezone.html deleted file mode 100644 index 8994ba98..00000000 --- a/www/lib/vis/examples/timeline/other/timezone.html +++ /dev/null @@ -1,80 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <title>Timeline | Time zone</title> - - <style type="text/css"> - body, html { - font-family: sans-serif; - max-width: 800px; - } - </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>Time zone</h1> - -<p> - The following demo shows how to display items in local time (default), in UTC, or for a specific time zone offset. By configuring your own <code>moment</code> constructor, you can display items in the time zone that you want. All timelines have the same start and end date. -</p> - -<h2>Local time</h2> -<div id="local"></div> - -<h2>UTC</h2> -<div id="utc"></div> - -<h2>UTC +08:00</h2> -<div id="plus8"></div> - - -<script type="text/javascript"> - // Create a DataSet (allows two way data-binding) - var today = vis.moment(vis.moment.utc().format('YYYY-MM-DDT00:00:00.000Z')); - var start = today.clone(); - var end = today.clone().add(2, 'day'); - var customTime = today.clone().add(28, 'hour'); - - var items = new vis.DataSet([ - {id: 1, content: 'item 1', start: today.clone().add(8, 'hour')}, - {id: 2, content: 'item 2', start: today.clone().add(16, 'hour')}, - {id: 3, content: 'item 3', start: today.clone().add(32, 'hour')} - ]); - - // Create a timeline displaying in local time (default) - var timelineLocal = new vis.Timeline(document.getElementById('local'), items, { - editable: true, - start: start, - end: end - }); - timelineLocal.addCustomTime(customTime); - - // Create a timeline displaying in UTC - var timelineUTC = new vis.Timeline(document.getElementById('utc'), items, { - editable: true, - start: start, - end: end, - moment: function (date) { - return vis.moment(date).utc(); - } - }); - timelineUTC.addCustomTime(customTime); - - // Create a timeline displaying in UTC +08:00 - var timelinePlus8 = new vis.Timeline(document.getElementById('plus8'), items, { - editable: true, - start: start, - end: end, - moment: function (date) { - return vis.moment(date).utcOffset('+08:00'); - } - }); - timelinePlus8.addCustomTime(customTime); -</script> - -</body> -</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/usingReact.html b/www/lib/vis/examples/timeline/other/usingReact.html deleted file mode 100644 index f6d1e1f7..00000000 --- a/www/lib/vis/examples/timeline/other/usingReact.html +++ /dev/null @@ -1,123 +0,0 @@ -<!DOCTYPE HTML> -<html> - <head> - <meta charset="utf-8"> - <title>React Components in templates</title> - </head> - <body> - - <div id='root'></div> - - <!-- - For ease of use, we are including the React, ReactDOM and Babel CDN - builds to make getting started as fast as possible. - - In production, you'll want to instead look at using something - like Gulp, Grunt or WebPack (my personal recommendation) - to compile JSX into JavaScript. Also, check out: - http://facebook.github.io/react/docs/tooling-integration.html - --> - <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> - - <!-- - This is where you link to your React code. Can be .js or .jsx - extension, doesn't really matter. - --> - <script type="text/babel"> - var timeline; - - // create groups - var numberOfGroups = 25; - var groups = new vis.DataSet() - for (var i = 0; i < numberOfGroups; i++) { - groups.add({ - id: i, - content: 'Truck ' + i - }) - } - - // create items - var numberOfItems = 1000; - var items = new vis.DataSet(); - var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); - for (var truck = 0; truck < numberOfGroups; truck++) { - var date = new Date(); - for (var order = 0; order < itemsPerGroup; order++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); - var end = new Date(date); - items.add({ - id: order + itemsPerGroup * truck, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - } - } - - var GroupTemplate = React.createClass({ - render: function() { - var { group } = this.props; - return <div> - <label>{group.content}</label> - </div> - } - }) - - var ItemTemplate = React.createClass({ - render: function() { - var { item } = this.props; - return <div> - <label>{item.content}</label> - </div> - } - }) - - // specify options - var options = { - orientation: 'top', - maxHeight: 400, - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - template: function (item, element) { - ReactDOM.unmountComponentAtNode(element); - return ReactDOM.render(<ItemTemplate item={item} />, element); - }, - groupTemplate: function (group, element) { - ReactDOM.unmountComponentAtNode(element); - return ReactDOM.render(<GroupTemplate group={group} />, element); - } - } - - - var VisTimeline = React.createClass({ - componentDidMount: function() { - return initTimeline(); - }, - render: function() { - return <div> - <h1>Vis timline with React</h1> - <h2>Using react components for items and group templates</h2> - - <div id="mytimeline"></div> - </div> - } - }); - - function initTimeline() { - var container = document.getElementById('mytimeline'); - timeline = new vis.Timeline(container, items, groups, options); - } - - ReactDOM.render(<VisTimeline />, document.getElementById('root')); - </script> - </body> -</html> diff --git a/www/lib/vis/examples/timeline/other/verticalScroll.html b/www/lib/vis/examples/timeline/other/verticalScroll.html deleted file mode 100644 index ddf946f0..00000000 --- a/www/lib/vis/examples/timeline/other/verticalScroll.html +++ /dev/null @@ -1,93 +0,0 @@ -<html> -<head> - <title>Timeline | Vertical Scroll Option</title> - - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> - - <script src="../../googleAnalytics.js"></script> -</head> - -<body> - -<h1>Timeline vertical scroll option</h1> - -<h2>With <code> -verticalScroll: true, -zoomKey: 'ctrlKey'</code> -</h2> - -<div id="mytimeline1"></div> - -<h2>With <code> -horizontalScroll: true, -verticalScroll: true, -zoomKey: 'ctrlKey'</code> -</h2> -<div id="mytimeline2"></div> -<script> - - // create groups - var numberOfGroups = 25; - var groups = new vis.DataSet() - for (var i = 0; i < numberOfGroups; i++) { - groups.add({ - id: i, - content: 'Truck ' + i - }) - } - - // create items - var numberOfItems = 1000; - var items = new vis.DataSet(); - - var itemsPerGroup = Math.round(numberOfItems/numberOfGroups); - - for (var truck = 0; truck < numberOfGroups; truck++) { - var date = new Date(); - for (var order = 0; order < itemsPerGroup; order++) { - date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); - var start = new Date(date); - - date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); - var end = new Date(date); - - items.add({ - id: order + itemsPerGroup * truck, - group: truck, - start: start, - end: end, - content: 'Order ' + order - }); - } - } - - // specify options - var options = { - stack: true, - verticalScroll: true, - zoomKey: 'ctrlKey', - maxHeight: 200, - start: new Date(), - end: new Date(1000*60*60*24 + (new Date()).valueOf()), - editable: true, - margin: { - item: 10, // minimal margin between items - axis: 5 // minimal margin between items and the axis - }, - orientation: 'top' - }; - - // create a Timeline - options1 = Object.assign({}, options) - var container1 = document.getElementById('mytimeline1'); - timeline1 = new vis.Timeline(container1, items, groups, options1); - - options2 = Object.assign({horizontalScroll: true}, options) - var container2 = document.getElementById('mytimeline2'); - timeline2 = new vis.Timeline(container2, items, groups, options2); - -</script> - -</body> -</html> |