diff options
Diffstat (limited to 'www/lib/vis/examples/timeline')
46 files changed, 908 insertions, 110 deletions
diff --git a/www/lib/vis/examples/timeline/basicUsage.html b/www/lib/vis/examples/timeline/basicUsage.html index 16ea4d4f..8ad5fda1 100644 --- a/www/lib/vis/examples/timeline/basicUsage.html +++ b/www/lib/vis/examples/timeline/basicUsage.html @@ -10,7 +10,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/dataHandling/dataSerialization.html b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html index 1b3fcfa7..79b6aebf 100644 --- a/www/lib/vis/examples/timeline/dataHandling/dataSerialization.html +++ b/www/lib/vis/examples/timeline/dataHandling/dataSerialization.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> @@ -35,12 +35,12 @@ <textarea id="data"> [ - {"id": 1, "content": "item 1<br>start", "start": "2014-01-23"}, - {"id": 2, "content": "item 2", "start": "2014-01-18"}, - {"id": 3, "content": "item 3", "start": "2014-01-21"}, - {"id": 4, "content": "item 4", "start": "2014-01-19", "end": "2014-01-24"}, - {"id": 5, "content": "item 5", "start": "2014-01-28", "type": "point"}, - {"id": 6, "content": "item 6", "start": "2014-01-26"} + {"id": 1, "content": "item 1", "start": "2014-01-01 01:00:00"}, + {"id": 2, "content": "item 2", "start": "2014-01-01 02:00:00"}, + {"id": 3, "content": "item 3", "start": "2014-01-01 03:00:00"}, + {"id": 4, "content": "item 4", "start": "2014-01-01 04:00:00", "end": "2014-01-01 04:30:00"}, + {"id": 5, "content": "item 5", "start": "2014-01-01 05:00:00", "type": "point"}, + {"id": 6, "content": "item 6", "start": "2014-01-01 06:00:00"} ] </textarea> @@ -89,9 +89,10 @@ function saveData() { // get the data from the DataSet + // // Note that we specify the output type of the fields start and end - // as ISODate, which is safely serializable. Other serializable types - // are Number (unix timestamp) or ASPDate. + // as "ISODate", which is safely serializable. Other serializable types + // are "Number" (unix timestamp), "ASPDate" or "String" (without timezone!). // // Alternatively, it is possible to configure the DataSet to convert // the output automatically to ISODates like: @@ -118,4 +119,4 @@ loadData(); </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html index a5002726..f594d2aa 100644 --- a/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html +++ b/www/lib/vis/examples/timeline/dataHandling/loadExternalData.html @@ -13,7 +13,7 @@ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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/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> diff --git a/www/lib/vis/examples/timeline/groups/groups.html b/www/lib/vis/examples/timeline/groups/groups.html index 1fe6938e..56bad599 100644 --- a/www/lib/vis/examples/timeline/groups/groups.html +++ b/www/lib/vis/examples/timeline/groups/groups.html @@ -20,7 +20,7 @@ <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <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/groups/groupsEditable.html b/www/lib/vis/examples/timeline/groups/groupsEditable.html index 25ac3a57..a7d275fa 100644 --- a/www/lib/vis/examples/timeline/groups/groupsEditable.html +++ b/www/lib/vis/examples/timeline/groups/groupsEditable.html @@ -23,7 +23,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/groups/groupsOrdering.html b/www/lib/vis/examples/timeline/groups/groupsOrdering.html index 8b9d03e2..b4da7755 100644 --- a/www/lib/vis/examples/timeline/groups/groupsOrdering.html +++ b/www/lib/vis/examples/timeline/groups/groupsOrdering.html @@ -17,7 +17,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/groups/subgroups.html b/www/lib/vis/examples/timeline/groups/subgroups.html index 770a88d8..0056705d 100644 --- a/www/lib/vis/examples/timeline/groups/subgroups.html +++ b/www/lib/vis/examples/timeline/groups/subgroups.html @@ -21,7 +21,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/groups/verticalItemsHide.html b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html new file mode 100644 index 00000000..1f38fffe --- /dev/null +++ b/www/lib/vis/examples/timeline/groups/verticalItemsHide.html @@ -0,0 +1,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> diff --git a/www/lib/vis/examples/timeline/interaction/animateWindow.html b/www/lib/vis/examples/timeline/interaction/animateWindow.html index 5ec8d7bd..40a416f1 100644 --- a/www/lib/vis/examples/timeline/interaction/animateWindow.html +++ b/www/lib/vis/examples/timeline/interaction/animateWindow.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> <body> diff --git a/www/lib/vis/examples/timeline/interaction/clickToUse.html b/www/lib/vis/examples/timeline/interaction/clickToUse.html index 97d465f6..d00f4428 100644 --- a/www/lib/vis/examples/timeline/interaction/clickToUse.html +++ b/www/lib/vis/examples/timeline/interaction/clickToUse.html @@ -18,7 +18,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/interaction/eventListeners.html b/www/lib/vis/examples/timeline/interaction/eventListeners.html index 53f94da6..f3a9bcc5 100644 --- a/www/lib/vis/examples/timeline/interaction/eventListeners.html +++ b/www/lib/vis/examples/timeline/interaction/eventListeners.html @@ -10,7 +10,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> @@ -19,6 +19,7 @@ </p> <div id="visualization"></div> <p></p> + <div id="hoveredItem"></div> <div id="log"></div> <script type="text/javascript"> @@ -47,6 +48,15 @@ logEvent('select', properties); }); + timeline.on('itemover', function (properties) { + logEvent('itemover', properties); + setHoveredItem(properties.item); + }); + timeline.on('itemout', function (properties) { + logEvent('itemout', properties); + setHoveredItem('none'); + }); + items.on('*', function (event, properties) { logEvent(event, properties); }); @@ -59,6 +69,11 @@ log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg); } + function setHoveredItem(id) { + var hoveredItem = document.getElementById('hoveredItem'); + hoveredItem.innerHTML = 'hoveredItem=' + id; + } + </script> </body> </html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html b/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html index d6632187..4eadd36a 100644 --- a/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.html +++ b/www/lib/vis/examples/timeline/interaction/limitMoveAndZoom.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/interaction/navigationMenu.html b/www/lib/vis/examples/timeline/interaction/navigationMenu.html index 07ec66c1..cb7c19ad 100755 --- a/www/lib/vis/examples/timeline/interaction/navigationMenu.html +++ b/www/lib/vis/examples/timeline/interaction/navigationMenu.html @@ -23,7 +23,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> @@ -69,26 +69,12 @@ }); } - /** - * Zoom the timeline a given percentage in or out - * @param {Number} percentage For example 0.1 (zoom out) or -0.1 (zoom in) - */ - function zoom (percentage) { - var range = timeline.getWindow(); - var interval = range.end - range.start; - - timeline.setWindow({ - start: range.start.valueOf() - interval * percentage, - end: range.end.valueOf() + interval * percentage - }); - } - // attach events to the navigation buttons - document.getElementById('zoomIn').onclick = function () { zoom(-0.2); }; - document.getElementById('zoomOut').onclick = function () { zoom( 0.2); }; + document.getElementById('zoomIn').onclick = function () { timeline.zoomIn( 0.2); }; + document.getElementById('zoomOut').onclick = function () { timeline.zoomOut( 0.2); }; document.getElementById('moveLeft').onclick = function () { move( 0.2); }; document.getElementById('moveRight').onclick = function () { move(-0.2); }; </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/timeline/interaction/setSelection.html b/www/lib/vis/examples/timeline/interaction/setSelection.html index b68fb022..f6a038ce 100644 --- a/www/lib/vis/examples/timeline/interaction/setSelection.html +++ b/www/lib/vis/examples/timeline/interaction/setSelection.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/items/backgroundAreas.html b/www/lib/vis/examples/timeline/items/backgroundAreas.html index 5f6d547c..3ec18a66 100644 --- a/www/lib/vis/examples/timeline/items/backgroundAreas.html +++ b/www/lib/vis/examples/timeline/items/backgroundAreas.html @@ -15,7 +15,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/items/backgroundAreasWithGroups.html b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html index 409f3e54..f8a78608 100644 --- a/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html +++ b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.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/items/htmlContents.html b/www/lib/vis/examples/timeline/items/htmlContents.html index 6a818c30..d790133a 100644 --- a/www/lib/vis/examples/timeline/items/htmlContents.html +++ b/www/lib/vis/examples/timeline/items/htmlContents.html @@ -17,7 +17,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> diff --git a/www/lib/vis/examples/timeline/items/itemOrdering.html b/www/lib/vis/examples/timeline/items/itemOrdering.html index e8cafdc9..323c9501 100644 --- a/www/lib/vis/examples/timeline/items/itemOrdering.html +++ b/www/lib/vis/examples/timeline/items/itemOrdering.html @@ -13,7 +13,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> diff --git a/www/lib/vis/examples/timeline/items/pointItems.html b/www/lib/vis/examples/timeline/items/pointItems.html index 67082cc0..68201801 100755 --- a/www/lib/vis/examples/timeline/items/pointItems.html +++ b/www/lib/vis/examples/timeline/items/pointItems.html @@ -10,7 +10,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> @@ -49,7 +49,7 @@ var options = { // Set global item type. Type can also be specified for items individually - // Available types: 'box' (default), 'point', 'range', 'rangeoverflow' + // Available types: 'box' (default), 'point', 'range' type: 'point', showMajorLabels: false }; diff --git a/www/lib/vis/examples/timeline/items/rangeOverflowItem.html b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html index 12582a69..fbea2f37 100644 --- a/www/lib/vis/examples/timeline/items/rangeOverflowItem.html +++ b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html @@ -4,7 +4,7 @@ <title>Timeline | Range overflow</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" /> <style type="text/css"> body, html { diff --git a/www/lib/vis/examples/timeline/other/customTimeBars.html b/www/lib/vis/examples/timeline/other/customTimeBars.html index 37310165..2c1a5f7c 100644 --- a/www/lib/vis/examples/timeline/other/customTimeBars.html +++ b/www/lib/vis/examples/timeline/other/customTimeBars.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/other/dataAttributes.html b/www/lib/vis/examples/timeline/other/dataAttributes.html index f852fffb..0aa1f14e 100644 --- a/www/lib/vis/examples/timeline/other/dataAttributes.html +++ b/www/lib/vis/examples/timeline/other/dataAttributes.html @@ -10,7 +10,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/other/dataAttributesAll.html b/www/lib/vis/examples/timeline/other/dataAttributesAll.html index 7938f0bd..5b926b54 100644 --- a/www/lib/vis/examples/timeline/other/dataAttributesAll.html +++ b/www/lib/vis/examples/timeline/other/dataAttributesAll.html @@ -10,7 +10,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/other/drag&drop.html b/www/lib/vis/examples/timeline/other/drag&drop.html new file mode 100644 index 00000000..81bcb1f1 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/drag&drop.html @@ -0,0 +1,131 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"/> + <title>Timeline | Drag & Drop</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> + + <style type="text/css"> + li.item { + list-style: none; + width: 150px; + color: #1A1A1A; + background-color: #D5DDF6; + border: 1px solid #97B0F8; + border-radius: 2px; + margin-bottom: 5px; + padding: 5px 12px; + } + li.item:before { + content: "≣"; + font-family: Arial, sans-serif; + display: inline-block; + font-size: inherit; + cursor: move; + } + </style> +</head> + +<body> + +<h1>Timeline Drag & Drop Example</h1> + +<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p> + +<div id="mytimeline" ></div> +<div> + <h3>Items:</h3> + <ul class="items"> + <li draggable="true" class="item"> + item 1 - box + </li> + <li draggable="true" class="item"> + item 2 - point + </li> + <li draggable="true" class="item"> + item 3 - range + </li> + </ul> +</div> + +<script> + + // create groups + var numberOfGroups = 3; + var groups = new vis.DataSet() + for (var i = 0; i < numberOfGroups; i++) { + groups.add({ + id: i, + content: 'Truck ' + i + }) + } + + // create items + var numberOfItems = 10; + var items = 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); + + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + // specify options + var options = { + stack: true, + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + orientation: 'top' + }; + + // create a Timeline + var container = document.getElementById('mytimeline'); + timeline1 = new vis.Timeline(container, items, groups, options); + + function handleDragStart(event) { + dragSrcEl = event.target; + + event.dataTransfer.effectAllowed = 'move'; + var itemType = event.target.innerHTML.split('-')[1].trim(); + var item = { + id: new Date(), + type: itemType, + content: event.target.innerHTML.split('-')[0].trim(), + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + }; + + event.dataTransfer.setData("text/plain", JSON.stringify(item)); + } + + var items = document.querySelectorAll('.items .item'); + + for (var i = items.length - 1; i >= 0; i--) { + var item = items[i]; + item.addEventListener('dragstart', handleDragStart.bind(this), false); + } + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/other/functionLabelFormats.html b/www/lib/vis/examples/timeline/other/functionLabelFormats.html new file mode 100644 index 00000000..9de9023b --- /dev/null +++ b/www/lib/vis/examples/timeline/other/functionLabelFormats.html @@ -0,0 +1,141 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Custom function label format example</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + #visualization { + box-sizing: border-box; + width: 100%; + height: 300px; + } + </style> + + <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js --> + <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<p> + This example demonstrate using custom function label formats. +</p> +<div id="visualization"></div> + +<script> + var now = moment().minutes(0).seconds(0).milliseconds(0); + var groupCount = 3; + var itemCount = 20; + + // create a data set with groups + var names = ['John', 'Alston', 'Lee', 'Grant']; + var groups = new vis.DataSet(); + for (var g = 0; g < groupCount; g++) { + groups.add({id: g, content: names[g]}); + } + + // create a dataset with items + var items = new vis.DataSet(); + for (var i = 0; i < itemCount; i++) { + var start = now.clone().add(Math.random() * 200, 'hours'); + var group = Math.floor(Math.random() * groupCount); + items.add({ + id: i, + group: group, + content: 'item ' + i + + ' <span style="color:#97B0F8;">(' + names[group] + ')</span>', + start: start, + type: 'box' + }); + } + + // create visualization + var container = document.getElementById('visualization'); + var options = { + format: { + minorLabels: function(date, scale, step) { + var now = new Date(); + var ago = now - date; + var divider; + switch (scale) { + case 'millisecond': + divider = 1; + break; + case 'second': + divider = 1000; + break; + case 'minute': + divider = 1000 * 60; + break; + case 'hour': + divider = 1000 * 60 * 60; + break; + case 'day': + divider = 1000 * 60 * 60 * 24; + break; + case 'weekday': + divider = 1000 * 60 * 60 * 24 * 7; + break; + case 'month': + divider = 1000 * 60 * 60 * 24 * 30; + break; + case 'year': + divider = 1000 * 60 * 60 * 24 * 365; + break; + default: + return new Date(date); + } + return (Math.round(ago * step / divider)) + " " + scale + "s ago" + }, + majorLabels: function(date, scale, step) { + var now = new Date(); + var ago = now - date; + var divider; + switch (scale) { + case 'millisecond': + divider = 1; + break; + case 'second': + divider = 1000; + break; + case 'minute': + divider = 1000 * 60; + break; + case 'hour': + divider = 1000 * 60 * 60; + break; + case 'day': + divider = 1000 * 60 * 60 * 24; + break; + case 'weekday': + divider = 1000 * 60 * 60 * 24 * 7; + break; + case 'month': + divider = 1000 * 60 * 60 * 24 * 30; + break; + case 'year': + divider = 1000 * 60 * 60 * 24 * 365; + break; + default: + return new Date(date); + } + return (Math.round(ago * step / divider)) + " " + scale + "s ago" + } + } + }; + + var timeline = new vis.Timeline(container); + timeline.setOptions(options); + timeline.setGroups(groups); + timeline.setItems(items); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/other/groupsPerformance.html b/www/lib/vis/examples/timeline/other/groupsPerformance.html index 663f9968..1b16af30 100644 --- a/www/lib/vis/examples/timeline/other/groupsPerformance.html +++ b/www/lib/vis/examples/timeline/other/groupsPerformance.html @@ -3,7 +3,7 @@ <title>Timeline | A lot of grouped data</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" /> <style type="text/css"> body { diff --git a/www/lib/vis/examples/timeline/other/hidingPeriods.html b/www/lib/vis/examples/timeline/other/hidingPeriods.html index 9b2f359a..52ec6f9a 100644 --- a/www/lib/vis/examples/timeline/other/hidingPeriods.html +++ b/www/lib/vis/examples/timeline/other/hidingPeriods.html @@ -10,7 +10,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/other/horizontalScroll.html b/www/lib/vis/examples/timeline/other/horizontalScroll.html new file mode 100644 index 00000000..a999cd51 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/horizontalScroll.html @@ -0,0 +1,77 @@ +<html> +<head> + <title>Timeline | Horizontal Scroll Option</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + +<h1>Timeline horizontal scroll option</h1> + +<div id="mytimeline"></div> + +<script> + + // 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 + var numberOfItems = 1000; + var items = 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); + + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + // specify options + var options = { + stack: true, + horizontalScroll: true, + zoomKey: 'ctrlKey', + 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, items, groups, options); + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/other/localization.html b/www/lib/vis/examples/timeline/other/localization.html index 39080c89..5b58923b 100644 --- a/www/lib/vis/examples/timeline/other/localization.html +++ b/www/lib/vis/examples/timeline/other/localization.html @@ -12,7 +12,7 @@ <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script> <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> @@ -24,7 +24,9 @@ <label for="locale">Select a locale:</label> <select id="locale"> <option value="en" selected>en</option> + <option value="it">it</option> <option value="nl">nl</option> + <option value="de">de</option> </select> </p> @@ -63,4 +65,4 @@ select.onchange(); </script> </body> -</html>
\ No newline at end of file +</html> diff --git a/www/lib/vis/examples/timeline/other/performance.html b/www/lib/vis/examples/timeline/other/performance.html index 4f914354..45b22aab 100644 --- a/www/lib/vis/examples/timeline/other/performance.html +++ b/www/lib/vis/examples/timeline/other/performance.html @@ -14,7 +14,7 @@ <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script> <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/other/requirejs/requirejs_example.html b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html index d4531591..363845fe 100644 --- a/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html +++ b/www/lib/vis/examples/timeline/other/requirejs/requirejs_example.html @@ -5,7 +5,7 @@ <script data-main="scripts/main" src="scripts/require.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/other/rtl.html b/www/lib/vis/examples/timeline/other/rtl.html index 63fc79ad..f53b1802 100644 --- a/www/lib/vis/examples/timeline/other/rtl.html +++ b/www/lib/vis/examples/timeline/other/rtl.html @@ -3,32 +3,23 @@ <head> <title>Timeline | RTL example</title> - <style> - body, html { - font-family: arial, sans-serif; - font-size: 11pt; - } - </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> -<p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p> +<h1>Timeline RTL support</h1> + +<h2>Using <code>dir = "rtl"</code> in any parent node</h2> +<div id="timeline1" dir="rtl"></div> -<div id="visualization"></div> +<h2>Using <code>options.rtl = true</code></h2> +<div id="timeline2"></div> <script> - // create a dataset with items - // we specify the type of the fields `start` and `end` here to be strings - // containing an ISO date. The fields will be outputted as ISO dates - // automatically getting data from the DataSet via items.get(). - var items = new vis.DataSet({ - type: { start: 'ISODate', end: 'ISODate' } - }); + var items = new vis.DataSet(); // add items to the DataSet items.add([ {id: 1, content: '2014-01-23 <br>start', start: '2014-01-23'}, @@ -39,38 +30,20 @@ {id: 6, content: '2014-01-26', start: '2014-01-26'} ]); - // log changes to the console - items.on('*', function (event, properties) { - console.log(event, properties.items); - }); + var container1 = document.getElementById('timeline1'); + var container2 = document.getElementById('timeline2'); - var container = document.getElementById('visualization'); var options = { start: '2014-01-10', end: '2014-02-10', height: '300px', - rtl: true, - // allow selecting multiple items using ctrl+click, shift+click, or hold. - multiselect: true, - - // allow manipulation of items - editable: true, - - /* alternatively, enable/disable individual actions: - - editable: { - add: true, - updateTime: true, - updateGroup: true, - remove: true - }, - - */ - - showCurrentTime: true }; - var timeline = new vis.Timeline(container, items, options); + var options1 = Object.assign({}, options) + var timeline1 = new vis.Timeline(container1, items, options1); + + var options2 = Object.assign({rtl: true}, options) + var timeline2 = new vis.Timeline(container2, items, options2); </script> </body> diff --git a/www/lib/vis/examples/timeline/other/timezone.html b/www/lib/vis/examples/timeline/other/timezone.html index fd7a22c0..8994ba98 100644 --- a/www/lib/vis/examples/timeline/other/timezone.html +++ b/www/lib/vis/examples/timeline/other/timezone.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/other/usingReact.html b/www/lib/vis/examples/timeline/other/usingReact.html new file mode 100644 index 00000000..f6d1e1f7 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/usingReact.html @@ -0,0 +1,123 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta charset="utf-8"> + <title>React Components in templates</title> + </head> + <body> + + <div id='root'></div> + + <!-- + For ease of use, we are including the React, ReactDOM and Babel CDN + builds to make getting started as fast as possible. + + In production, you'll want to instead look at using something + like Gulp, Grunt or WebPack (my personal recommendation) + to compile JSX into JavaScript. Also, check out: + http://facebook.github.io/react/docs/tooling-integration.html + --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <!-- + This is where you link to your React code. Can be .js or .jsx + extension, doesn't really matter. + --> + <script type="text/babel"> + var timeline; + + // 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 + var numberOfItems = 1000; + var items = 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); + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + var GroupTemplate = React.createClass({ + render: function() { + var { group } = this.props; + return <div> + <label>{group.content}</label> + </div> + } + }) + + var ItemTemplate = React.createClass({ + render: function() { + var { item } = this.props; + return <div> + <label>{item.content}</label> + </div> + } + }) + + // specify options + var options = { + orientation: 'top', + maxHeight: 400, + start: new Date(), + end: new Date(1000*60*60*24 + (new Date()).valueOf()), + editable: true, + template: function (item, element) { + ReactDOM.unmountComponentAtNode(element); + return ReactDOM.render(<ItemTemplate item={item} />, element); + }, + groupTemplate: function (group, element) { + ReactDOM.unmountComponentAtNode(element); + return ReactDOM.render(<GroupTemplate group={group} />, element); + } + } + + + var VisTimeline = React.createClass({ + componentDidMount: function() { + return initTimeline(); + }, + render: function() { + return <div> + <h1>Vis timline with React</h1> + <h2>Using react components for items and group templates</h2> + + <div id="mytimeline"></div> + </div> + } + }); + + function initTimeline() { + var container = document.getElementById('mytimeline'); + timeline = new vis.Timeline(container, items, groups, options); + } + + ReactDOM.render(<VisTimeline />, document.getElementById('root')); + </script> + </body> +</html> diff --git a/www/lib/vis/examples/timeline/other/verticalScroll.html b/www/lib/vis/examples/timeline/other/verticalScroll.html new file mode 100644 index 00000000..ddf946f0 --- /dev/null +++ b/www/lib/vis/examples/timeline/other/verticalScroll.html @@ -0,0 +1,93 @@ +<html> +<head> + <title>Timeline | Vertical Scroll Option</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> + + <script src="../../googleAnalytics.js"></script> +</head> + +<body> + +<h1>Timeline vertical scroll option</h1> + +<h2>With <code> +verticalScroll: true, +zoomKey: 'ctrlKey'</code> +</h2> + +<div id="mytimeline1"></div> + +<h2>With <code> +horizontalScroll: true, +verticalScroll: true, +zoomKey: 'ctrlKey'</code> +</h2> +<div id="mytimeline2"></div> +<script> + + // 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 + var numberOfItems = 1000; + var items = 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); + + items.add({ + id: order + itemsPerGroup * truck, + group: truck, + start: start, + end: end, + content: 'Order ' + order + }); + } + } + + // specify options + var options = { + stack: true, + verticalScroll: true, + zoomKey: 'ctrlKey', + maxHeight: 200, + 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 + options1 = Object.assign({}, options) + var container1 = document.getElementById('mytimeline1'); + timeline1 = new vis.Timeline(container1, items, groups, options1); + + options2 = Object.assign({horizontalScroll: true}, options) + var container2 = document.getElementById('mytimeline2'); + timeline2 = new vis.Timeline(container2, items, groups, options2); + +</script> + +</body> +</html> diff --git a/www/lib/vis/examples/timeline/styling/axisOrientation.html b/www/lib/vis/examples/timeline/styling/axisOrientation.html index cfabe312..b3978f17 100644 --- a/www/lib/vis/examples/timeline/styling/axisOrientation.html +++ b/www/lib/vis/examples/timeline/styling/axisOrientation.html @@ -10,7 +10,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> diff --git a/www/lib/vis/examples/timeline/styling/customCss.html b/www/lib/vis/examples/timeline/styling/customCss.html index 906d44a6..ed700a1d 100644 --- a/www/lib/vis/examples/timeline/styling/customCss.html +++ b/www/lib/vis/examples/timeline/styling/customCss.html @@ -4,7 +4,7 @@ <title>Timeline | Custom styling</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" /> <style type="text/css"> body { diff --git a/www/lib/vis/examples/timeline/styling/gridStyling.html b/www/lib/vis/examples/timeline/styling/gridStyling.html index aaa39c45..9fec28b2 100644 --- a/www/lib/vis/examples/timeline/styling/gridStyling.html +++ b/www/lib/vis/examples/timeline/styling/gridStyling.html @@ -4,7 +4,7 @@ <title>Timeline | Grid styling</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" /> <style type="text/css"> body, html { diff --git a/www/lib/vis/examples/timeline/styling/itemClassNames.html b/www/lib/vis/examples/timeline/styling/itemClassNames.html index 38b2735d..62433484 100755 --- a/www/lib/vis/examples/timeline/styling/itemClassNames.html +++ b/www/lib/vis/examples/timeline/styling/itemClassNames.html @@ -3,14 +3,14 @@ <title>Timeline | Item class names</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" /> <style type="text/css"> body, input { font: 12pt verdana; } - /* custom styles for individual items, load this after vis.css */ + /* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */ .vis-item.green { background-color: greenyellow; diff --git a/www/lib/vis/examples/timeline/styling/itemTemplates.html b/www/lib/vis/examples/timeline/styling/itemTemplates.html index a8772afa..13e43c46 100644 --- a/www/lib/vis/examples/timeline/styling/itemTemplates.html +++ b/www/lib/vis/examples/timeline/styling/itemTemplates.html @@ -4,7 +4,7 @@ <title>Timeline | Templates</title> <!-- load handlebars for templating, and create a template --> - <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script> + <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script> <script id="item-template" type="text/x-handlebars-template"> <table class="score"> <tr> @@ -24,7 +24,7 @@ </script> <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" /> <style type="text/css"> body, html { |