diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/other')
12 files changed, 699 insertions, 0 deletions
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..37310165 --- /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.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..f852fffb --- /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.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..7938f0bd --- /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.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/groupsPerformance.html b/www/lib/vis/examples/timeline/other/groupsPerformance.html new file mode 100644 index 00000000..663f9968 --- /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.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..9b2f359a --- /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.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/localization.html b/www/lib/vis/examples/timeline/other/localization.html new file mode 100644 index 00000000..39080c89 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/localization.html @@ -0,0 +1,66 @@ +<!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.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="nl">nl</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>
\ No newline at end of file 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..4f914354 --- /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.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..d4531591 --- /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.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..63fc79ad --- /dev/null +++ b/www/lib/vis/examples/timeline/other/rtl.html @@ -0,0 +1,77 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | RTL example</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + </style> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <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: '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'} + ]); + + // 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', + rtl: true, + // allow selecting multiple items using ctrl+click, shift+click, or hold. + multiselect: true, + + // allow manipulation of items + editable: true, + + /* alternatively, enable/disable individual actions: + + editable: { + add: true, + updateTime: true, + updateGroup: true, + remove: true + }, + + */ + + showCurrentTime: true + }; + + var timeline = new vis.Timeline(container, items, options); + +</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..fd7a22c0 --- /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.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 |