|
|
- <html>
- <head>
- <title>Timeline | Tooltip on item onUpdateTime Option</title>
-
- <script src="../../../dist/vis.js"></script>
- <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
-
- <style type="text/css">
- .vis-item .vis-onUpdateTime-tooltip {
- border-radius: 4px;
- }
- </style>
-
-
- </head>
-
- <body>
-
- <h1>Timeline Tooltip on item onUpdateTime Option</h1>
-
- <h2>With <code>tooltipOnItemUpdateTime: true</code>
- </h2>
-
- <div id="mytimeline1"></div>
-
- <h2>With <code>tooltipOnItemUpdateTime: { template: [Function] }</code>
- </h2>
-
- <div id="mytimeline2"></div>
-
-
- <h2>With groups</h2>
-
- <div id="mytimeline3"></div>
- <script>
-
- // create items
- var numberOfItems = 10;
- var items = new vis.DataSet();
- var types = [ 'box', 'point', 'range']
-
-
- for (var order = 0; order < numberOfItems; order++) {
- var date = vis.moment();
-
-
- date.add(Math.round(Math.random() * 2), 'hour');
- items.add({
- id: order,
- type: types[Math.floor(3 * Math.random())],
- content: 'Item ' + order,
- start: date.clone().add(order + 1, 'hour'),
- end: date.clone().add(order + 3, 'hour')
- });
- }
-
- // specify options
- var options = {
- multiselect: true,
- maxHeight: 400,
- start: new Date((new Date()).valueOf() - 10000000),
- end: new Date(1000*60*60*24 + (new Date()).valueOf()),
- editable: true
- };
-
- var options1 = Object.assign({
- tooltipOnItemUpdateTime: true
- }, options)
- var container1 = document.getElementById('mytimeline1');
- timeline1 = new vis.Timeline(container1, items, null, options1);
-
- var options2 = Object.assign({
- orientation: 'top',
- tooltipOnItemUpdateTime: {
- template: function(item) {
- return 'html template for tooltip with <b>item.start</b>: ' + item.start;
- }
- }
- }, options)
- var container2 = document.getElementById('mytimeline2');
- timeline2 = new vis.Timeline(container2, items, null, options2);
-
-
- // create groups
- var numberOfGroups = 25;
- var groups = new vis.DataSet()
- for (var i = 0; i < numberOfGroups; i++) {
- groups.add({
- id: i,
- content: 'Truck ' + i
- })
- }
-
- // create items for groups
- var numberOfItems = 1000;
- var itemsWithGroups = new vis.DataSet();
-
- var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);
-
- for (var truck = 0; truck < numberOfGroups; truck++) {
- var date = new Date();
- for (var order = 0; order < itemsPerGroup; order++) {
- 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);
-
- itemsWithGroups.add({
- id: order + itemsPerGroup * truck,
- group: truck,
- start: start,
- end: end,
- content: 'Order ' + order
- });
- }
- }
-
-
- var options3 = Object.assign({
- orientation: 'top',
- tooltipOnItemUpdateTime: true
- }, options)
- var container3 = document.getElementById('mytimeline3');
- timeline3 = new vis.Timeline(container3, itemsWithGroups, groups, options3);
-
- </script>
-
- </body>
- </html>
|
