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.
 
 
 

120 lines
2.9 KiB

<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Group example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</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.3.1/moment.min.js"></script>
<script src="../dist/vis.js"></script>
<link href="../dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<label for="orientation">Orientation</label>
<select id="orientation">
<option value="top">top</option>
<option value="bottom" selected>bottom</option>
</select>
</div>
<script>
var orientation = document.getElementById('orientation');
orientation.onchange = function () {
timeline.setOptions({
orientation: orientation.value
});
};
</script>
<br>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var groupCount = 3;
var itemCount = 20;
// create a data set with groups
var names = ['John', 'Alston', 'Lee', 'Grant'];
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({id: g, content: names[g]});
}
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add('hours', Math.random() * 200);
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
group: group,
content: 'item ' + i +
' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
start: start,
type: 'box'
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
editable: true,
//height: 200,
groupOrder: 'content'
};
console.time('create timeline');
var timeline = new vis.Timeline(container);
console.timeEnd('create timeline');
console.time('set options');
timeline.setOptions(options);
console.timeEnd('set options');
console.time('set groups');
timeline.setGroups(groups);
console.timeEnd('set groups');
console.time('set items');
timeline.setItems(items);
console.timeEnd('set items');
timeline.on('select', function (selection) {
console.log('select', selection);
});
/*
timeline.on('rangechange', function (range) {
console.log('rangechange', range);
});
timeline.on('rangechanged', function (range) {
console.log('rangechanged', range);
});
*/
items.on('add', console.log.bind(console));
items.on('update', console.log.bind(console));
items.on('remove', console.log.bind(console));
groups.on('add', console.log.bind(console));
groups.on('update', console.log.bind(console));
groups.on('remove', console.log.bind(console));
</script>
</body>
</html>