|
@ -0,0 +1,122 @@ |
|
|
|
|
|
<html> |
|
|
|
|
|
<head> |
|
|
|
|
|
<title>Timeline | A lot of grouped data</title> |
|
|
|
|
|
|
|
|
|
|
|
<script src="../../../docs/js/jquery.min.js"></script> |
|
|
|
|
|
<script src="../../../dist/vis.js"></script> |
|
|
|
|
|
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> |
|
|
|
|
|
|
|
|
|
|
|
<style type="text/css"> |
|
|
|
|
|
body { |
|
|
|
|
|
color: #4D4D4D; |
|
|
|
|
|
font: 10pt arial; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
<script src="../../googleAnalytics.js"></script> |
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
|
|
<body onresize="/*timeline.checkResize();*/"> |
|
|
|
|
|
<h1>Timeline vertical visibility</h1> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button onclick="showVisibleItems()">Show current visible items</button> |
|
|
|
|
|
<div> |
|
|
|
|
|
<h2>visible items:</h2> |
|
|
|
|
|
<h3 id="visibleItemsContainer"></h3> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div id="mytimeline"></div> |
|
|
|
|
|
<br> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
|
function showVisibleItems() { |
|
|
|
|
|
var a = timeline.getVisibleItems(); |
|
|
|
|
|
console.log(a); |
|
|
|
|
|
document.getElementById("visibleItemsContainer").innerHTML = "" |
|
|
|
|
|
document.getElementById("visibleItemsContainer").innerHTML += a; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// get selected item count from url parameter |
|
|
|
|
|
var count = 1000; |
|
|
|
|
|
|
|
|
|
|
|
// create groups |
|
|
|
|
|
var groups = new vis.DataSet([ |
|
|
|
|
|
{id: 1, content: 'Truck 1'}, |
|
|
|
|
|
{id: 2, content: 'Truck 2'}, |
|
|
|
|
|
{id: 3, content: 'Truck 3'}, |
|
|
|
|
|
{id: 4, content: 'Truck 4'}, |
|
|
|
|
|
{id: 5, content: 'Truck 5'}, |
|
|
|
|
|
{id: 6, content: 'Truck 6'}, |
|
|
|
|
|
{id: 7, content: 'Truck 7'}, |
|
|
|
|
|
{id: 8, content: 'Truck 8'}, |
|
|
|
|
|
{id: 9, content: 'Truck 9'}, |
|
|
|
|
|
{id: 10, content: 'Truck 10'}, |
|
|
|
|
|
{id: 11, content: 'Truck 11'}, |
|
|
|
|
|
{id: 12, content: 'Truck 12'}, |
|
|
|
|
|
{id: 13, content: 'Truck 13'}, |
|
|
|
|
|
{id: 14, content: 'Truck 14'}, |
|
|
|
|
|
{id: 15, content: 'Truck 15'}, |
|
|
|
|
|
{id: 16, content: 'Truck 16'}, |
|
|
|
|
|
{id: 17, content: 'Truck 17'}, |
|
|
|
|
|
{id: 18, content: 'Truck 18'}, |
|
|
|
|
|
{id: 19, content: 'Truck 19'}, |
|
|
|
|
|
{id: 20, content: 'Truck 20'}, |
|
|
|
|
|
{id: 21, content: 'Truck 21'}, |
|
|
|
|
|
{id: 22, content: 'Truck 22'}, |
|
|
|
|
|
{id: 23, content: 'Truck 23'}, |
|
|
|
|
|
{id: 24, content: 'Truck 24'}, |
|
|
|
|
|
{id: 25, content: 'Truck 25'}, |
|
|
|
|
|
|
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
|
|
// create items |
|
|
|
|
|
var items = new vis.DataSet(); |
|
|
|
|
|
|
|
|
|
|
|
var order = 1; |
|
|
|
|
|
var truck = 1; |
|
|
|
|
|
for (var j = 0; j < 25; j++) { |
|
|
|
|
|
var date = new Date(); |
|
|
|
|
|
for (var i = 0; i < count/25; i++) { |
|
|
|
|
|
date.setHours(date.getHours() + 4 * (Math.random() < 0.2)); |
|
|
|
|
|
var start = new Date(date); |
|
|
|
|
|
|
|
|
|
|
|
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); |
|
|
|
|
|
var end = new Date(date); |
|
|
|
|
|
|
|
|
|
|
|
items.add({ |
|
|
|
|
|
id: order, |
|
|
|
|
|
group: truck, |
|
|
|
|
|
start: start, |
|
|
|
|
|
end: end, |
|
|
|
|
|
content: 'Order ' + order |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
order++; |
|
|
|
|
|
} |
|
|
|
|
|
truck++; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// specify options |
|
|
|
|
|
var options = { |
|
|
|
|
|
stack: true, |
|
|
|
|
|
maxHeight: 400, |
|
|
|
|
|
start: new Date(), |
|
|
|
|
|
end: new Date(1000*60*60*24 + (new Date()).valueOf()), |
|
|
|
|
|
editable: true, |
|
|
|
|
|
margin: { |
|
|
|
|
|
item: 10, // minimal margin between items |
|
|
|
|
|
axis: 5 // minimal margin between items and the axis |
|
|
|
|
|
}, |
|
|
|
|
|
orientation: 'top' |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// create a Timeline |
|
|
|
|
|
var container = document.getElementById('mytimeline'); |
|
|
|
|
|
timeline = new vis.Timeline(container, null, options); |
|
|
|
|
|
timeline.setGroups(groups); |
|
|
|
|
|
timeline.setItems(items); |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
</html> |