diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/other')
15 files changed, 592 insertions, 52 deletions
diff --git a/www/lib/vis/examples/timeline/other/customTimeBars.html b/www/lib/vis/examples/timeline/other/customTimeBars.html index 37310165..2c1a5f7c 100644 --- a/www/lib/vis/examples/timeline/other/customTimeBars.html +++ b/www/lib/vis/examples/timeline/other/customTimeBars.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/dataAttributes.html b/www/lib/vis/examples/timeline/other/dataAttributes.html index f852fffb..0aa1f14e 100644 --- a/www/lib/vis/examples/timeline/other/dataAttributes.html +++ b/www/lib/vis/examples/timeline/other/dataAttributes.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/dataAttributesAll.html b/www/lib/vis/examples/timeline/other/dataAttributesAll.html index 7938f0bd..5b926b54 100644 --- a/www/lib/vis/examples/timeline/other/dataAttributesAll.html +++ b/www/lib/vis/examples/timeline/other/dataAttributesAll.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/drag&drop.html b/www/lib/vis/examples/timeline/other/drag&drop.html new file mode 100644 index 00000000..81bcb1f1 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/drag&drop.html @@ -0,0 +1,131 @@ +<!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 new file mode 100644 index 00000000..9de9023b --- /dev/null +++ b/www/lib/vis/examples/timeline/other/functionLabelFormats.html @@ -0,0 +1,141 @@ +<!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 index 663f9968..1b16af30 100644 --- a/www/lib/vis/examples/timeline/other/groupsPerformance.html +++ b/www/lib/vis/examples/timeline/other/groupsPerformance.html @@ -3,7 +3,7 @@ <title>Timeline | A lot of grouped data</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { diff --git a/www/lib/vis/examples/timeline/other/hidingPeriods.html b/www/lib/vis/examples/timeline/other/hidingPeriods.html index 9b2f359a..52ec6f9a 100644 --- a/www/lib/vis/examples/timeline/other/hidingPeriods.html +++ b/www/lib/vis/examples/timeline/other/hidingPeriods.html @@ -10,7 +10,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/horizontalScroll.html b/www/lib/vis/examples/timeline/other/horizontalScroll.html new file mode 100644 index 00000000..a999cd51 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/horizontalScroll.html @@ -0,0 +1,77 @@ +<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 index 39080c89..5b58923b 100644 --- a/www/lib/vis/examples/timeline/other/localization.html +++ b/www/lib/vis/examples/timeline/other/localization.html @@ -12,7 +12,7 @@ <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.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> @@ -24,7 +24,9 @@ <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> @@ -63,4 +65,4 @@ select.onchange(); </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/timeline/other/performance.html b/www/lib/vis/examples/timeline/other/performance.html index 4f914354..45b22aab 100644 --- a/www/lib/vis/examples/timeline/other/performance.html +++ b/www/lib/vis/examples/timeline/other/performance.html @@ -14,7 +14,7 @@ <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.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html index d4531591..363845fe 100644 --- a/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html +++ b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html @@ -5,7 +5,7 @@ <script data-main="scripts/main" src="scripts/require.js"></script> - <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/rtl.html b/www/lib/vis/examples/timeline/other/rtl.html index 63fc79ad..f53b1802 100644 --- a/www/lib/vis/examples/timeline/other/rtl.html +++ b/www/lib/vis/examples/timeline/other/rtl.html @@ -3,32 +3,23 @@ <head> <title>Timeline | RTL example</title> - <style> - body, html { - font-family: arial, sans-serif; - font-size: 11pt; - } - </style> - <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> -<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p> +<h1>Timeline RTL support</h1> + +<h2>Using <code>dir = "rtl"</code> in any parent node</h2> +<div id="timeline1" dir="rtl"></div> -<div id="visualization"></div> +<h2>Using <code>options.rtl = true</code></h2> +<div id="timeline2"></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' } - }); + var items = new vis.DataSet(); // add items to the DataSet items.add([ {id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'}, @@ -39,38 +30,20 @@ {id: 6, content: '2014-01-26', start: '2014-01-26'} ]); - // log changes to the console - items.on('*', function (event, properties) { - console.log(event, properties.items); - }); + var container1 = document.getElementById('timeline1'); + var container2 = document.getElementById('timeline2'); - var container = document.getElementById('visualization'); var options = { start: '2014-01-10', end: '2014-02-10', height: '300px', - rtl: true, - // allow selecting multiple items using ctrl+click, shift+click, or hold. - multiselect: true, - - // allow manipulation of items - editable: true, - - /* alternatively, enable/disable individual actions: - - editable: { - add: true, - updateTime: true, - updateGroup: true, - remove: true - }, - - */ - - showCurrentTime: true }; - var timeline = new vis.Timeline(container, items, options); + 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> diff --git a/www/lib/vis/examples/timeline/other/timezone.html b/www/lib/vis/examples/timeline/other/timezone.html index fd7a22c0..8994ba98 100644 --- a/www/lib/vis/examples/timeline/other/timezone.html +++ b/www/lib/vis/examples/timeline/other/timezone.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/other/usingReact.html b/www/lib/vis/examples/timeline/other/usingReact.html new file mode 100644 index 00000000..f6d1e1f7 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/usingReact.html @@ -0,0 +1,123 @@ +<!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 new file mode 100644 index 00000000..ddf946f0 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/verticalScroll.html @@ -0,0 +1,93 @@ +<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> |