diff options
| 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 | |
| parent | 676270d21beed31d767a06c89522198c77d5d865 (diff) | |
mega changes, including updates and X
Diffstat (limited to 'www/lib/vis/examples/timeline')
62 files changed, 4363 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/basicUsage.html b/www/lib/vis/examples/timeline/basicUsage.html new file mode 100644 index 00000000..8ad5fda1 --- /dev/null +++ b/www/lib/vis/examples/timeline/basicUsage.html @@ -0,0 +1,45 @@ +<!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> + A basic timeline. You can move and zoom the timeline, and select items. +</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'}, + {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'} + ]); + + // Configuration for the Timeline + var options = {}; + + // 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/dataHandling/dataSerialization.html b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html new file mode 100644 index 00000000..79b6aebf --- /dev/null +++ b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html @@ -0,0 +1,122 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Data serialization</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + textarea { + width: 800px; + height: 200px; + } + + .buttons { + margin: 20px 0; + } + + .buttons input { + padding: 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> + +<h1>Serialization and deserialization</h1> + +<p>This example shows how to serialize and deserialize JSON data, and load this in the Timeline via a DataSet. Serialization and deserialization is needed when loading or saving data from a server.</p> + +<textarea id="data"> +[ + {"id": 1, "content": "item 1", "start": "2014-01-01 01:00:00"}, + {"id": 2, "content": "item 2", "start": "2014-01-01 02:00:00"}, + {"id": 3, "content": "item 3", "start": "2014-01-01 03:00:00"}, + {"id": 4, "content": "item 4", "start": "2014-01-01 04:00:00", "end": "2014-01-01 04:30:00"}, + {"id": 5, "content": "item 5", "start": "2014-01-01 05:00:00", "type": "point"}, + {"id": 6, "content": "item 6", "start": "2014-01-01 06:00:00"} +] +</textarea> + +<div class="buttons"> + <input type="button" id="load" value="↓ Load" title="Load data from textarea into the Timeline"> + <input type="button" id="save" value="↑ Save" title="Save data from the Timeline into the textarea"> +</div> + +<div id="visualization"></div> + +<script> + var txtData = document.getElementById('data'); + var btnLoad = document.getElementById('load'); + var btnSave = document.getElementById('save'); + + // Create an empty DataSet. + // This DataSet is used for two way data binding with the Timeline. + var items = new vis.DataSet(); + + // create a timeline + var container = document.getElementById('visualization'); + var options = { + editable: true + }; + var timeline = new vis.Timeline(container, items, options); + + function loadData () { + // get and deserialize the data + var data = JSON.parse(txtData.value); + + // update the data in the DataSet + // + // Note: when retrieving updated data from a server instead of a complete + // new set of data, one can simply update the existing data like: + // + // items.update(data); + // + // Existing items will then be updated, and new items will be added. + items.clear(); + items.add(data); + + // adjust the timeline window such that we see the loaded data + timeline.fit(); + } + btnLoad.onclick = loadData; + + function saveData() { + // get the data from the DataSet + // + // Note that we specify the output type of the fields start and end + // as "ISODate", which is safely serializable. Other serializable types + // are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!). + // + // Alternatively, it is possible to configure the DataSet to convert + // the output automatically to ISODates like: + // + // var options = { + // type: {start: 'ISODate', end: 'ISODate'} + // }; + // var items = new vis.DataSet(options); + // // now items.get() will automatically convert start and end to ISO dates. + // + var data = items.get({ + type: { + start: 'ISODate', + end: 'ISODate' + } + }); + + // serialize the data and put it in the textarea + txtData.value = JSON.stringify(data, null, 2); + } + btnSave.onclick = saveData; + + // load the initial data + loadData(); +</script> +</body> +</html> diff --git a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html new file mode 100644 index 00000000..f594d2aa --- /dev/null +++ b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | External data</title> + + <style type="text/css"> + body, html { + font-family: sans-serif; + } + </style> + + <!-- Load jquery for ajax support --> + <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.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 demo shows how to load external data via an ajax call. +</p> +<div id="visualization"></div> +<div id="loading">loading...</div> + +<script type="text/javascript"> + // load data via an ajax request. When the data is in, load the timeline + $.ajax({ + url: '../resources/data/basic.json', + success: function (data) { + // hide the "loading..." message + document.getElementById('loading').style.display = 'none'; + + // 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(data); + + // Configuration for the Timeline + var options = {}; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + }, + error: function (err) { + console.log('Error', err); + if (err.status === 0) { + alert('Failed to load data/basic.json.\nPlease run this example on a server.'); + } + else { + alert('Failed to load data/basic.json.'); + } + } + }); +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html b/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html new file mode 100644 index 00000000..b1c8ef75 --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html @@ -0,0 +1,55 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Custom snapping</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> +<p> + When moving the items in on the Timeline below, they will snap to full hours, + independent of being zoomed in or out. +</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: 'A', start: '2015-02-09T04:00:00'}, + {id: 2, content: 'B', start: '2015-02-09T14:00:00'}, + {id: 3, content: 'C', start: '2015-02-09T16:00:00'}, + {id: 4, content: 'D', start: '2015-02-09T17:00:00'}, + {id: 5, content: 'E', start: '2015-02-10T03:00:00'} + ]); + + // Configuration for the Timeline + var options = { + editable: true, + + // always snap to full hours, independent of the scale + snap: function (date, scale, step) { + var hour = 60 * 60 * 1000; + return Math.round(date / hour) * hour; + } + + // to configure no snapping at all: + // + // snap: null + // + // or let the snap function return the date unchanged: + // + // snap: function (date, scale, step) { + // return date; + // } + }; + + // 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/editing/editingItems.html b/www/lib/vis/examples/timeline/editing/editingItems.html new file mode 100644 index 00000000..186a363c --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/editingItems.html @@ -0,0 +1,77 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Manipulation example</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>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</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'} + ]); + + // log changes to the console + items.on('*', function (event, properties) { + console.log(event, properties.items); + }); + + var container = document.getElementById('visualization'); + var options = { + start: '2014-01-10', + end: '2014-02-10', + height: '300px', + + // 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); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html b/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html new file mode 100644 index 00000000..7c15d878 --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html @@ -0,0 +1,141 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Manipulation callbacks</title> + + <style type="text/css"> + body, html { + font-family: sans-serif; + font-size: 11pt; + } + </style> + + <script src="http://t4t5.github.io/sweetalert/dist/sweetalert.min.js"></script> + <link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/> + + <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 style="max-width: 800px;"> + This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions. +</p> + +<div id="visualization"></div> +<p></p> +<div id="log"></div> + +<script type="text/javascript"> + // note that months are zero-based in the JavaScript Date object, so month 3 is April + var items = new vis.DataSet([ + {id: 1, content: 'item 1', start: new Date(2013, 3, 20)}, + {id: 2, content: 'item 2', start: new Date(2013, 3, 14)}, + {id: 3, content: 'item 3', start: new Date(2013, 3, 18)}, + {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)}, + {id: 5, content: 'item 5', start: new Date(2013, 3, 25)}, + {id: 6, content: 'item 6', start: new Date(2013, 3, 27)} + ]); + + var min = new Date(2013, 3, 1); // 1 april + var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april + + var container = document.getElementById('visualization'); + var options = { + editable: true, + + onAdd: function (item, callback) { + prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) { + if (value) { + item.content = value; + callback(item); // send back adjusted new item + } + else { + callback(null); // cancel item creation + } + }); + }, + + onMove: function (item, callback) { + var title = 'Do you really want to move the item to\n' + + 'start: ' + item.start + '\n' + + 'end: ' + item.end + '?'; + + prettyConfirm('Move item', title, function (ok) { + if (ok) { + callback(item); // send back item as confirmation (can be changed) + } + else { + callback(null); // cancel editing item + } + }); + }, + + onMoving: function (item, callback) { + if (item.start < min) item.start = min; + if (item.start > max) item.start = max; + if (item.end > max) item.end = max; + + callback(item); // send back the (possibly) changed item + }, + + onUpdate: function (item, callback) { + prettyPrompt('Update item', 'Edit items text:', item.content, function (value) { + if (value) { + item.content = value; + callback(item); // send back adjusted item + } + else { + callback(null); // cancel updating the item + } + }); + }, + + onRemove: function (item, callback) { + prettyConfirm('Remove item', 'Do you really want to remove item ' + item.content + '?', function (ok) { + if (ok) { + callback(item); // confirm deletion + } + else { + callback(null); // cancel deletion + } + }); + } + }; + var timeline = new vis.Timeline(container, items, options); + + 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 prettyConfirm(title, text, callback) { + swal({ + title: title, + text: text, + type: 'warning', + showCancelButton: true, + confirmButtonColor: "#DD6B55" + }, callback); + } + + function prettyPrompt(title, text, inputValue, callback) { + swal({ + title: title, + text: text, + type: 'input', + showCancelButton: true, + inputValue: inputValue + }, callback); + } + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/editing/individualEditableItems.html b/www/lib/vis/examples/timeline/editing/individualEditableItems.html new file mode 100644 index 00000000..d6210305 --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/individualEditableItems.html @@ -0,0 +1,58 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Individual editable items</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + div.vis-editable, + div.vis-editable.vis-selected { + /* custom styling for editable items... */ + } + + div.vis-readonly, + div.vis-readonly.vis-selected { + /* custom styling for readonly items... */ + background-color: #ff4500; + border-color: red; + color: white; + } + </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>Specify individual items to be editable or readonly.</p> + +<div id="visualization"></div> + +<script> + // create a DataSet with items + var items = new vis.DataSet([ + {id: 1, content: 'Editable', editable: true, start: '2010-08-23'}, + {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'}, + {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'}, + {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'}, + {id: 5, content: 'Editable', editable: true, start: '2010-08-28'}, + {id: 6, content: 'Read-only', editable: false, start: '2010-08-29'}, + {id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'}, + {id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'} + ]); + + var container = document.getElementById('visualization'); + var options = { + editable: true // default for all items + }; + + 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/editing/tooltipOnItemChange.html b/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html new file mode 100644 index 00000000..18380beb --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html @@ -0,0 +1,130 @@ +<html> +<head> + <title>Timeline | Tooltip on item onUpdateTime Option</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + .vis-item .vis-onUpdateTime-tooltip { + border-radius: 4px; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + +<h1>Timeline Tooltip on item onUpdateTime Option</h1> + +<h2>With <code>tooltipOnItemUpdateTime: true</code> +</h2> + +<div id="mytimeline1"></div> + +<h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code> +</h2> + +<div id="mytimeline2"></div> + + +<h2>With groups</h2> + +<div id="mytimeline3"></div> +<script> + + // create items + var numberOfItems = 10; + var items = new vis.DataSet(); + var types = [ 'box', 'point', 'range'] + + + for (var order = 0; order < numberOfItems; order++) { + var date = vis.moment(); + + + date.add(Math.round(Math.random() * 2), 'hour'); + items.add({ + id: order, + type: types[Math.floor(3 * Math.random())], + content: 'Item ' + order, + start: date.clone().add(order + 1, 'hour'), + end: date.clone().add(order + 3, 'hour') + }); + } + + // specify options + var options = { + multiselect: true, + maxHeight: 400, + start: new Date((new Date()).valueOf() - 10000000), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true + }; + + var options1 = Object.assign({ + tooltipOnItemUpdateTime: true + }, options) + var container1 = document.getElementById('mytimeline1'); + timeline1 = new vis.Timeline(container1, items, null, options1); + + var options2 = Object.assign({ + orientation: 'top', + tooltipOnItemUpdateTime: { + template: function(item) { + return 'html template for tooltip with <b>item.start</b>: ' + item.start; + } + } + }, options) + var container2 = document.getElementById('mytimeline2'); + timeline2 = new vis.Timeline(container2, items, null, options2); + + + // 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 for groups + var numberOfItems = 1000; + var itemsWithGroups = 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); + + itemsWithGroups.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + + var options3 = Object.assign({ + orientation: 'top', + tooltipOnItemUpdateTime: true + }, options) + var container3 = document.getElementById('mytimeline3'); + timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3); + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html new file mode 100644 index 00000000..985551ee --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html @@ -0,0 +1,90 @@ +<html> +<head> + <title>Timeline | Update data on event</title> + + <style type="text/css"> + body { + font: 11pt verdana; + } + + .vis.timeline .item.past { + filter: alpha(opacity=50); + opacity: 0.5; + } + </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 style="width: 600px;"> + When the custom time bar is shown, the user can drag this bar to a specific + time. The Timeline sends an event that the custom time is changed, after + which the contents of the timeline can be changed according to the specified + time in past or future. +</p> + +<div id="customTime"> </div> +<p></p> + +<div id="mytimeline"></div> + + +<script> + // create a data set + var data = new vis.DataSet([ + { + id: 1, + start: new Date((new Date()).getTime() - 60 * 1000), + end: new Date(), + content: 'Dynamic event' + } + ]); + + // specify options + var options = { + showCurrentTime: true + }; + + // create a timeline + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, data, options); + + timeline.addCustomTime(new Date()); + + // add event listener + timeline.on('timechange', function (event) { + document.getElementById("customTime").innerHTML = "Custom Time: " + event.time; + + var item = data.get(1); + if (event.time > item.start) { + item.end = new Date(event.time); + var now = new Date(); + if (event.time < now) { + item.content = "Dynamic event (past)"; + item.className = 'past'; + } + else if (event.time > now) { + item.content = "Dynamic event (future)"; + item.className = 'future'; + } + else { + item.content = "Dynamic event (now)"; + item.className = 'now'; + } + + data.update(item); + } + }); + + // set a custom range from -2 minute to +3 minutes current time + var start = new Date((new Date()).getTime() - 2 * 60 * 1000); + var end = new Date((new Date()).getTime() + 3 * 60 * 1000); + timeline.setWindow(start, end, {animation: false}); + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/groups/groups.html b/www/lib/vis/examples/timeline/groups/groups.html new file mode 100644 index 00000000..56bad599 --- /dev/null +++ b/www/lib/vis/examples/timeline/groups/groups.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Group 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 groups. Note that a DataSet is used for both + items and groups, allowing to dynamically add, update or remove both items + and groups via the DataSet. +</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 = { + groupOrder: 'content' // groupOrder can be a property name or a sorting function + }; + + 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/groups/groupsEditable.html b/www/lib/vis/examples/timeline/groups/groupsEditable.html new file mode 100644 index 00000000..a7d275fa --- /dev/null +++ b/www/lib/vis/examples/timeline/groups/groupsEditable.html @@ -0,0 +1,316 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Editable Groups</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + #visualization { + box-sizing: border-box; + width: 100%; + height: 300px; + } + + .vis-item.openwheel { background-color: #B0E2FF; } + .vis-item.rally { background-color: #EAEAEA; } + .vis-item.motorcycle { background-color: #FA8072; } + .vis-item.touringcar { background-color: #B4EEB4; } + .vis-item.endurance { background-color: #FFFFCC; } + </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 editable groups (for now only reordering). +</p> +<div id="visualization"></div> + +<script> + // http://motocal.com/ + var groups = new vis.DataSet([ + {"content": "Formula E", "id": "Formula E", "value": 1, className:'openwheel'}, + {"content": "WRC", "id": "WRC", "value": 2, className:'rally'}, + {"content": "MotoGP", "id": "MotoGP", "value": 3, className:'motorcycle'}, + {"content": "V8SC", "id": "V8SC", "value": 4, className:'touringcars'}, + {"content": "WTCC", "id": "WTCC", "value": 5, className:'touringcars'}, + {"content": "F1", "id": "F1", "value": 6, className:'openwheel'}, + {"content": "SBK", "id": "SBK", "value": 7, className:'motorcycle'}, + {"content": "IndyCar", "id": "IndyCar", "value": 8, className:'openwheel'}, + {"content": "MotoAmerica", "id": "MotoAmerica", "value": 9, className:'motorcycle'}, + {"content": "SGP", "id": "SGP", "value": 10, className:'rally'}, + {"content": "EWC", "id": "EWC", "value": 11, className:'endurance'}, + {"content": "BSB", "id": "BSB", "value": 12, className:'motorcycle'}, + {"content": "DTM", "id": "DTM", "value": 13, className:'touringcars'}, + {"content": "BTCC", "id": "BTCC", "value": 14, className:'touringcars'}, + {"content": "WorldRX", "id": "WorldRX", "value": 15, className:'rally'}, + {"content": "WSR", "id": "WSR", "value": 16, className:'openwheel'}, + {"content": "Roads", "id": "Roads", "value": 17, className:'motorcycle'}, + {"content": "WEC", "id": "WEC", "value": 18, className:'endurance'}, + {"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'} + ]); + + // create a dataset with items + // note that months are zero-based in the JavaScript Date object, so month 3 is April + var items = new vis.DataSet([ + {start: new Date(2015, 0, 10), end: new Date(2015, 0, 11), group:"Formula E", className:"openwheel", content:"Argentina",id:"531@motocal.net"}, + {start: new Date(2015, 0, 22), end: new Date(2015, 0, 26), group:"WRC", className:"rally", content:"Rallye Monte-Carlo",id:"591@motocal.net"}, + {start: new Date(2015, 1, 4), end: new Date(2015, 1, 8), group:"MotoGP", className:"motorcycle", content:"Sepang MotoGP Test 1",id:"578@motocal.net"}, + {start: new Date(2015, 1, 12), end: new Date(2015, 1, 16), group:"WRC", className:"rally", content:"Rally Sweden",id:"592@motocal.net"}, + {start: new Date(2015, 1, 20), end: new Date(2015, 1, 23), group:"SBK", className:"motorcycle", content:"Australia",id:"616@motocal.net"}, + {start: new Date(2015, 1, 23), end: new Date(2015, 1, 27), group:"MotoGP", className:"motorcycle", content:"Sepang MotoGP Test 2",id:"579@motocal.net"}, + {start: new Date(2015, 1, 26), end: new Date(2015, 2, 2), group:"V8SC", className:"touringcar", content:"Clipsal 500 Adelaide",id:"659@motocal.net"}, + {start: new Date(2015, 2, 5), end: new Date(2015, 2, 9), group:"WRC", className:"rally", content:"Rally Guanajuato Mexico",id:"593@motocal.net"}, + {start: new Date(2015, 2, 6), end: new Date(2015, 2, 9), group:"WTCC", className:"touringcar", content:"Argentina",id:"717@motocal.net"}, + {start: new Date(2015, 2, 12), end: new Date(2015, 2, 16), group:"V8SC", className:"touringcar", content:"Australian Grand Prix",id:"660@motocal.net"}, + {start: new Date(2015, 2, 13), end: new Date(2015, 2, 16), group:"F1", className:"openwheel", content:"Australia",id:"630@motocal.net"}, + {start: new Date(2015, 2, 14), end: new Date(2015, 2, 15), group:"Formula E", className:"openwheel", content:"Miami, USA",id:"534@motocal.net"}, + {start: new Date(2015, 2, 14), end: new Date(2015, 2, 17), group:"MotoGP", className:"motorcycle", content:"Qatar MotoGP Test",id:"577@motocal.net"}, + {start: new Date(2015, 2, 20), end: new Date(2015, 2, 23), group:"SBK", className:"motorcycle", content:"Thailand",id:"617@motocal.net"}, + {start: new Date(2015, 2, 27), end: new Date(2015, 2, 30), group:"F1", className:"openwheel", content:"Malaysia",id:"631@motocal.net"}, + {start: new Date(2015, 2, 27), end: new Date(2015, 2, 30), group:"V8SC", className:"touringcar", content:"Tasmania SuperSprint",id:"661@motocal.net"}, + {start: new Date(2015, 2, 27), end: new Date(2015, 2, 30), group:"IndyCar", className:"openwheel", content:"Grand Prix of St. Petersburg",id:"752@motocal.net"}, + {start: new Date(2015, 3, 4), end: new Date(2015, 3, 7), group:"BSB", className:"motorcycle", content:"Round 1",id:"604@motocal.net"}, + {start: new Date(2015, 3, 4), end: new Date(2015, 3, 6), group:"BTCC", className:"touringcar", content:"Rounds 1, 2 & 3",id:"581@motocal.net"}, + {start: new Date(2015, 3, 4), end: new Date(2015, 3, 5), group:"Formula E", className:"openwheel", content:"Long Beach, USA",id:"535@motocal.net"}, + {start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"IndyCar", className:"openwheel", content:"Indy Grand Prix of Louisiana",id:"753@motocal.net"}, + {start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"MotoAmerica", className:"motorcycle", content:"COTA",id:"705@motocal.net"}, + {start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"SBK", className:"motorcycle", content:"Aragon",id:"618@motocal.net"}, + {start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"MotoGP", className:"motorcycle", content:"Americas",id:"540@motocal.net"}, + {start: new Date(2015, 3, 10), end: new Date(2015, 3, 13), group:"F1", className:"openwheel", content:"China",id:"632@motocal.net"}, + {start: new Date(2015, 3, 12), end: new Date(2015, 3, 13), group:"WEC", className:"endurance", content:"6 Hours of Silverstone",id:"674@motocal.net"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"BSB", className:"motorcycle", content:"Round 2",id:"605@motocal.net"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"F1", className:"openwheel", content:"Bahrain",id:"633@motocal.net"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"IndyCar", className:"openwheel", content:"Grand Prix of Long Beach",id:"754@motocal.net"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"MotoAmerica", className:"motorcycle", content:"Road Atlanta",id:"706@motocal.net"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"SBK", className:"motorcycle", content:"Netherlands",id:"619@motocal.net"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"WTCC", className:"touringcar", content:"Morocco",id:"718@motocal.net"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 20), group:"MotoGP", className:"motorcycle", content:"Argentina",id:"559@motocal.net"}, + {start: new Date(2015, 3, 18), end: new Date(2015, 3, 19), group:"SGP", className:"rally", content:"Warsaw",id:"729@motocal.net"}, + {start: new Date(2015, 3, 18), end: new Date(2015, 3, 20), group:"EWC", className:"endurance", content:"24 Heures Moto Le Mans",id:"701@motocal.net"}, + {start: new Date(2015, 3, 18), end: new Date(2015, 3, 20), group:"BTCC", className:"touringcar", content:"Rounds 4, 5 & 6",id:"582@motocal.net"}, + {start: new Date(2015, 3, 23), end: new Date(2015, 3, 27), group:"WRC", className:"rally", content:"Rally Argentina",id:"595@motocal.net"}, + {start: new Date(2015, 3, 24), end: new Date(2015, 3, 27), group:"WorldRX", className:"rally", content:"Portugal",id:"686@motocal.net"}, + {start: new Date(2015, 3, 24), end: new Date(2015, 3, 27), group:"IndyCar", className:"openwheel", content:"Indy Grand Prix of Alabama",id:"755@motocal.net"}, + {start: new Date(2015, 3, 25), end: new Date(2015, 3, 27), group:"WSR", className:"openwheel", content:"Spain",id:"742@motocal.net"}, + {start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"MotoGP", className:"motorcycle", content:"Spain",id:"542@motocal.net"}, + {start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"WorldRX", className:"rally", content:"Hockenheim",id:"768@motocal.net"}, + {start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"DTM", className:"touringcar", content:"Hockenheim",id:"650@motocal.net"}, + {start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"WTCC", className:"touringcar", content:"Hungary",id:"719@motocal.net"}, + {start: new Date(2015, 4, 1), end: new Date(2015, 4, 4), group:"V8SC", className:"touringcar", content:"Perth SuperSprint",id:"662@motocal.net"}, + {start: new Date(2015, 4, 2), end: new Date(2015, 4, 5), group:"BSB", className:"motorcycle", content:"Round 3",id:"606@motocal.net"}, + {start: new Date(2015, 4, 2), end: new Date(2015, 4, 3), group:"WEC", className:"endurance", content:"6 Hours of Spa-Francorchamps",id:"675@motocal.net"}, + {start: new Date(2015, 4, 7), end: new Date(2015, 4, 10), group:"IndyCar", className:"openwheel", content:"Grand Prix of Indianapolis",id:"756@motocal.net"}, + {start: new Date(2015, 4, 8), end: new Date(2015, 4, 11), group:"F1", className:"openwheel", content:"Spain",id:"634@motocal.net"}, + {start: new Date(2015, 4, 8), end: new Date(2015, 4, 11), group:"SBK", className:"motorcycle", content:"Italy",id:"620@motocal.net"}, + {start: new Date(2015, 4, 9), end: new Date(2015, 4, 10), group:"Formula E", className:"openwheel", content:"Monaco",id:"536@motocal.net"}, + {start: new Date(2015, 4, 9), end: new Date(2015, 4, 11), group:"BTCC", className:"touringcar", content:"Rounds 7, 8 & 9",id:"583@motocal.net"}, + {start: new Date(2015, 4, 10), end: new Date(2015, 4, 17), group:"Roads", className:"motorcycle", content:"North West 200",id:"682@motocal.net"}, + {start: new Date(2015, 4, 15), end: new Date(2015, 4, 17), group:"WTCC", className:"touringcar", content:"Germany",id:"720@motocal.net"}, + {start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"WorldRX", className:"rally", content:"Belgium",id:"687@motocal.net"}, + {start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"V8SC", className:"touringcar", content:"Winton SuperSprint",id:"663@motocal.net"}, + {start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"MotoGP", className:"motorcycle", content:"France",id:"543@motocal.net"}, + {start: new Date(2015, 4, 15), end: new Date(2015, 4, 18), group:"MotoAmerica", className:"motorcycle", content:"VIR",id:"707@motocal.net"}, + {start: new Date(2015, 4, 16), end: new Date(2015, 4, 17), group:"SGP", className:"rally", content:"Tampere",id:"730@motocal.net"}, + {start: new Date(2015, 4, 21), end: new Date(2015, 4, 25), group:"WRC", className:"rally", content:"Rally de Portugal",id:"594@motocal.net"}, + {start: new Date(2015, 4, 21), end: new Date(2015, 4, 25), group:"F1", className:"openwheel", content:"Monaco",id:"635@motocal.net"}, + {start: new Date(2015, 4, 22), end: new Date(2015, 4, 25), group:"WorldRX", className:"rally", content:"Great Britain",id:"688@motocal.net"}, + {start: new Date(2015, 4, 22), end: new Date(2015, 4, 25), group:"SBK", className:"motorcycle", content:"UK",id:"621@motocal.net"}, + {start: new Date(2015, 4, 22), end: new Date(2015, 4, 25), group:"IndyCar", className:"openwheel", content:"Indianapolis 500",id:"757@motocal.net"}, + {start: new Date(2015, 4, 23), end: new Date(2015, 4, 24), group:"SGP", className:"rally", content:"Prague",id:"731@motocal.net"}, + {start: new Date(2015, 4, 23), end: new Date(2015, 4, 24), group:"Formula E", className:"openwheel", content:"Germany",id:"537@motocal.net"}, + {start: new Date(2015, 4, 24), end: new Date(2015, 4, 25), group:"WSR", className:"openwheel", content:"Monaco",id:"743@motocal.net"}, + {start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"MotoAmerica", className:"motorcycle", content:"Road America",id:"708@motocal.net"}, + {start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"IndyCar", className:"openwheel", content:"Dual in Detroit",id:"758@motocal.net"}, + {start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"MotoGP", className:"motorcycle", content:"Italy",id:"562@motocal.net"}, + {start: new Date(2015, 4, 29), end: new Date(2015, 5, 1), group:"DTM", className:"touringcar", content:"Lausitzring",id:"651@motocal.net"}, + {start: new Date(2015, 4, 30), end: new Date(2015, 5, 13), group:"Roads", className:"motorcycle", content:"Isle of Man TT",id:"683@motocal.net"}, + {start: new Date(2015, 4, 30), end: new Date(2015, 5, 1), group:"WSR", className:"openwheel", content:"Belgium",id:"745@motocal.net"}, + {start: new Date(2015, 5, 4), end: new Date(2015, 5, 7), group:"IndyCar", className:"openwheel", content:"Firestone 600",id:"759@motocal.net"}, + {start: new Date(2015, 5, 5), end: new Date(2015, 5, 8), group:"SBK", className:"motorcycle", content:"Portugal",id:"622@motocal.net"}, + {start: new Date(2015, 5, 5), end: new Date(2015, 5, 8), group:"F1", className:"openwheel", content:"Canada",id:"636@motocal.net"}, + {start: new Date(2015, 5, 5), end: new Date(2015, 5, 8), group:"WTCC", className:"touringcar", content:"Russia",id:"721@motocal.net"}, + {start: new Date(2015, 5, 6), end: new Date(2015, 5, 7), group:"Formula E", className:"openwheel", content:"Russia",id:"716@motocal.net"}, + {start: new Date(2015, 5, 6), end: new Date(2015, 5, 8), group:"BTCC", className:"touringcar", content:"Rounds 10, 11 & 12",id:"584@motocal.net"}, + {start: new Date(2015, 5, 11), end: new Date(2015, 5, 15), group:"WRC", className:"rally", content:"Rally d'Italia Sardegna",id:"596@motocal.net"}, + {start: new Date(2015, 5, 12), end: new Date(2015, 5, 15), group:"MotoGP", className:"motorcycle", content:"Catalunya",id:"545@motocal.net"}, + {start: new Date(2015, 5, 12), end: new Date(2015, 5, 15), group:"IndyCar", className:"openwheel", content:"Indy Toronto",id:"760@motocal.net"}, + {start: new Date(2015, 5, 12), end: new Date(2015, 5, 15), group:"MotoAmerica", className:"motorcycle", content:"Barber",id:"709@motocal.net"}, + {start: new Date(2015, 5, 13), end: new Date(2015, 5, 15), group:"WSR", className:"openwheel", content:"Hungary",id:"746@motocal.net"}, + {start: new Date(2015, 5, 13), end: new Date(2015, 5, 15), group:"WEC", className:"endurance", content:"24 Heures du Mans",id:"676@motocal.net"}, + {start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"V8SC", className:"touringcar", content:"Skycity Triple Crown",id:"664@motocal.net"}, + {start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"WTCC", className:"touringcar", content:"Slovakia",id:"722@motocal.net"}, + {start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"SBK", className:"motorcycle", content:"Riviera di Rimini",id:"623@motocal.net"}, + {start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"BSB", className:"motorcycle", content:"Round 4",id:"607@motocal.net"}, + {start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"F1", className:"openwheel", content:"Austria",id:"637@motocal.net"}, + {start: new Date(2015, 5, 19), end: new Date(2015, 5, 22), group:"WorldRX", className:"rally", content:"Germany",id:"689@motocal.net"}, + {start: new Date(2015, 5, 25), end: new Date(2015, 5, 28), group:"MotoGP", className:"motorcycle", content:"Netherlands",id:"546@motocal.net"}, + {start: new Date(2015, 5, 25), end: new Date(2015, 5, 28), group:"IndyCar", className:"openwheel", content:"MAVTV 500",id:"761@motocal.net"}, + {start: new Date(2015, 5, 26), end: new Date(2015, 5, 29), group:"WTCC", className:"touringcar", content:"France",id:"723@motocal.net"}, + {start: new Date(2015, 5, 26), end: new Date(2015, 5, 29), group:"DTM", className:"touringcar", content:"Norisring",id:"652@motocal.net"}, + {start: new Date(2015, 5, 26), end: new Date(2015, 5, 29), group:"MotoAmerica", className:"motorcycle", content:"Miller",id:"710@motocal.net"}, + {start: new Date(2015, 5, 27), end: new Date(2015, 5, 29), group:"BTCC", className:"touringcar", content:"Rounds 13, 14 & 15",id:"585@motocal.net"}, + {start: new Date(2015, 5, 27), end: new Date(2015, 5, 29), group:"Formula E", className:"openwheel", content:"United Kingdom",id:"538@motocal.net"}, + {start: new Date(2015, 6, 2), end: new Date(2015, 6, 6), group:"WRC", className:"rally", content:"Rally Poland",id:"597@motocal.net"}, + {start: new Date(2015, 6, 3), end: new Date(2015, 6, 6), group:"F1", className:"openwheel", content:"Britain",id:"638@motocal.net"}, + {start: new Date(2015, 6, 3), end: new Date(2015, 6, 6), group:"WorldRX", className:"rally", content:"Sweden",id:"690@motocal.net"}, + {start: new Date(2015, 6, 3), end: new Date(2015, 6, 6), group:"BSB", className:"motorcycle", content:"Round 5",id:"608@motocal.net"}, + {start: new Date(2015, 6, 4), end: new Date(2015, 6, 5), group:"SGP", className:"rally", content:"Cardiff",id:"732@motocal.net"}, + {start: new Date(2015, 6, 6), end: new Date(2015, 6, 10), group:"Roads", className:"motorcycle", content:"Southern 100",id:"714@motocal.net"}, + {start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"MotoGP", className:"motorcycle", content:"Germany",id:"565@motocal.net"}, + {start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"DTM", className:"touringcar", content:"Zandvoort",id:"653@motocal.net"}, + {start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"IndyCar", className:"openwheel", content:"Wisconsin 250",id:"763@motocal.net"}, + {start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"V8SC", className:"touringcar", content:"Townsville 400",id:"665@motocal.net"}, + {start: new Date(2015, 6, 10), end: new Date(2015, 6, 13), group:"WTCC", className:"touringcar", content:"Portugal",id:"724@motocal.net"}, + {start: new Date(2015, 6, 11), end: new Date(2015, 6, 13), group:"WSR", className:"openwheel", content:"Austria",id:"747@motocal.net"}, + {start: new Date(2015, 6, 16), end: new Date(2015, 6, 19), group:"IndyCar", className:"openwheel", content:"Iowa Corn Indy 300",id:"764@motocal.net"}, + {start: new Date(2015, 6, 17), end: new Date(2015, 6, 20), group:"SBK", className:"motorcycle", content:"USA",id:"625@motocal.net"}, + {start: new Date(2015, 6, 17), end: new Date(2015, 6, 20), group:"BSB", className:"motorcycle", content:"Round 6",id:"609@motocal.net"}, + {start: new Date(2015, 6, 17), end: new Date(2015, 6, 20), group:"MotoAmerica", className:"motorcycle", content:"Mazda Raceway",id:"711@motocal.net"}, + {start: new Date(2015, 6, 18), end: new Date(2015, 6, 19), group:"SGP", className:"rally", content:"Daugavpils",id:"733@motocal.net"}, + {start: new Date(2015, 6, 24), end: new Date(2015, 6, 27), group:"F1", className:"openwheel", content:"Hungary",id:"640@motocal.net"}, + {start: new Date(2015, 6, 25), end: new Date(2015, 6, 26), group:"SGP", className:"rally", content:"MÃ¥lilla",id:"734@motocal.net"}, + {start: new Date(2015, 6, 26), end: new Date(2015, 6, 27), group:"EWC", className:"endurance", content:"Suzuka 8 Hours",id:"702@motocal.net"}, + {start: new Date(2015, 6, 30), end: new Date(2015, 7, 3), group:"WRC", className:"rally", content:"Rally Finland",id:"598@motocal.net"}, + {start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"BSB", className:"motorcycle", content:"Round 7",id:"610@motocal.net"}, + {start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"V8SC", className:"touringcar", content:"Ipswich SuperSprint",id:"666@motocal.net"}, + {start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"DTM", className:"touringcar", content:"Spielberg",id:"654@motocal.net"}, + {start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"IndyCar", className:"openwheel", content:"Honda Indy 200",id:"765@motocal.net"}, + {start: new Date(2015, 6, 31), end: new Date(2015, 7, 3), group:"SBK", className:"motorcycle", content:"Malaysia",id:"626@motocal.net"}, + {start: new Date(2015, 7, 3), end: new Date(2015, 7, 9), group:"Roads", className:"motorcycle", content:"Ulster Grand Prix",id:"684@motocal.net"}, + {start: new Date(2015, 7, 7), end: new Date(2015, 7, 9), group:"WorldRX", className:"rally", content:"Canada",id:"691@motocal.net"}, + {start: new Date(2015, 7, 7), end: new Date(2015, 7, 10), group:"MotoAmerica", className:"motorcycle", content:"INDY",id:"712@motocal.net"}, + {start: new Date(2015, 7, 7), end: new Date(2015, 7, 10), group:"MotoGP", className:"motorcycle", content:"Indianapolis",id:"548@motocal.net"}, + {start: new Date(2015, 7, 8), end: new Date(2015, 7, 10), group:"BTCC", className:"touringcar", content:"Rounds 16, 17 & 18",id:"586@motocal.net"}, + {start: new Date(2015, 7, 8), end: new Date(2015, 7, 9), group:"SGP", className:"rally", content:"Horsens",id:"735@motocal.net"}, + {start: new Date(2015, 7, 10), end: new Date(2015, 7, 12), group:"Formula E", className:"openwheel", content:"Pre-season test 1",id:"769@motocal.net"}, + {start: new Date(2015, 7, 14), end: new Date(2015, 7, 17), group:"MotoGP", className:"motorcycle", content:"Czech Republic",id:"549@motocal.net"}, + {start: new Date(2015, 7, 17), end: new Date(2015, 7, 19), group:"Formula E", className:"openwheel", content:"Pre-season test 2",id:"770@motocal.net"}, + {start: new Date(2015, 7, 20), end: new Date(2015, 7, 24), group:"WRC", className:"rally", content:"Rallye Deutschland",id:"599@motocal.net"}, + {start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"IndyCar", className:"openwheel", content:"Pocono IndyCar 500",id:"766@motocal.net"}, + {start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"BSB", className:"motorcycle", content:"Round 8",id:"611@motocal.net"}, + {start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"WorldRX", className:"rally", content:"Norway",id:"692@motocal.net"}, + {start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"F1", className:"openwheel", content:"Belgium",id:"641@motocal.net"}, + {start: new Date(2015, 7, 21), end: new Date(2015, 7, 24), group:"V8SC", className:"touringcar", content:"Sydney Motorsport Park SuperSprint",id:"667@motocal.net"}, + {start: new Date(2015, 7, 22), end: new Date(2015, 7, 23), group:"EWC", className:"endurance", content:"Oschersleben 8 Hours",id:"703@motocal.net"}, + {start: new Date(2015, 7, 22), end: new Date(2015, 8, 5), group:"Roads", className:"motorcycle", content:"Classic TT & Manx GP",id:"715@motocal.net"}, + {start: new Date(2015, 7, 22), end: new Date(2015, 7, 24), group:"BTCC", className:"touringcar", content:"Rounds 19, 20 & 21",id:"587@motocal.net"}, + {start: new Date(2015, 7, 24), end: new Date(2015, 7, 26), group:"Formula E", className:"openwheel", content:"Pre-season test 3",id:"771@motocal.net"}, + {start: new Date(2015, 7, 28), end: new Date(2015, 7, 31), group:"DTM", className:"touringcar", content:"Moscow Raceway",id:"655@motocal.net"}, + {start: new Date(2015, 7, 28), end: new Date(2015, 7, 31), group:"IndyCar", className:"openwheel", content:"Grand Prix of Sonoma",id:"767@motocal.net"}, + {start: new Date(2015, 7, 28), end: new Date(2015, 7, 31), group:"MotoGP", className:"motorcycle", content:"Great Britain",id:"568@motocal.net"}, + {start: new Date(2015, 7, 29), end: new Date(2015, 7, 30), group:"SGP", className:"rally", content:"Gorzów",id:"737@motocal.net"}, + {start: new Date(2015, 7, 30), end: new Date(2015, 7, 31), group:"WEC", className:"endurance", content:"6 Hours of Nürburgring",id:"677@motocal.net"}, + {start: new Date(2015, 8, 4), end: new Date(2015, 8, 7), group:"BSB", className:"motorcycle", content:"Round 9",id:"612@motocal.net"}, + {start: new Date(2015, 8, 4), end: new Date(2015, 8, 7), group:"WorldRX", className:"rally", content:"France",id:"693@motocal.net"}, + {start: new Date(2015, 8, 4), end: new Date(2015, 8, 7), group:"F1", className:"openwheel", content:"Italy",id:"642@motocal.net"}, + {start: new Date(2015, 8, 5), end: new Date(2015, 8, 7), group:"WSR", className:"openwheel", content:"United Kingdom",id:"748@motocal.net"}, + {start: new Date(2015, 8, 5), end: new Date(2015, 8, 7), group:"BTCC", className:"touringcar", content:"Rounds 22, 23 & 24",id:"588@motocal.net"}, + {start: new Date(2015, 8, 10), end: new Date(2015, 8, 14), group:"WRC", className:"rally", content:"Rally Australia",id:"600@motocal.net"}, + {start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"V8SC", className:"touringcar", content:"Sandown 500",id:"668@motocal.net"}, + {start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"MotoAmerica", className:"motorcycle", content:"New Jersey",id:"713@motocal.net"}, + {start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"MotoGP", className:"motorcycle", content:"San Marino",id:"551@motocal.net"}, + {start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"WTCC", className:"touringcar", content:"Japan",id:"725@motocal.net"}, + {start: new Date(2015, 8, 11), end: new Date(2015, 8, 14), group:"DTM", className:"touringcar", content:"Oschersleben",id:"656@motocal.net"}, + {start: new Date(2015, 8, 12), end: new Date(2015, 8, 14), group:"WSR", className:"openwheel", content:"Germany",id:"749@motocal.net"}, + {start: new Date(2015, 8, 12), end: new Date(2015, 8, 13), group:"SGP", className:"rally", content:"KrÅ¡ko",id:"738@motocal.net"}, + {start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"SBK", className:"motorcycle", content:"Spain",id:"627@motocal.net"}, + {start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"BSB", className:"motorcycle", content:"Round 10",id:"613@motocal.net"}, + {start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"F1", className:"openwheel", content:"Singapore",id:"643@motocal.net"}, + {start: new Date(2015, 8, 18), end: new Date(2015, 8, 21), group:"WorldRX", className:"rally", content:"Barcelona",id:"694@motocal.net"}, + {start: new Date(2015, 8, 19), end: new Date(2015, 8, 20), group:"WEC", className:"endurance", content:"6 Hours of Circuit of the Americas",id:"678@motocal.net"}, + {start: new Date(2015, 8, 19), end: new Date(2015, 8, 21), group:"EWC", className:"endurance", content:"Bol d’Or",id:"704@motocal.net"}, + {start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"MotoGP", className:"motorcycle", content:"Aragon",id:"570@motocal.net"}, + {start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"DTM", className:"touringcar", content:"Nürburgring",id:"657@motocal.net"}, + {start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"WTCC", className:"touringcar", content:"China",id:"726@motocal.net"}, + {start: new Date(2015, 8, 25), end: new Date(2015, 8, 28), group:"F1", className:"openwheel", content:"Japan",id:"644@motocal.net"}, + {start: new Date(2015, 8, 26), end: new Date(2015, 8, 28), group:"BTCC", className:"touringcar", content:"Rounds 25, 26 & 27",id:"589@motocal.net"}, + {start: new Date(2015, 8, 26), end: new Date(2015, 8, 27), group:"SGP", className:"rally", content:"Stockholm",id:"739@motocal.net"}, + {start: new Date(2015, 8, 26), end: new Date(2015, 8, 28), group:"WSR", className:"openwheel", content:"France",id:"750@motocal.net"}, + {start: new Date(2015, 9, 1), end: new Date(2015, 9, 5), group:"WRC", className:"rally", content:"Rallye de France",id:"601@motocal.net"}, + {start: new Date(2015, 9, 2), end: new Date(2015, 9, 5), group:"SBK", className:"motorcycle", content:"France",id:"628@motocal.net"}, + {start: new Date(2015, 9, 2), end: new Date(2015, 9, 5), group:"BSB", className:"motorcycle", content:"Round 11",id:"614@motocal.net"}, + {start: new Date(2015, 9, 2), end: new Date(2015, 9, 5), group:"WorldRX", className:"rally", content:"Turkey",id:"695@motocal.net"}, + {start: new Date(2015, 9, 3), end: new Date(2015, 9, 4), group:"SGP", className:"rally", content:"ToruÅ„",id:"740@motocal.net"}, + {start: new Date(2015, 9, 8), end: new Date(2015, 9, 12), group:"V8SC", className:"touringcar", content:"Bathurst 1000",id:"669@motocal.net"}, + {start: new Date(2015, 9, 9), end: new Date(2015, 9, 12), group:"F1", className:"openwheel", content:"Russia",id:"645@motocal.net"}, + {start: new Date(2015, 9, 9), end: new Date(2015, 9, 12), group:"MotoGP", className:"motorcycle", content:"Japan",id:"553@motocal.net"}, + {start: new Date(2015, 9, 10), end: new Date(2015, 9, 12), group:"BTCC", className:"touringcar", content:"Rounds 28, 29 & 30",id:"590@motocal.net"}, + {start: new Date(2015, 9, 11), end: new Date(2015, 9, 12), group:"WEC", className:"endurance", content:"6 Hours of Fuji",id:"679@motocal.net"}, + {start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"WorldRX", className:"rally", content:"Italy",id:"696@motocal.net"}, + {start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"MotoGP", className:"motorcycle", content:"Australia",id:"572@motocal.net"}, + {start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"DTM", className:"touringcar", content:"Hockenheim",id:"658@motocal.net"}, + {start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"BSB", className:"motorcycle", content:"Round 12",id:"615@motocal.net"}, + {start: new Date(2015, 9, 16), end: new Date(2015, 9, 19), group:"SBK", className:"motorcycle", content:"Qatar",id:"629@motocal.net"}, + {start: new Date(2015, 9, 17), end: new Date(2015, 9, 19), group:"WSR", className:"openwheel", content:"Spain",id:"751@motocal.net"}, + {start: new Date(2015, 9, 22), end: new Date(2015, 9, 26), group:"WRC", className:"rally", content:"Rally de Espana",id:"602@motocal.net"}, + {start: new Date(2015, 9, 23), end: new Date(2015, 9, 26), group:"V8SC", className:"touringcar", content:"Gold Coast 600",id:"670@motocal.net"}, + {start: new Date(2015, 9, 23), end: new Date(2015, 9, 26), group:"MotoGP", className:"motorcycle", content:"Malaysia",id:"573@motocal.net"}, + {start: new Date(2015, 9, 23), end: new Date(2015, 9, 26), group:"F1", className:"openwheel", content:"United States",id:"646@motocal.net"}, + {start: new Date(2015, 9, 24), end: new Date(2015, 9, 25), group:"SGP", className:"rally", content:"Melbourne",id:"741@motocal.net"}, + {start: new Date(2015, 9, 30), end: new Date(2015, 10, 2), group:"F1", className:"openwheel", content:"Mexico",id:"647@motocal.net"}, + {start: new Date(2015, 9, 30), end: new Date(2015, 10, 2), group:"WTCC", className:"touringcar", content:"Thailand",id:"727@motocal.net"}, + {start: new Date(2015, 10, 1), end: new Date(2015, 10, 2), group:"WEC", className:"endurance", content:"6 Hours of Shanghai",id:"680@motocal.net"}, + {start: new Date(2015, 10, 6), end: new Date(2015, 10, 9), group:"MotoGP", className:"motorcycle", content:"Valencia",id:"556@motocal.net"}, + {start: new Date(2015, 10, 6), end: new Date(2015, 10, 9), group:"V8SC", className:"touringcar", content:"ITM 500 Auckland",id:"671@motocal.net"}, + {start: new Date(2015, 10, 12), end: new Date(2015, 10, 16), group:"WRC", className:"rally", content:"Wales Rally GB",id:"603@motocal.net"}, + {start: new Date(2015, 10, 13), end: new Date(2015, 10, 16), group:"F1", className:"openwheel", content:"Brazil",id:"648@motocal.net"}, + {start: new Date(2015, 10, 19), end: new Date(2015, 10, 23), group:"Roads", className:"motorcycle", content:"Macau Grand Prix",id:"685@motocal.net"}, + {start: new Date(2015, 10, 20), end: new Date(2015, 10, 23), group:"WTCC", className:"touringcar", content:"Qatar",id:"728@motocal.net"}, + {start: new Date(2015, 10, 20), end: new Date(2015, 10, 23), group:"V8SC", className:"touringcar", content:"Phillip Island SuperSprint",id:"672@motocal.net"}, + {start: new Date(2015, 10, 21), end: new Date(2015, 10, 22), group:"WEC", className:"endurance", content:"6 Hours of Bahrain",id:"681@motocal.net"}, + {start: new Date(2015, 10, 27), end: new Date(2015, 10, 30), group:"WorldRX", className:"rally", content:"Argentina",id:"700@motocal.net"}, + {start: new Date(2015, 10, 27), end: new Date(2015, 10, 30), group:"F1", className:"openwheel", content:"Abu Dhabi",id:"649@motocal.net"}, + {start: new Date(2015, 11, 4), end: new Date(2015, 11, 7), group:"V8SC", className:"touringcar", content:"Sydney 500",id:"673@motocal.net"}, + {start: new Date(2015, 2, 9), end: new Date(2015, 2, 11), group:"GP2", className:"openwheel", content:"Yas Marina Test",id:"1@gp2series.com"}, + {start: new Date(2015, 3, 1), end: new Date(2015, 3, 3), group:"GP2", className:"openwheel", content:"Sakhir Test",id:"2@gp2series.com"}, + {start: new Date(2015, 3, 17), end: new Date(2015, 3, 19), group:"GP2", className:"openwheel", content:"Sakhir, Bahrain",id:"3@gp2series.com"}, + {start: new Date(2015, 4, 8), end: new Date(2015, 4, 10), group:"GP2", className:"openwheel", content:"Barcelona, Spain",id:"4@gp2series.com"}, + {start: new Date(2015, 4, 21), end: new Date(2015, 4, 23), group:"GP2", className:"openwheel", content:"Monte Carlo, Monaco",id:"5@gp2series.com"}, + {start: new Date(2015, 5, 19), end: new Date(2015, 5, 21), group:"GP2", className:"openwheel", content:"Spielber, Austria",id:"6@gp2series.com"}, + {start: new Date(2015, 6, 3), end: new Date(2015, 6, 5), group:"GP2", className:"openwheel", content:"Silverstone, Great-Britain",id:"7@gp2series.com"}, + {start: new Date(2015, 6, 24), end: new Date(2015, 6, 26), group:"GP2", className:"openwheel", content:"Budapest, Hungary",id:"8@gp2series.com"}, + {start: new Date(2015, 7, 21), end: new Date(2015, 7, 23), group:"GP2", className:"openwheel", content:"Spa-Francorchamps, Belgium",id:"9@gp2series.com"}, + {start: new Date(2015, 8, 4), end: new Date(2015, 8, 6), group:"GP2", className:"openwheel", content:"Monza, Italy",id:"10@gp2series.com"}, + {start: new Date(2015, 9, 9), end: new Date(2015, 9, 11), group:"GP2", className:"openwheel", content:"Sochi, Russia",id:"11@gp2series.com"}, + {start: new Date(2015, 10, 27), end: new Date(2015, 10, 29), group:"GP2", className:"openwheel", content:"Yas Marina, UAE",id:"12@gp2series.com"}, + ]) + + + // create visualization + var container = document.getElementById('visualization'); + var options = { + // option groupOrder can be a property name or a sort function + // the sort function must compare two groups and return a value + // > 0 when a > b + // < 0 when a < b + // 0 when a == b + groupOrder: function (a, b) { + return a.value - b.value; + }, + groupOrderSwap: function (a, b, groups) { + var v = a.value; + a.value = b.value; + b.value = v; + }, + orientation: 'both', + editable: true, + groupEditable: true, + start: new Date(2015, 6, 1), + end: new Date(2015, 10, 1) + }; + + 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/groups/groupsOrdering.html b/www/lib/vis/examples/timeline/groups/groupsOrdering.html new file mode 100644 index 00000000..b4da7755 --- /dev/null +++ b/www/lib/vis/examples/timeline/groups/groupsOrdering.html @@ -0,0 +1,68 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Groups ordering</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + #visualization { + box-sizing: border-box; + width: 100%; + height: 300px; + } + </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 custom ordering of groups. +</p> +<div id="visualization"></div> + +<script> + var groups = new vis.DataSet([ + {id: 0, content: 'First', value: 1}, + {id: 1, content: 'Third', value: 3}, + {id: 2, content: 'Second', value: 2} + ]); + + // create a dataset with items + // note that months are zero-based in the JavaScript Date object, so month 3 is April + var items = new vis.DataSet([ + {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)}, + {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)}, + {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)}, + {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)}, + {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)}, + {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)} + ]); + + // create visualization + var container = document.getElementById('visualization'); + var options = { + // option groupOrder can be a property name or a sort function + // the sort function must compare two groups and return a value + // > 0 when a > b + // < 0 when a < b + // 0 when a == b + groupOrder: function (a, b) { + return a.value - b.value; + }, + editable: true + }; + + 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/groups/subgroups.html b/www/lib/vis/examples/timeline/groups/subgroups.html new file mode 100644 index 00000000..0056705d --- /dev/null +++ b/www/lib/vis/examples/timeline/groups/subgroups.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Background areas</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + .vis-item.vis-background.negative { + background-color: rgba(255, 0, 0, 0.2); + } + .vis-item.vis-background.positive { + background-color: rgba(105, 255, 98, 0.20); + } + .vis-item.vis-background.marker { + border-left: 2px solid green; + } + </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 shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</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' } + }); + var groups = new vis.DataSet([{ + id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;} + },{ + id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting. + }]); + // add items to the DataSet + items.add([ + {id: 'A',start: '2014-01-20', end: '2014-01-22', type: 'background', group:'foo'}, + {id: 'B',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'}, + {id: 0, content: 'no subgroup', start: '2014-01-20', end: '2014-01-22',group:'foo'}, + + {id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0}, + {id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0}, + {id: 1, content: 'subgroup0', start: '2014-01-23 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0}, + {id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1}, + {id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1}, + {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1}, + + {id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'}, + {id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'}, + ]); + + var container = document.getElementById('visualization'); + var options = { + // orientation:'top' + start: '2014-01-10', + end: '2014-02-10', + editable: true, + stack: false + }; + + var timeline = new vis.Timeline(container, items, groups, options); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/groups/verticalItemsHide.html b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html new file mode 100644 index 00000000..1f38fffe --- /dev/null +++ b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html @@ -0,0 +1,126 @@ +<html> +<head> + <title>Timeline | A lot of grouped data</title> + + <script src="../../../docs/js/jquery.min.js"></script> + <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 vertical visibility</h1> + + +<button onclick="showVisibleItems()">Show current visible items</button> +<div> + <h2>visible items:</h2> + <h3 id="visibleItemsContainer"></h3> +</div> + +<div id="mytimeline"></div> +<br> + +<script> + function showVisibleItems() { + var a = timeline.getVisibleItems(); + console.log(a); + document.getElementById("visibleItemsContainer").innerHTML = "" + document.getElementById("visibleItemsContainer").innerHTML += a; + }; + + // get selected item count from url parameter + var 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'}, + {id: 5, content: 'Truck 5'}, + {id: 6, content: 'Truck 6'}, + {id: 7, content: 'Truck 7'}, + {id: 8, content: 'Truck 8'}, + {id: 9, content: 'Truck 9'}, + {id: 10, content: 'Truck 10'}, + {id: 11, content: 'Truck 11'}, + {id: 12, content: 'Truck 12'}, + {id: 13, content: 'Truck 13'}, + {id: 14, content: 'Truck 14'}, + {id: 15, content: 'Truck 15'}, + {id: 16, content: 'Truck 16'}, + {id: 17, content: 'Truck 17'}, + {id: 18, content: 'Truck 18'}, + {id: 19, content: 'Truck 19'}, + {id: 20, content: 'Truck 20'}, + {id: 21, content: 'Truck 21'}, + {id: 22, content: 'Truck 22'}, + {id: 23, content: 'Truck 23'}, + {id: 24, content: 'Truck 24'}, + {id: 25, content: 'Truck 25'}, + + ]); + + // create items + var items = new vis.DataSet(); + + var types = [ 'box', 'point', 'range', 'background'] + var order = 1; + var truck = 1; + for (var j = 0; j < 25; j++) { + var date = new Date(); + for (var i = 0; i < count/25; 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); + + var type = types[Math.floor(4 * Math.random())] + + items.add({ + id: order, + group: truck, + start: start, + end: end, + type: type, + content: 'Order ' + order + }); + + order++; + } + truck++; + } + + // specify options + var options = { + stack: true, + 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, null, options); + timeline.setGroups(groups); + timeline.setItems(items); +</script> + +</body> +</html> 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 diff --git a/www/lib/vis/examples/timeline/items/backgroundAreas.html b/www/lib/vis/examples/timeline/items/backgroundAreas.html new file mode 100644 index 00000000..3ec18a66 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/backgroundAreas.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Background areas</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + .vis-item.vis-background.negative { + background-color: rgba(255, 0, 0, 0.2); + } + </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 the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p> + +<div id="visualization"></div> + +<script> + var items = new vis.DataSet([ + {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'}, + {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'}, + {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 + }; + + 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/items/backgroundAreasWithGroups.html b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html new file mode 100644 index 00000000..f8a78608 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Background areas with groups</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>This example demonstrates the item type "background" when using groups.</p> +<ul> + <li>Background items having a group are displayed in that group</li> + <li>Background items without a group are spread over the whole timeline</li> + <li>Background items with a non-existing group are not displayed</li> +</ul> +<div id="visualization"></div> + +<script> + var items = new vis.DataSet([ + {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background', group: 1}, + {id: 'B', content: 'Period B', start: '2014-01-23', end: '2014-01-26', type: 'background', group: 2}, + {id: 'C', content: 'Period C', start: '2014-01-27', end: '2014-02-03', type: 'background'}, // no group + {id: 'D', content: 'Period D', start: '2014-01-14', end: '2014-01-20', type: 'background', group: 'non-existing'}, + {id: 1, content: 'item 1<br>start', start: '2014-01-30', group: 1}, + {id: 2, content: 'item 2', start: '2014-01-18', group: 1}, + {id: 3, content: 'item 3', start: '2014-01-21', group: 2}, + {id: 4, content: 'item 4', start: '2014-01-17', end: '2014-01-21', group: 2}, + {id: 5, content: 'item 5', start: '2014-01-28', type:'point', group: 2}, + {id: 6, content: 'item 6', start: '2014-01-25', group: 2} + ]); + + var groups = new vis.DataSet([ + {id: 1, content: 'Group 1'}, + {id: 2, content: 'Group 2'} + ]); + + var container = document.getElementById('visualization'); + var options = { + start: '2014-01-10', + end: '2014-02-10', + editable: true + }; + + var timeline = new vis.Timeline(container, items, groups, options); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/items/htmlContents.html b/www/lib/vis/examples/timeline/items/htmlContents.html new file mode 100644 index 00000000..d790133a --- /dev/null +++ b/www/lib/vis/examples/timeline/items/htmlContents.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | HTML data</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + span { + color: red; + } + span.large { + font-size: 200%; + } + </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> + Load HTML contents in the Timeline in various ways. +</p> +<div id="visualization"></div> + +<script> + // create a couple of HTML items in various ways + + var item1 = document.createElement('div'); + item1.appendChild(document.createTextNode('item 1')); + + var item2 = document.createElement('div'); + item2.innerHTML = '<span>item 2</span>'; + + var item3 = document.createElement('div'); + var span3 = document.createElement('span'); + span3.className = 'large'; + span3.appendChild(document.createTextNode('item 3')); + item3.appendChild(span3); + + var item4 = 'item <span class="large">4</span>'; + + var item5 = document.createElement('div'); + item5.appendChild(document.createTextNode('item 5')); + item5.appendChild(document.createElement('br')); + var img5 = document.createElement('img'); + img5.src = 'img/attachment-icon.png'; + img5.style.width = '48px'; + img5.style.height = '48px'; + item5.appendChild(img5); + + var item6 = 'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">'; + + var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>'; + + // create data and a Timeline + var container = document.getElementById('visualization'); + var items = new vis.DataSet([ + {id: 1, content: item1, start: '2013-04-20'}, + {id: 2, content: item2, start: '2013-04-14'}, + {id: 3, content: item3, start: '2013-04-18'}, + {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'}, + {id: 5, content: item5, start: '2013-04-25'}, + {id: 6, content: item6, start: '2013-04-27'}, + {id: 7, content: item7, start: '2013-04-21'} + ]); + var options = {}; + 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/items/itemOrdering.html b/www/lib/vis/examples/timeline/items/itemOrdering.html new file mode 100644 index 00000000..323c9501 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/itemOrdering.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Item ordering</title> + + <style type="text/css"> + body, html { + font-family: sans-serif; + } + p { + 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>Item ordering</h1> +<p> + By default, the items displayed on the Timeline are unordered. They are + stacked in the order that they where loaded. This means that way items are + stacked can change while moving and zooming the Timeline. +</p> +<p> + To display and stack the items in a controlled order, you can provide a + custom sorting function via the configuration option <code>order</code>. +</p> +<p> + WARNING: Custom ordering is only suitable for small amounts of items (up to a few + hundred), as the Timeline has to render <i>all</i> items once on load to + determine their width and height. +</p> +<p> + <label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label> +</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(); + var date = vis.moment('2015-03-02'); + for (var i = 0; i < 100; i++) { + date.add(Math.round(Math.random() * 2), 'hour'); + items.add({ + id: i, + content: 'Item ' + i, + start: date.clone(), + end: date.clone().add(4, 'hour') + }); + } + + function customOrder (a, b) { + // order by id + return a.id - b.id; + } + + // Configuration for the Timeline + var options = { + order: customOrder, + editable: true, + margin: {item: 0} + }; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + + var ordering = document.getElementById('ordering'); + ordering.onchange = function () { + timeline.setOptions({ + order: ordering.checked ? customOrder: null + }); + }; +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/items/pointItems.html b/www/lib/vis/examples/timeline/items/pointItems.html new file mode 100755 index 00000000..68201801 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/pointItems.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Point items</title> + + <style type="text/css"> + body { + font: 10pt arial; + } + </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>World War II timeline</h1> +<p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p> +<div id="mytimeline" style="background-color: #FAFAFA;"></div> + +<div id="visualization"></div> + +<script type="text/javascript"> + var container = document.getElementById('visualization'); + + // note that months are zero-based in the JavaScript Date object + var items = new vis.DataSet([ + {start: new Date(1939,8,1), content: 'German Invasion of Poland'}, + {start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'}, + {start: new Date(1940,7,13), content: 'Battle of Britain - RAF vs. Luftwaffe'}, + {start: new Date(1941,1,14), content: 'German Afrika Korps arrives in North Africa'}, + {start: new Date(1941,5,22), content: 'Third Reich Invades the USSR'}, + {start: new Date(1941,11,7), content: 'Japanese Attack Pearl Harbor'}, + {start: new Date(1942,5,4), content: 'Battle of Midway in the Pacific'}, + {start: new Date(1942,10,8), content: 'Americans open Second Front in North Africa'}, + {start: new Date(1942,10,19),content: 'Battle of Stalingrad in Russia'}, + {start: new Date(1943,6,5), content: 'Battle of Kursk - Last German Offensive on Eastern Front'}, + {start: new Date(1943,6,10), content: 'Anglo-American Landings in Sicily'}, + {start: new Date(1944,2,8), content: 'Japanese Attack British India'}, + {start: new Date(1944,5,6), content: 'D-Day - Allied Invasion of Normandy'}, + {start: new Date(1944,5,22), content: 'Destruction of Army Group Center in Byelorussia'}, + {start: new Date(1944,7,1), content: 'The Warsaw Uprising in Occupied Poland'}, + {start: new Date(1944,9,20), content: 'American Liberation of the Philippines'}, + {start: new Date(1944,11,16),content: 'Battle of the Bulge in the Ardennes'}, + {start: new Date(1944,1,19), content: 'American Landings on Iwo Jima'}, + {start: new Date(1945,3,1), content: 'US Invasion of Okinawa'}, + {start: new Date(1945,3,16), content: 'Battle of Berlin - End of the Third Reich'} + ]); + + var options = { + // Set global item type. Type can also be specified for items individually + // Available types: 'box' (default), 'point', 'range' + type: 'point', + showMajorLabels: false + }; + + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html> diff --git a/www/lib/vis/examples/timeline/items/rangeOverflowItem.html b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html new file mode 100644 index 00000000..fbea2f37 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Range overflow</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, html { + font-family: sans-serif; + } + + .vis-item .vis-item-overflow { + overflow: visible; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<p> + In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css: +</p> +<pre> +.vis-item .vis-item-overflow { + overflow: visible; +} +</pre> + +<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 with overflowing text content', start: '2014-04-20', end: '2014-04-26'}, + {id: 2, content: 'item 2 with overflowing text content', start: '2014-05-14', end: '2014-05-18'}, + {id: 3, content: 'item 3 with overflowing text content', start: '2014-06-18', end: '2014-06-22'}, + {id: 4, content: 'item 4 with overflowing text content', start: '2014-06-16', end: '2014-06-17'}, + {id: 5, content: 'item 5 with overflowing text content', start: '2014-06-25', end: '2014-06-27'}, + {id: 6, content: 'item 6 with overflowing text content', start: '2014-09-27', end: '2014-09-28'} + ]); + + // Configuration for the Timeline + var options = {}; + + // 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/customTimeBars.html b/www/lib/vis/examples/timeline/other/customTimeBars.html new file mode 100644 index 00000000..2c1a5f7c --- /dev/null +++ b/www/lib/vis/examples/timeline/other/customTimeBars.html @@ -0,0 +1,89 @@ +<!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 new file mode 100644 index 00000000..0aa1f14e --- /dev/null +++ b/www/lib/vis/examples/timeline/other/dataAttributes.html @@ -0,0 +1,44 @@ +<!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 new file mode 100644 index 00000000..5b926b54 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/dataAttributesAll.html @@ -0,0 +1,44 @@ +<!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 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 new file mode 100644 index 00000000..1b16af30 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/groupsPerformance.html @@ -0,0 +1,110 @@ +<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 new file mode 100644 index 00000000..52ec6f9a --- /dev/null +++ b/www/lib/vis/examples/timeline/other/hidingPeriods.html @@ -0,0 +1,53 @@ +<!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 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 new file mode 100644 index 00000000..5b58923b --- /dev/null +++ b/www/lib/vis/examples/timeline/other/localization.html @@ -0,0 +1,68 @@ +<!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 new file mode 100644 index 00000000..45b22aab --- /dev/null +++ b/www/lib/vis/examples/timeline/other/performance.html @@ -0,0 +1,65 @@ +<!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 new file mode 100644 index 00000000..363845fe --- /dev/null +++ b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html @@ -0,0 +1,17 @@ +<!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 new file mode 100644 index 00000000..f8148540 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/requirejs/scripts/main.js @@ -0,0 +1,19 @@ +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 new file mode 100644 index 00000000..8de013dc --- /dev/null +++ b/www/lib/vis/examples/timeline/other/requirejs/scripts/require.js @@ -0,0 +1,35 @@ +/* + 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 new file mode 100644 index 00000000..f53b1802 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/rtl.html @@ -0,0 +1,50 @@ +<!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 new file mode 100644 index 00000000..8994ba98 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/timezone.html @@ -0,0 +1,80 @@ +<!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 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> diff --git a/www/lib/vis/examples/timeline/resources/data/basic.json b/www/lib/vis/examples/timeline/resources/data/basic.json new file mode 100644 index 00000000..711dd8e2 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/data/basic.json @@ -0,0 +1,34 @@ +[ + { + "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" + } +]
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/resources/data/wk2014.json b/www/lib/vis/examples/timeline/resources/data/wk2014.json new file mode 100644 index 00000000..2bcb3d75 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/data/wk2014.json @@ -0,0 +1,152 @@ +[ + { + "player1": "Brazil", + "abbr1": "br", + "score1": "1 (3)", + "player2": "Chile", + "abbr2": "cl", + "score2": "1 (2)", + "description": "round of 16", + "start": "2014-06-28 13:00" + }, + { + "player1": "Colombia", + "abbr1": "co", + "score1": 2, + "player2": "Uruguay", + "abbr2": "uy", + "score2": 0, + "description": "round of 16", + "start": "2014-06-28 17:00" + }, + { + "player1": "Netherlands", + "abbr1": "nl", + "score1": 2, + "player2": "Mexico", + "abbr2": "mx", + "score2": 1, + "description": "round of 16", + "start": "2014-06-29 13:00" + }, + { + "player1": "Costa Rica", + "abbr1": "cr", + "score1": "1 (5)", + "player2": "Greece", + "abbr2": "gr", + "score2": "1 (3)", + "description": "round of 16", + "start": "2014-06-29 17:00" + }, + { + "player1": "France", + "abbr1": "fr", + "score1": 2, + "player2": "Nigeria", + "abbr2": "ng", + "score2": 0, + "description": "round of 16", + "start": "2014-06-30 13:00" + }, + { + "player1": "Germany", + "abbr1": "de", + "score1": 2, + "player2": "Algeria", + "abbr2": "dz", + "score2": 1, + "description": "round of 16", + "start": "2014-06-30 17:00" + }, + { + "player1": "Argentina", + "abbr1": "ar", + "score1": 1, + "player2": "Switzerland", + "abbr2": "ch", + "score2": 0, + "description": "round of 16", + "start": "2014-07-01 13:00" + }, + { + "player1": "Belgium", + "abbr1": "be", + "score1": 2, + "player2": "USA", + "abbr2": "us", + "score2": 1, + "description": "round of 16", + "start": "2014-07-01 17:00" + }, + { + "player1": "France", + "abbr1": "fr", + "score1": 0, + "player2": "Germany", + "abbr2": "de", + "score2": 1, + "description": "quarter-finals", + "start": "2014-07-04 13:00" + }, + { + "player1": "Brazil", + "abbr1": "br", + "score1": 2, + "player2": "Colombia", + "abbr2": "co", + "score2": 1, + "description": "quarter-finals", + "start": "2014-07-04 17:00" + }, + { + "player1": "Argentina", + "abbr1": "ar", + "score1": 1, + "player2": "Belgium", + "abbr2": "be", + "score2": 0, + "description": "quarter-finals", + "start": "2014-07-05 13:00" + }, + { + "player1": "Netherlands", + "abbr1": "nl", + "score1": "0 (4)", + "player2": "Costa Rica", + "abbr2": "cr", + "score2": "0 (3)", + "description": "quarter-finals", + "start": "2014-07-05 17:00" + }, + { + "player1": "Brazil", + "abbr1": "br", + "score1": 1, + "player2": "Germany", + "abbr2": "de", + "score2": 7, + "description": "semi-finals", + "start": "2014-07-08 17:00" + }, + { + "player1": "Netherlands", + "abbr1": "nl", + "score1": "0 (2)", + "player2": "Argentina", + "abbr2": "ar", + "score2": "0 (4)", + "description": "semi-finals", + "start": "2014-07-09 17:00" + }, + { + "player1": "Germany", + "score1": 1, + "abbr1": "de", + "player2": "Argentina", + "abbr2": "ar", + "score2": 0, + "description": "final", + "start": "2014-07-13 16:00" + } +]
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png b/www/lib/vis/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png Binary files differnew file mode 100644 index 00000000..66a6d35f --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/attachment-icon.png b/www/lib/vis/examples/timeline/resources/img/attachment-icon.png Binary files differnew file mode 100755 index 00000000..fc825177 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/attachment-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/blog-post-edit-icon.png b/www/lib/vis/examples/timeline/resources/img/blog-post-edit-icon.png Binary files differnew file mode 100755 index 00000000..12ab23c6 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/blog-post-edit-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/comments-icon.png b/www/lib/vis/examples/timeline/resources/img/comments-icon.png Binary files differnew file mode 100755 index 00000000..736789ed --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/comments-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/community-users-icon.png b/www/lib/vis/examples/timeline/resources/img/community-users-icon.png Binary files differnew file mode 100755 index 00000000..a77e239a --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/community-users-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/license.txt b/www/lib/vis/examples/timeline/resources/img/license.txt new file mode 100644 index 00000000..9d65f9f5 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/license.txt @@ -0,0 +1,17 @@ +IMAGE LICENSES + +REFRESH CL +http://www.iconarchive.com/category/system/refresh-cl-icons-by-tpdkdesign.net.html + +License: Free for non-commercial use. +http://www.iconarchive.com/icons/tpdkdesign.net/refresh-cl/readme_eng.txt + + + +AESTHETICA 2 +http://www.iconarchive.com/category/application/aesthetica-2-icons-by-dryicons.html + +License: +DryIcons Terms of Use +http://dryicons.com/terms/ + diff --git a/www/lib/vis/examples/timeline/resources/img/license_aesthetica-2.txt b/www/lib/vis/examples/timeline/resources/img/license_aesthetica-2.txt new file mode 100644 index 00000000..28554c00 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/license_aesthetica-2.txt @@ -0,0 +1,36 @@ +Aesthetica Icon Set, version 2.0 +http://dryicons.com/free-icons/preview/aesthetica-version-2/ + +Information +---------------------- + +This icon set contains 181 quality icons in the following formats: + Transparent PNG + 16 x 16 px + 24 x 24 px + 32 x 32 px + 48 x 48 px + 128 x 128 px + + + +Licensing +---------------------- + +The usage of DryIcons' work (icons, icon sets and graphics) is limited to the terms of the "Free License" and "Commercial License" use. +The DryIcons Free License means that you can use our icons, icon sets and graphics in any publicly accesible web site, web application or any form of presentation publicly accessible through the World Wide Web only according to the DryIcons Free License Terms and Conditions: + +* You must put a back link with credits to http://dryicons.com on every page where DryIcons' Works are used (example: Icons by http://dryicons.com); + +* You must include the correct back link to DryIcons website, which is: http://dryicons.com; + +* You must place the link on an easy-to-see, recognizable place, so there is no confusion about the Original Author of the Works (DryIcons); + +* When copying, or paraphrasing description text (or title) on one of the Works, you must make sure there are no spelling mistakes; + +* Do not try to take credit or imply in any way that you and not DryIcons is the Original Author of the Works (icons, icon sets and graphics). + +For a more detailed look at our Free License Agreement, please follow the link: http://dryicons.com/terms/#free-license + + +The DryIcons Commercial License means that you can use our Free Icon Sets and Free Graphics without being obligated to put a back link to DryIcons.com for a certain fee. After you complete yourpayment transaction DryIcons grants you a Commercial License.
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/resources/img/license_refresh-cl.txt b/www/lib/vis/examples/timeline/resources/img/license_refresh-cl.txt new file mode 100644 index 00000000..78427f03 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/license_refresh-cl.txt @@ -0,0 +1,26 @@ +RefreshCL Icon Pack by TPDK ©2005 www.tpdkdesign.net +All rights reserved. +version 1.0 2005/18/11 + + +Terms of use +Theses icons are copyrighted, and for personal use only. +Until now, COMMERCIAL USE is strictly forbidden. + +You cannot (non-exhaustive list) : +- Use my icons in commercial website +- Use my icons in a professional website layout +- Sell or distribute those icons + +For any other use, such as : +- using in non-commercial website +- using icon in free software under GPL licence +you need my authorization to use them. If you have my permission, you need to credit me in your terms and put a link to my website. +I would not be responsible fo any damage you may encounter while using this product. +For any question or request about the pack, please send me an email to tpdk@tpdkdesign.net. + +Special thanks to customxp's & crystalxp's teams and members for help and support ;) +http://crystalxp.net +http://customxp.net +http://pngfactory.net +visit my deviantart webpage : http://tpdkcasimir.deviantart.com/ diff --git a/www/lib/vis/examples/timeline/resources/img/mail-icon.png b/www/lib/vis/examples/timeline/resources/img/mail-icon.png Binary files differnew file mode 100755 index 00000000..f11ce5c3 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/mail-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/notes-edit-icon.png b/www/lib/vis/examples/timeline/resources/img/notes-edit-icon.png Binary files differnew file mode 100755 index 00000000..7f903df4 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/notes-edit-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/product-icon.png b/www/lib/vis/examples/timeline/resources/img/product-icon.png Binary files differnew file mode 100644 index 00000000..fb12da43 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/product-icon.png diff --git a/www/lib/vis/examples/timeline/resources/img/truck-icon.png b/www/lib/vis/examples/timeline/resources/img/truck-icon.png Binary files differnew file mode 100644 index 00000000..89d92622 --- /dev/null +++ b/www/lib/vis/examples/timeline/resources/img/truck-icon.png diff --git a/www/lib/vis/examples/timeline/styling/axisOrientation.html b/www/lib/vis/examples/timeline/styling/axisOrientation.html new file mode 100644 index 00000000..b3978f17 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/axisOrientation.html @@ -0,0 +1,76 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Orientation</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> + There are a number of orientation options for the time axis and the items. +</p> + +<p> + <label for="axis-orientation">Axis orientation</label> + <select id="axis-orientation"> + <option value="both">both</option> + <option value="bottom" selected>bottom</option> + <option value="none">none</option> + <option value="top">top</option> + </select> +</p> + +<p> + <label for="item-orientation">Item orientation</label> + <select id="item-orientation"> + <option value="bottom" selected>bottom</option> + <option value="top">top</option> + </select> +</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'}, + {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'} + ]); + + // Configuration for the Timeline + var options = { + height: 250 // px + }; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + + var axisOrientation = document.getElementById('axis-orientation'); + axisOrientation.onchange = function () { + timeline.setOptions({ orientation: {axis: this.value} }); + }; + + var itemOrientation = document.getElementById('item-orientation'); + itemOrientation.onchange = function () { + timeline.setOptions({ orientation: {item: this.value} }); + }; +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/styling/customCss.html b/www/lib/vis/examples/timeline/styling/customCss.html new file mode 100644 index 00000000..ed700a1d --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/customCss.html @@ -0,0 +1,100 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Custom styling</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 { + font-family: purisa, 'comic sans', cursive; + } + + .vis-timeline { + border: 2px solid purple; + font-family: purisa, 'comic sans', cursive; + font-size: 12pt; + background: #ffecea; + } + + .vis-item { + border-color: #F991A3; + background-color: pink; + font-size: 15pt; + color: purple; + box-shadow: 5px 5px 20px rgba(128,128,128, 0.5); + } + + .vis-item, + .vis-item.vis-line { + border-width: 3px; + } + + .vis-item.vis-dot { + border-width: 10px; + border-radius: 10px; + } + + .vis-item.vis-selected { + border-color: green; + background-color: lightgreen; + } + + .vis-time-axis .vis-text { + color: purple; + padding-top: 10px; + padding-left: 10px; + } + + .vis-time-axis .vis-text.vis-major { + font-weight: bold; + } + + .vis-time-axis .vis-grid.vis-minor { + border-width: 2px; + border-color: pink; + } + + .vis-time-axis .vis-grid.vis-major { + border-width: 2px; + border-color: #F991A3; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> + +<p> + The style of the Timeline can be fully customized via CSS: +</p> +<div id="visualization"></div> + +<script type="text/javascript"> + var container = document.getElementById('visualization'); + + // note that months are zero-based in the JavaScript Date object + var items = new vis.DataSet([ + {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'}, + {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, + {start: new Date(2010,7,24,16,0,0), content: 'Report'}, + {start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'}, + {start: new Date(2010,7,28), content: '<div>Memo</div><img src="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'}, + {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="../resources/img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'}, + {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'}, + {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="../resources/img/attachment-icon.png" style="width:32px; height:32px;">'} + ]); + + var options = { + editable: true, + margin: { + item: 20, + axis: 40 + } + }; + + 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/styling/gridStyling.html b/www/lib/vis/examples/timeline/styling/gridStyling.html new file mode 100644 index 00000000..9fec28b2 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/gridStyling.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Grid styling</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, html { + font-family: sans-serif; + } + + /* alternating column backgrounds */ + .vis-time-axis .vis-grid.vis-odd { + background: #f5f5f5; + } + + /* gray background in weekends, white text color */ + .vis-time-axis .vis-grid.vis-saturday, + .vis-time-axis .vis-grid.vis-sunday { + background: gray; + } + .vis-time-axis .vis-text.vis-saturday, + .vis-time-axis .vis-text.vis-sunday { + color: white; + } + </style> + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<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: 'custom', start: '2015-01-01'}, + {id: 2, content: 'styling', start: '2016-01-01'}, + {id: 3, content: 'of', start: '2017-01-01'}, + {id: 4, content: 'background', start: '2018-01-01'}, + {id: 5, content: 'grid', start: '2019-01-01'} + ]); + + // Configuration for the Timeline + var options = {}; + + // 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/styling/itemClassNames.html b/www/lib/vis/examples/timeline/styling/itemClassNames.html new file mode 100755 index 00000000..62433484 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/itemClassNames.html @@ -0,0 +1,117 @@ +<html> +<head> + <title>Timeline | Item class names</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, input { + font: 12pt verdana; + } + + /* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */ + + .vis-item.green { + background-color: greenyellow; + border-color: green; + } + + /* create a custom sized dot at the bottom of the red item */ + .vis-item.red { + background-color: red; + border-color: darkred; + color: white; + font-family: monospace; + box-shadow: 0 0 10px gray; + } + .vis-item.vis-dot.red { + border-radius: 10px; + border-width: 10px; + } + .vis-item.vis-line.red { + border-width: 5px; + } + .vis-item.vis-box.red { + border-radius: 0; + border-width: 2px; + font-size: 24pt; + font-weight: bold; + } + + .vis-item.orange { + background-color: gold; + border-color: orange; + } + .vis-item.vis-selected.orange { + /* custom colors for selected orange items */ + background-color: orange; + border-color: orangered; + } + + .vis-item.magenta { + background-color: magenta; + border-color: purple; + color: white; + } + + /* our custom classes overrule the styles for selected events, + so lets define a new style for the selected events */ + .vis-item.vis-selected { + background-color: white; + border-color: black; + color: black; + box-shadow: 0 0 10px gray; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<p>This page demonstrates the Timeline with custom css classes for individual items.</p> + +<div id="mytimeline"></div> + +<script type="text/javascript"> + // create data + // note that months are zero-based in the JavaScript Date object + var data = new vis.DataSet([ + { + 'start': new Date(2012,7,19), + 'content': 'default' + }, + { + 'start': new Date(2012,7,23), + 'content': 'green', + 'className': 'green' + }, + { + 'start': new Date(2012,7,29), + 'content': 'red', + 'className': 'red' + }, + { + 'start': new Date(2012,7,27), + 'end': new Date(2012,8,1), + 'content': 'orange', + 'className': 'orange' + }, + { + 'start': new Date(2012,8,2), + 'content': 'magenta', + 'className': 'magenta' + } + ]); + + // specify options + var options = { + editable: true + }; + + // create the timeline + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, data, options); + +</script> +</body> +</html> diff --git a/www/lib/vis/examples/timeline/styling/itemTemplates.html b/www/lib/vis/examples/timeline/styling/itemTemplates.html new file mode 100644 index 00000000..13e43c46 --- /dev/null +++ b/www/lib/vis/examples/timeline/styling/itemTemplates.html @@ -0,0 +1,251 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Templates</title> + + <!-- load handlebars for templating, and create a template --> + <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> + <script id="item-template" type="text/x-handlebars-template"> + <table class="score"> + <tr> + <td colspan="3" class="description">{{description}}</td> + </tr> + <tr> + <td>{{player1}}</td> + <th>{{score1}} - {{score2}}</th> + <td>{{player2}}</td> + </tr> + <tr> + <td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td> + <th></th> + <td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td> + </tr> + </table> + </script> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body, html { + font-family: sans-serif; + font-size: 10pt; + } + + .vis.timeline .item { + border-color: #acacac; + background-color: #efefef; + box-shadow: 5px 5px 10px rgba(128,128,128, 0.3); + } + + table .description { + font-style: italic; + } + + #visualization { + position: relative; + overflow: hidden; + } + + .logo { + position: absolute; + right: 10px; + top: 10px; + } + .logo img { + width: 120px; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<h1>WK 2014</h1> +<p style="max-width: 600px;"> + This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item. +</p> + +<div id="visualization"> + <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div> +</div> + +<script type="text/javascript"> + // create a handlebars template + var source = document.getElementById('item-template').innerHTML; + var template = Handlebars.compile(document.getElementById('item-template').innerHTML); + + // 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([ + // round of 16 + { + player1: 'Brazil', + abbr1: 'br', + score1: '1 (3)', + player2: 'Chile', + abbr2: 'cl', + score2: '1 (2)', + description: 'round of 16', + start: '2014-06-28 13:00' + }, + { + player1: 'Colombia', + abbr1: 'co', + score1: 2, + player2: 'Uruguay', + abbr2: 'uy', + score2: 0, + description: 'round of 16', + start: '2014-06-28 17:00' + }, + { + player1: 'Netherlands', + abbr1: 'nl', + score1: 2, + player2: 'Mexico', + abbr2: 'mx', + score2: 1, + description: 'round of 16', + start: '2014-06-29 13:00' + }, + { + player1: 'Costa Rica', + abbr1: 'cr', + score1: '1 (5)', + player2: 'Greece', + abbr2: 'gr', + score2: '1 (3)', + description: 'round of 16', + start: '2014-06-29 17:00' + }, + { + player1: 'France', + abbr1: 'fr', + score1: 2, + player2: 'Nigeria', + abbr2: 'ng', + score2: 0, + description: 'round of 16', + start: '2014-06-30 13:00' + }, + { + player1: 'Germany', + abbr1: 'de', + score1: 2, + player2: 'Algeria', + abbr2: 'dz', + score2: 1, + description: 'round of 16', + start: '2014-06-30 17:00' + }, + { + player1: 'Argentina', + abbr1: 'ar', + score1: 1, + player2: 'Switzerland', + abbr2: 'ch', + score2: 0, + description: 'round of 16', + start: '2014-07-01 13:00' + }, + { + player1: 'Belgium', + abbr1: 'be', + score1: 2, + player2: 'USA', + abbr2: 'us', + score2: 1, + description: 'round of 16', + start: '2014-07-01 17:00' + }, + + // quarter-finals + { + player1: 'France', + abbr1: 'fr', + score1: 0, + player2: 'Germany', + abbr2: 'de', + score2: 1, + description: 'quarter-finals', + start: '2014-07-04 13:00' + }, + { + player1: 'Brazil', + abbr1: 'br', + score1: 2, + player2: 'Colombia', + abbr2: 'co', + score2: 1, + description: 'quarter-finals', + start: '2014-07-04 17:00' + }, + { + player1: 'Argentina', + abbr1: 'ar', + score1: 1, + player2: 'Belgium', + abbr2: 'be', + score2: 0, + description: 'quarter-finals', + start: '2014-07-05 13:00' + }, + { + player1: 'Netherlands', + abbr1: 'nl', + score1: '0 (4)', + player2: 'Costa Rica', + abbr2: 'cr', + score2: '0 (3)', + description: 'quarter-finals', + start: '2014-07-05 17:00' + }, + + // semi-finals + { + player1: 'Brazil', + abbr1: 'br', + score1: 1, + player2: 'Germany', + abbr2: 'de', + score2: 7, + description: 'semi-finals', + start: '2014-07-08 17:00' + }, + { + player1: 'Netherlands', + abbr1: 'nl', + score1: '0 (2)', + player2: 'Argentina', + abbr2: 'ar', + score2: '0 (4)', + description: 'semi-finals', + start: '2014-07-09 17:00' + }, + + // final + { + player1: 'Germany', + score1: 1, + abbr1: 'de', + player2: 'Argentina', + abbr2: 'ar', + score2: 0, + description: 'final', + start: '2014-07-13 16:00' + } + ]); + + // Configuration for the Timeline + var options = { + // specify a template for the items + template: template + }; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html>
\ No newline at end of file |
