1 files changed, 15 insertions, 42 deletions
diff --git a/www/lib/vis/examples/timeline/other/rtl.html b/www/lib/vis/examples/timeline/other/rtl.html
index 63fc79ad..f53b1802 100644
--- a/www/lib/vis/examples/timeline/other/rtl.html
+++ b/www/lib/vis/examples/timeline/other/rtl.html
@@ -3,32 +3,23 @@
 <head>
   <title>Timeline | RTL example</title>
 
-  <style>
-    body, html {
-      font-family: arial, sans-serif;
-      font-size: 11pt;
-    }
-  </style>
-
   <script src="../../../dist/vis.js"></script>
-  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
   <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 
-<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p>
+<h1>Timeline RTL support</h1>
+
+<h2>Using <code>dir = "rtl"</code> in any parent node</h2>
+<div id="timeline1" dir="rtl"></div>
 
-<div id="visualization"></div>
+<h2>Using <code>options.rtl = true</code></h2>
+<div id="timeline2"></div>
 
 <script>
-  // create a dataset with items
-  // we specify the type of the fields `start` and `end` here to be strings
-  // containing an ISO date. The fields will be outputted as ISO dates
-  // automatically getting data from the DataSet via items.get().
-  var items = new vis.DataSet({
-    type: { start: 'ISODate', end: 'ISODate' }
-  });
 
+  var items =  new vis.DataSet();
   // add items to the DataSet
   items.add([
     {id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'},
@@ -39,38 +30,20 @@
     {id: 6, content: '2014-01-26', start: '2014-01-26'}
   ]);
 
-  // log changes to the console
-  items.on('*', function (event, properties) {
-    console.log(event, properties.items);
-  });
+  var container1 = document.getElementById('timeline1');
+  var container2 = document.getElementById('timeline2');
 
-  var container = document.getElementById('visualization');
   var options = {
     start: '2014-01-10',
     end: '2014-02-10',
     height: '300px',
-    rtl: true,
-    // allow selecting multiple items using ctrl+click, shift+click, or hold.
-    multiselect: true,
-
-    // allow manipulation of items
-    editable: true,
-
-    /* alternatively, enable/disable individual actions:
-
-    editable: {
-      add: true,
-      updateTime: true,
-      updateGroup: true,
-      remove: true
-    },
-
-    */
-
-    showCurrentTime: true
   };
 
-  var timeline = new vis.Timeline(container, items, options);
+  var options1 = Object.assign({}, options)
+  var timeline1 = new vis.Timeline(container1, items, options1);
+
+  var options2 = Object.assign({rtl: true}, options)
+  var timeline2 = new vis.Timeline(container2, items, options2);
 
 </script>
 </body>