diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/editing')
6 files changed, 135 insertions, 5 deletions
diff --git a/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html b/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html index 65a9a510..b1c8ef75 100644 --- a/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html +++ b/www/lib/vis/examples/timeline/editing/customSnappingOfItems.html @@ -4,7 +4,7 @@ <title>Timeline | Custom snapping</title> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/editingItems.html b/www/lib/vis/examples/timeline/editing/editingItems.html index 41f6e7c0..186a363c 100644 --- a/www/lib/vis/examples/timeline/editing/editingItems.html +++ b/www/lib/vis/examples/timeline/editing/editingItems.html @@ -11,7 +11,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html b/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html index e5a7d864..7c15d878 100644 --- a/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html +++ b/www/lib/vis/examples/timeline/editing/editingItemsCallbacks.html @@ -14,7 +14,7 @@ <link href="http://t4t5.github.io/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css"/> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/individualEditableItems.html b/www/lib/vis/examples/timeline/editing/individualEditableItems.html index 54312e0d..d6210305 100644 --- a/www/lib/vis/examples/timeline/editing/individualEditableItems.html +++ b/www/lib/vis/examples/timeline/editing/individualEditableItems.html @@ -24,7 +24,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> <body> diff --git a/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html b/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html new file mode 100644 index 00000000..18380beb --- /dev/null +++ b/www/lib/vis/examples/timeline/editing/tooltipOnItemChange.html @@ -0,0 +1,130 @@ +<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> + + <script src="../../googleAnalytics.js"></script> +</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> diff --git a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html index aedb885f..985551ee 100644 --- a/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html +++ b/www/lib/vis/examples/timeline/editing/updateDataOnEvent.html @@ -14,7 +14,7 @@ </style> <script src="../../../dist/vis.js"></script> - <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> <script src="../../googleAnalytics.js"></script> </head> |