1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<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>
|
