@ -0,0 +1,57 @@ | |||
<!DOCTYPE HTML> | |||
<html> | |||
<head> | |||
<title>Timeline | Points</title> | |||
<style type="text/css"> | |||
body { | |||
font: 10pt arial; | |||
} | |||
</style> | |||
<script src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
</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'); | |||
var items = [ | |||
{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', 'rangeoverflow' | |||
type: 'point' | |||
}; | |||
var timeline = new vis.Timeline(container, items, options); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,88 @@ | |||
<!DOCTYPE HTML> | |||
<html> | |||
<head> | |||
<title>Timeline | Custom styling</title> | |||
<script src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<style type="text/css"> | |||
.vis.timeline.rootpanel { | |||
border: 2px solid purple; | |||
font-family: purisa, 'comic sans', cursive; | |||
font-size: 12pt; | |||
background: #ffecea; | |||
} | |||
.vis.timeline .item { | |||
border-color: #F991A3; | |||
background-color: pink; | |||
font-size: 15pt; | |||
color: purple; | |||
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5); | |||
} | |||
.vis.timeline .item, | |||
.vis.timeline .item.line { | |||
border-width: 3px; | |||
} | |||
.vis.timeline .item.dot { | |||
border-width: 10px; | |||
border-radius: 10px; | |||
} | |||
.vis.timeline .item.selected { | |||
border-color: green; | |||
background-color: lightgreen; | |||
} | |||
.vis.timeline .timeaxis .text { | |||
color: purple; | |||
padding-top: 10px; | |||
padding-left: 10px; | |||
} | |||
.vis.timeline .timeaxis .text.major { | |||
font-weight: bold; | |||
} | |||
.vis.timeline .timeaxis .grid.minor { | |||
border-width: 2px; | |||
border-color: pink; | |||
} | |||
.vis.timeline .timeaxis .grid.major { | |||
border-width: 2px; | |||
border-color: #F991A3; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<div id="visualization"></div> | |||
<script type="text/javascript"> | |||
var container = document.getElementById('visualization'); | |||
var items = [ | |||
{start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">', type: 'point'}, | |||
{start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'}, | |||
{start: new Date(2010,7,24,16,0,0), content: 'Report'}, | |||
{start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'}, | |||
{start: new Date(2010,7,28), content: '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'}, | |||
{start: new Date(2010,7,29), content: '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'}, | |||
{start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'}, | |||
{start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">'} | |||
]; | |||
var options = { | |||
editable: true, | |||
margin: { | |||
item: 20, | |||
axis: 40 | |||
} | |||
}; | |||
var timeline = new vis.Timeline(container, items, options); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,88 @@ | |||
<html> | |||
<head> | |||
<title>Timeline | Past and future</title> | |||
<style type="text/css"> | |||
body { | |||
font: 11pt verdana; | |||
} | |||
.vis.timeline .item.past { | |||
filter: alpha(opacity=50); | |||
opacity: 0.5; | |||
} | |||
</style> | |||
<script src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
</head> | |||
<body> | |||
<p style="width: 600px;"> | |||
When the custom time bar is shown, the user can drag this bar to a specific | |||
time. The Timeline sends an event that the custom time is changed, after | |||
which the contents of the timeline can be changed according to the specified | |||
time in past or future. | |||
</p> | |||
<div id="customTime"> </div> | |||
<p></p> | |||
<div id="mytimeline"></div> | |||
<script> | |||
// create a data set | |||
var data = new vis.DataSet([ | |||
{ | |||
id: 1, | |||
start: new Date((new Date()).getTime() - 60 * 1000), | |||
end: new Date(), | |||
content: 'Dynamic event' | |||
} | |||
]); | |||
// specify options | |||
var options = { | |||
showCurrentTime: true, | |||
showCustomTime: true | |||
}; | |||
// create a timeline | |||
var container = document.getElementById('mytimeline'); | |||
timeline = new vis.Timeline(container, data, options); | |||
// add event listener | |||
timeline.on('timechange', function (event) { | |||
document.getElementById("customTime").innerHTML = "Custom Time: " + event.time; | |||
var item = data.get(1); | |||
if (event.time > item.start) { | |||
item.end = new Date(event.time); | |||
var now = new Date(); | |||
if (event.time < now) { | |||
item.content = "Dynamic event (past)"; | |||
item.className = 'past'; | |||
} | |||
else if (event.time > now) { | |||
item.content = "Dynamic event (future)"; | |||
item.className = 'future'; | |||
} | |||
else { | |||
item.content = "Dynamic event (now)"; | |||
item.className = 'now'; | |||
} | |||
data.update(item); | |||
} | |||
}); | |||
// set a custom range from -2 minute to +3 minutes current time | |||
var start = new Date((new Date()).getTime() - 2 * 60 * 1000); | |||
var end = new Date((new Date()).getTime() + 3 * 60 * 1000); | |||
timeline.setWindow(start, end); | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,109 @@ | |||
<html> | |||
<head> | |||
<title>Timeline | A lot of grouped data</title> | |||
<script src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||
<style type="text/css"> | |||
body { | |||
color: #4D4D4D; | |||
font: 10pt arial; | |||
} | |||
</style> | |||
</head> | |||
<body onresize="/*timeline.checkResize();*/"> | |||
<h1>Timeline grouping performance</h1> | |||
<p> | |||
Choose a number of items: | |||
<a href="?count=100">100</a>, | |||
<a href="?count=1000">1000</a>, | |||
<a href="?count=10000">10000</a>, | |||
<a href="?count=10000">100000</a> | |||
<p> | |||
<p> | |||
Current number of items: <span id='count'>100</span> | |||
</p> | |||
<div id="mytimeline"></div> | |||
<script> | |||
/** | |||
* Get URL parameter | |||
* http://www.netlobo.com/url_query_string_javascript.html | |||
*/ | |||
function gup( name ) { | |||
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); | |||
var regexS = "[\\?&]"+name+"=([^&#]*)"; | |||
var regex = new RegExp( regexS ); | |||
var results = regex.exec( window.location.href ); | |||
if( results == null ) | |||
return ""; | |||
else | |||
return results[1]; | |||
} | |||
// get selected item count from url parameter | |||
var count = (Number(gup('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'} | |||
]); | |||
// create items | |||
var items = new vis.DataSet(); | |||
var order = 1; | |||
var truck = 1; | |||
for (var j = 0; j < 4; j++) { | |||
var date = new Date(); | |||
for (var i = 0; i < count/4; 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); | |||
items.add({ | |||
id: order, | |||
group: truck, | |||
start: start, | |||
end: end, | |||
content: 'Order ' + order | |||
}); | |||
order++; | |||
} | |||
truck++; | |||
} | |||
// specify options | |||
var options = { | |||
stack: false, | |||
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); | |||
document.getElementById('count').innerHTML = count; | |||
</script> | |||
</body> | |||
</html> |
@ -0,0 +1,115 @@ | |||
<html> | |||
<head> | |||
<title>Timeline | Item class names</title> | |||
<script src="../../dist/vis.js"></script> | |||
<link href="../../dist/vis.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 */ | |||
.vis.timeline .item.green { | |||
background-color: greenyellow; | |||
border-color: green; | |||
} | |||
/* create a custom sized dot at the bottom of the red item */ | |||
.vis.timeline .item.red { | |||
background-color: red; | |||
border-color: darkred; | |||
color: white; | |||
font-family: monospace; | |||
box-shadow: 0 0 10px gray; | |||
} | |||
.vis.timeline .item.dot.red { | |||
border-radius: 10px; | |||
border-width: 10px; | |||
} | |||
.vis.timeline .item.line.red { | |||
border-width: 5px; | |||
} | |||
.vis.timeline .item.box.red { | |||
border-radius: 0; | |||
border-width: 2px; | |||
font-size: 24pt; | |||
font-weight: bold; | |||
} | |||
.vis.timeline .item.orange { | |||
background-color: gold; | |||
border-color: orange; | |||
} | |||
.vis.timeline .item.orange.selected { | |||
/* custom colors for selected orange items */ | |||
background-color: orange; | |||
border-color: orangered; | |||
} | |||
.vis.timeline .item.magenta { | |||
background-color: magenta; | |||
border-color: purple; | |||
color: white; | |||
} | |||
/* our custom classes overrule the styles for selected events, | |||
so lets define a new style for the selected events */ | |||
.vis.timeline .item.selected { | |||
background-color: white; | |||
border-color: black; | |||
color: black; | |||
box-shadow: 0 0 10px gray; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<p>This page demonstrates the Timeline with custom css classes for individual items.</p> | |||
<div id="mytimeline"></div> | |||
<script type="text/javascript"> | |||
// create data | |||
var data = [ | |||
{ | |||
'start': new Date(2012,7,19), | |||
'content': 'default' | |||
}, | |||
{ | |||
'start': new Date(2012,7,23), | |||
'content': 'green', | |||
'className': 'green' | |||
}, | |||
{ | |||
'start': new Date(2012,7,29), | |||
'content': 'red', | |||
'className': 'red' | |||
}, | |||
{ | |||
'start': new Date(2012,7,27), | |||
'end': new Date(2012,8,1), | |||
'content': 'orange', | |||
'className': 'orange' | |||
}, | |||
{ | |||
'start': new Date(2012,8,2), | |||
'content': 'magenta', | |||
'className': 'magenta' | |||
} | |||
]; | |||
// specify options | |||
var options = { | |||
editable: true | |||
}; | |||
// create the timeline | |||
var container = document.getElementById('mytimeline'); | |||
timeline = new vis.Timeline(container, data, options); | |||
</script> | |||
</body> | |||
</html> |