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.
126 lines
3.2 KiB
126 lines
3.2 KiB
<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 types = [ 'box', 'point', 'range', 'background']
|
|
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);
|
|
|
|
var type = types[Math.floor(4 * Math.random())]
|
|
|
|
items.add({
|
|
id: order,
|
|
group: truck,
|
|
start: start,
|
|
end: end,
|
|
type: type,
|
|
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>
|