diff options
Diffstat (limited to 'www/lib/vis/examples/timeline/items')
6 files changed, 378 insertions, 0 deletions
diff --git a/www/lib/vis/examples/timeline/items/backgroundAreas.html b/www/lib/vis/examples/timeline/items/backgroundAreas.html new file mode 100644 index 00000000..3ec18a66 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/backgroundAreas.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Background areas</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + + .vis-item.vis-background.negative { + background-color: rgba(255, 0, 0, 0.2); + } + </style> + + <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 demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p> + +<div id="visualization"></div> + +<script> + var items = new vis.DataSet([ + {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'}, + {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'}, + {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'} + ]); + + var container = document.getElementById('visualization'); + var options = { + start: '2014-01-10', + end: '2014-02-10', + editable: true + }; + + var timeline = new vis.Timeline(container, items, options); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html new file mode 100644 index 00000000..f8a78608 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/backgroundAreasWithGroups.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Background areas with groups</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + </style> + + <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 demonstrates the item type "background" when using groups.</p> +<ul> + <li>Background items having a group are displayed in that group</li> + <li>Background items without a group are spread over the whole timeline</li> + <li>Background items with a non-existing group are not displayed</li> +</ul> +<div id="visualization"></div> + +<script> + var items = new vis.DataSet([ + {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background', group: 1}, + {id: 'B', content: 'Period B', start: '2014-01-23', end: '2014-01-26', type: 'background', group: 2}, + {id: 'C', content: 'Period C', start: '2014-01-27', end: '2014-02-03', type: 'background'}, // no group + {id: 'D', content: 'Period D', start: '2014-01-14', end: '2014-01-20', type: 'background', group: 'non-existing'}, + {id: 1, content: 'item 1<br>start', start: '2014-01-30', group: 1}, + {id: 2, content: 'item 2', start: '2014-01-18', group: 1}, + {id: 3, content: 'item 3', start: '2014-01-21', group: 2}, + {id: 4, content: 'item 4', start: '2014-01-17', end: '2014-01-21', group: 2}, + {id: 5, content: 'item 5', start: '2014-01-28', type:'point', group: 2}, + {id: 6, content: 'item 6', start: '2014-01-25', group: 2} + ]); + + var groups = new vis.DataSet([ + {id: 1, content: 'Group 1'}, + {id: 2, content: 'Group 2'} + ]); + + var container = document.getElementById('visualization'); + var options = { + start: '2014-01-10', + end: '2014-02-10', + editable: true + }; + + var timeline = new vis.Timeline(container, items, groups, options); + +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/items/htmlContents.html b/www/lib/vis/examples/timeline/items/htmlContents.html new file mode 100644 index 00000000..d790133a --- /dev/null +++ b/www/lib/vis/examples/timeline/items/htmlContents.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | HTML data</title> + + <style> + body, html { + font-family: arial, sans-serif; + font-size: 11pt; + } + span { + color: red; + } + span.large { + font-size: 200%; + } + </style> + + <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> + Load HTML contents in the Timeline in various ways. +</p> +<div id="visualization"></div> + +<script> + // create a couple of HTML items in various ways + + var item1 = document.createElement('div'); + item1.appendChild(document.createTextNode('item 1')); + + var item2 = document.createElement('div'); + item2.innerHTML = '<span>item 2</span>'; + + var item3 = document.createElement('div'); + var span3 = document.createElement('span'); + span3.className = 'large'; + span3.appendChild(document.createTextNode('item 3')); + item3.appendChild(span3); + + var item4 = 'item <span class="large">4</span>'; + + var item5 = document.createElement('div'); + item5.appendChild(document.createTextNode('item 5')); + item5.appendChild(document.createElement('br')); + var img5 = document.createElement('img'); + img5.src = 'img/attachment-icon.png'; + img5.style.width = '48px'; + img5.style.height = '48px'; + item5.appendChild(img5); + + var item6 = 'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">'; + + var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>'; + + // create data and a Timeline + var container = document.getElementById('visualization'); + var items = new vis.DataSet([ + {id: 1, content: item1, start: '2013-04-20'}, + {id: 2, content: item2, start: '2013-04-14'}, + {id: 3, content: item3, start: '2013-04-18'}, + {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'}, + {id: 5, content: item5, start: '2013-04-25'}, + {id: 6, content: item6, start: '2013-04-27'}, + {id: 7, content: item7, start: '2013-04-21'} + ]); + var options = {}; + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/items/itemOrdering.html b/www/lib/vis/examples/timeline/items/itemOrdering.html new file mode 100644 index 00000000..323c9501 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/itemOrdering.html @@ -0,0 +1,82 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Item ordering</title> + + <style type="text/css"> + body, html { + font-family: sans-serif; + } + p { + max-width: 800px; + } + </style> + + <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> +<h1>Item ordering</h1> +<p> + By default, the items displayed on the Timeline are unordered. They are + stacked in the order that they where loaded. This means that way items are + stacked can change while moving and zooming the Timeline. +</p> +<p> + To display and stack the items in a controlled order, you can provide a + custom sorting function via the configuration option <code>order</code>. +</p> +<p> + WARNING: Custom ordering is only suitable for small amounts of items (up to a few + hundred), as the Timeline has to render <i>all</i> items once on load to + determine their width and height. +</p> +<p> + <label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label> +</p> + +<div id="visualization"></div> + +<script type="text/javascript"> + // DOM element where the Timeline will be attached + var container = document.getElementById('visualization'); + + // Create a DataSet (allows two way data-binding) + var items = new vis.DataSet(); + var date = vis.moment('2015-03-02'); + for (var i = 0; i < 100; i++) { + date.add(Math.round(Math.random() * 2), 'hour'); + items.add({ + id: i, + content: 'Item ' + i, + start: date.clone(), + end: date.clone().add(4, 'hour') + }); + } + + function customOrder (a, b) { + // order by id + return a.id - b.id; + } + + // Configuration for the Timeline + var options = { + order: customOrder, + editable: true, + margin: {item: 0} + }; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); + + var ordering = document.getElementById('ordering'); + ordering.onchange = function () { + timeline.setOptions({ + order: ordering.checked ? customOrder: null + }); + }; +</script> +</body> +</html>
\ No newline at end of file diff --git a/www/lib/vis/examples/timeline/items/pointItems.html b/www/lib/vis/examples/timeline/items/pointItems.html new file mode 100755 index 00000000..68201801 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/pointItems.html @@ -0,0 +1,60 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Point items</title> + + <style type="text/css"> + body { + font: 10pt arial; + } + </style> + + <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> +<h1>World War II timeline</h1> +<p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p> +<div id="mytimeline" style="background-color: #FAFAFA;"></div> + +<div id="visualization"></div> + +<script type="text/javascript"> + var container = document.getElementById('visualization'); + + // note that months are zero-based in the JavaScript Date object + var items = new vis.DataSet([ + {start: new Date(1939,8,1), content: 'German Invasion of Poland'}, + {start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'}, + {start: new Date(1940,7,13), content: 'Battle of Britain - RAF vs. Luftwaffe'}, + {start: new Date(1941,1,14), content: 'German Afrika Korps arrives in North Africa'}, + {start: new Date(1941,5,22), content: 'Third Reich Invades the USSR'}, + {start: new Date(1941,11,7), content: 'Japanese Attack Pearl Harbor'}, + {start: new Date(1942,5,4), content: 'Battle of Midway in the Pacific'}, + {start: new Date(1942,10,8), content: 'Americans open Second Front in North Africa'}, + {start: new Date(1942,10,19),content: 'Battle of Stalingrad in Russia'}, + {start: new Date(1943,6,5), content: 'Battle of Kursk - Last German Offensive on Eastern Front'}, + {start: new Date(1943,6,10), content: 'Anglo-American Landings in Sicily'}, + {start: new Date(1944,2,8), content: 'Japanese Attack British India'}, + {start: new Date(1944,5,6), content: 'D-Day - Allied Invasion of Normandy'}, + {start: new Date(1944,5,22), content: 'Destruction of Army Group Center in Byelorussia'}, + {start: new Date(1944,7,1), content: 'The Warsaw Uprising in Occupied Poland'}, + {start: new Date(1944,9,20), content: 'American Liberation of the Philippines'}, + {start: new Date(1944,11,16),content: 'Battle of the Bulge in the Ardennes'}, + {start: new Date(1944,1,19), content: 'American Landings on Iwo Jima'}, + {start: new Date(1945,3,1), content: 'US Invasion of Okinawa'}, + {start: new Date(1945,3,16), content: 'Battle of Berlin - End of the Third Reich'} + ]); + + var options = { + // Set global item type. Type can also be specified for items individually + // Available types: 'box' (default), 'point', 'range' + type: 'point', + showMajorLabels: false + }; + + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html> diff --git a/www/lib/vis/examples/timeline/items/rangeOverflowItem.html b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html new file mode 100644 index 00000000..fbea2f37 --- /dev/null +++ b/www/lib/vis/examples/timeline/items/rangeOverflowItem.html @@ -0,0 +1,54 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>Timeline | Range overflow</title> + + <script src="../../../dist/vis.js"></script> + <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" /> + + <style type="text/css"> + body, html { + font-family: sans-serif; + } + + .vis-item .vis-item-overflow { + overflow: visible; + } + </style> + + <script src="../../googleAnalytics.js"></script> +</head> +<body> +<p> + In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css: +</p> +<pre> +.vis-item .vis-item-overflow { + overflow: visible; +} +</pre> + +<div id="visualization"></div> + +<script type="text/javascript"> + // DOM element where the Timeline will be attached + var container = document.getElementById('visualization'); + + // Create a DataSet (allows two way data-binding) + var items = new vis.DataSet([ + {id: 1, content: 'item 1 with overflowing text content', start: '2014-04-20', end: '2014-04-26'}, + {id: 2, content: 'item 2 with overflowing text content', start: '2014-05-14', end: '2014-05-18'}, + {id: 3, content: 'item 3 with overflowing text content', start: '2014-06-18', end: '2014-06-22'}, + {id: 4, content: 'item 4 with overflowing text content', start: '2014-06-16', end: '2014-06-17'}, + {id: 5, content: 'item 5 with overflowing text content', start: '2014-06-25', end: '2014-06-27'}, + {id: 6, content: 'item 6 with overflowing text content', start: '2014-09-27', end: '2014-09-28'} + ]); + + // Configuration for the Timeline + var options = {}; + + // Create a Timeline + var timeline = new vis.Timeline(container, items, options); +</script> +</body> +</html>
\ No newline at end of file |