@ -3,32 +3,23 @@
< head > < head >
< title > Timeline | RTL example< / title > < title > Timeline | RTL example< / title >
< style >
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
< / style >
< script src = "../../../dist/vis.js" > < / script > < script src = "../../../dist/vis.js" > < / script >
< link href = "../../../dist/vis-timeline-graph2d.min.css" rel = "stylesheet" type = "text/css" / > < link href = "../../../dist/vis-timeline-graph2d.min.css" rel = "stylesheet" type = "text/css" / >
< script src = "../../googleAnalytics.js" > < / script > < script src = "../../googleAnalytics.js" > < / script >
< / head > < / head >
< body > < 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 > < 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 // add items to the DataSet
items.add([ items.add([
{id: 1, content: '2014-01-23 < br > start', start: '2014-01-23'}, {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'} {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 = { var options = {
start: '2014-01-10', start: '2014-01-10',
end: '2014-02-10', end: '2014-02-10',
height: '300px', 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 > < / script >
< / body > < / body >
Yotam Berkowitz
8 years ago