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.
 
 
 

70 lines
1.6 KiB

<!DOCTYPE HTML>
<html>
<head>
<title>Timeline demo - a lot of data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
#visualization .itemset {
/*background: rgba(255, 255, 0, 0.5);*/
}
</style>
<script src="../../vis.js"></script>
</head>
<body>
<p>
Test with a lot of data
</p>
<p>
<label for="count">Number of items</label>
<input id="count" value="100">
<input id="draw" type="button" value="draw">
</p>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var data = new vis.DataSet({
fieldTypes: {
start: 'Date',
end: 'Date'
}
});
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i).toDate()});
}
data.clear();
data.add(newData);
}
createData();
document.getElementById('draw').onclick = createData;
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 7).valueOf()
};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>