vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

78 lines
2.0 KiB

<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Item ordering</title>
<style type="text/css">
body, html {
font-family: sans-serif;
}
p {
max-width: 800px;
}
</style>
<script src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Item ordering</h1>
<p>
By default, the items displayed on the Timeline are unordered. They are
stacked in the order that they where loaded. This means that way items are
stacked can change while moving and zooming the Timeline.
</p>
<p>
To display and stack the items in a controlled order, you can provide a
custom sorting function via the configuration option <code>order</code>.
This is only suitable for relatively small amounts of items, as it forces
the Timeline to order and re-stack all items with every redraw.
</p>
<p>
<label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label>
</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();
var date = vis.moment('2015-03-02');
for (var i = 0; i < 20; i++) {
date.add(Math.round(Math.random() * 2), 'hour');
items.add({
id: i,
content: 'Item ' + i,
start: date.clone(),
end: date.clone().add(2 + Math.round(Math.random() * 2), 'hour')
});
}
function customOrder (a, b) {
// order by id
return a.id - b.id;
}
// Configuration for the Timeline
var options = {
order: customOrder,
editable: true,
margin: {item: 0}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
var ordering = document.getElementById('ordering');
ordering.onchange = function () {
timeline.setOptions({
order: ordering.checked ? customOrder: null
});
};
</script>
</body>
</html>