RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/timeline/other/performance.html ADDED

@@ -0,0 +1,79 @@
+<!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="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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>

data/examples_for_vis/timeline/other/requirejs/requirejs_example.html ADDED

@@ -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" />
+</head>
+<body>
+<p>
+  This example shows how to load the vis.js library using require.js.
+</p>
+<div id="visualization"></div>
+</body>
+</html>

data/examples_for_vis/timeline/other/requirejs/scripts/main.js ADDED

@@ -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);
+});

data/examples_for_vis/timeline/other/requirejs/scripts/require.js ADDED

@@ -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);

data/examples_for_vis/timeline/other/rtl.html ADDED

@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | RTL example</title>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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 = jQuery.extend(options, {})
+    var timeline1 = new vis.Timeline(container1, items, options1);
+    var options2 = jQuery.extend(options, {
+      rtl: true
+    })
+    var timeline2 = new vis.Timeline(container2, items, options2);
+  </script>
+</body>
+</html>

data/examples_for_vis/timeline/other/stressPerformance.html ADDED

@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+  This example is used mainly for developers to test performance issues by controlling number of groups,
+  number of items and their types.
+ -->
+<html>
+<head>
+  <title>Timeline | Stress Performance example</title>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+  <div id="visualization"></div>
+</body>
+<script>
+  var now = moment();
+  var groupCount = 20;
+  var itemCount = 400;
+  // create a data set with groups
+  var groups = new vis.DataSet();
+  for (var g = 0; g < groupCount; g++) {
+    groups.add({
+      id: g,
+      content: "group " + g
+    });
+  }
+  var types = ['point', 'range', 'box', 'background']
+  // create a dataset with items
+  var items = new vis.DataSet();
+  for (var i = 0; i < itemCount; i++) {
+    var start = now.clone().add(Math.random() * 180, 'days');
+    var end = start.clone().add(Math.random() * 30, 'days');
+    var group = Math.floor(Math.random() * groupCount);
+    items.add({
+      id: i,
+      type: types[Math.floor(Math.random() * types.length)],
+      group: group,
+      content: '' + i,
+      start: start,
+      end: end
+    });
+  }
+  // create visualization
+  var container = document.getElementById('visualization');
+  var options = {
+    width: '100%',
+    showCurrentTime: false,
+    stack: true,
+    selectable: true,
+    editable: true,
+  };
+  var timeline = new vis.Timeline(container);
+  timeline.setOptions(options);
+  timeline.setGroups(groups);
+  timeline.setItems(items);
+</script>
+</html>

data/examples_for_vis/timeline/other/timezone.html ADDED

@@ -0,0 +1,98 @@
+<!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="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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>

data/examples_for_vis/timeline/other/usingReact.html ADDED

@@ -0,0 +1,68 @@
+<!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="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/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=1 000; var items=n ew vis.DataSet();
+            var itemsPerGroup=M ath.round(numberOfItems/numberOfGroups); for (var truck=0 ; truck < numberOfGroups; truck++)
+            { var date=n ew Date(); for (var order=0 ; order < itemsPerGroup; order++) { date.setHours(date.getHours() + 4 *
+            (Math.random() < 0.2)); var start=n ew Date(date); date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
+            var end=n ew Date(date); items.add({ id: order + itemsPerGroup * truck, group: truck, start: start, end: end, content:
+            'Order ' + order }); } } var GroupTemplate=R eact.createClass({ render: function() { var { group }=t his.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) { if (!item) { return } ReactDOM.unmountComponentAtNode(element);
+            return ReactDOM.render(
+            <ItemTemplate item={item} />, element); }, groupTemplate: function (group, element) { if (!group) { return } 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>