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