Changes for v22.0.0.OS
This commit is contained in:
Thilina Hasantha
76
web/bower_components/vis/examples/timeline/styling/axisOrientation.html
vendored
Normal file
76
web/bower_components/vis/examples/timeline/styling/axisOrientation.html
vendored
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Orientation</title>
|
||||
|
||||
<style type="text/css">
|
||||
body, html {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="../../../dist/vis.js"></script>
|
||||
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
There are a number of orientation options for the time axis and the items.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="axis-orientation">Axis orientation</label>
|
||||
<select id="axis-orientation">
|
||||
<option value="both">both</option>
|
||||
<option value="bottom" selected>bottom</option>
|
||||
<option value="none">none</option>
|
||||
<option value="top">top</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="item-orientation">Item orientation</label>
|
||||
<select id="item-orientation">
|
||||
<option value="bottom" selected>bottom</option>
|
||||
<option value="top">top</option>
|
||||
</select>
|
||||
</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([
|
||||
{id: 1, content: 'item 1', start: '2014-04-20'},
|
||||
{id: 2, content: 'item 2', start: '2014-04-14'},
|
||||
{id: 3, content: 'item 3', start: '2014-04-18'},
|
||||
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
|
||||
{id: 5, content: 'item 5', start: '2014-04-25'},
|
||||
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
|
||||
]);
|
||||
|
||||
// Configuration for the Timeline
|
||||
var options = {
|
||||
height: 250 // px
|
||||
};
|
||||
|
||||
// Create a Timeline
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
|
||||
var axisOrientation = document.getElementById('axis-orientation');
|
||||
axisOrientation.onchange = function () {
|
||||
timeline.setOptions({ orientation: {axis: this.value} });
|
||||
};
|
||||
|
||||
var itemOrientation = document.getElementById('item-orientation');
|
||||
itemOrientation.onchange = function () {
|
||||
timeline.setOptions({ orientation: {item: this.value} });
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
100
web/bower_components/vis/examples/timeline/styling/customCss.html
vendored
Normal file
100
web/bower_components/vis/examples/timeline/styling/customCss.html
vendored
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Custom styling</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 {
|
||||
font-family: purisa, 'comic sans', cursive;
|
||||
}
|
||||
|
||||
.vis-timeline {
|
||||
border: 2px solid purple;
|
||||
font-family: purisa, 'comic sans', cursive;
|
||||
font-size: 12pt;
|
||||
background: #ffecea;
|
||||
}
|
||||
|
||||
.vis-item {
|
||||
border-color: #F991A3;
|
||||
background-color: pink;
|
||||
font-size: 15pt;
|
||||
color: purple;
|
||||
box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
|
||||
}
|
||||
|
||||
.vis-item,
|
||||
.vis-item.vis-line {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.vis-item.vis-dot {
|
||||
border-width: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.vis-item.vis-selected {
|
||||
border-color: green;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
.vis-time-axis .vis-text {
|
||||
color: purple;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.vis-time-axis .vis-text.vis-major {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vis-time-axis .vis-grid.vis-minor {
|
||||
border-width: 2px;
|
||||
border-color: pink;
|
||||
}
|
||||
|
||||
.vis-time-axis .vis-grid.vis-major {
|
||||
border-width: 2px;
|
||||
border-color: #F991A3;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
The style of the Timeline can be fully customized via CSS:
|
||||
</p>
|
||||
<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(2010,7,23), content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'},
|
||||
{start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="../resources/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="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'},
|
||||
{start: new Date(2010,7,29), content: '<div>Phone call</div><img src="../resources/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="../resources/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>
|
||||
54
web/bower_components/vis/examples/timeline/styling/gridStyling.html
vendored
Normal file
54
web/bower_components/vis/examples/timeline/styling/gridStyling.html
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Grid styling</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;
|
||||
}
|
||||
|
||||
/* alternating column backgrounds */
|
||||
.vis-time-axis .vis-grid.vis-odd {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* gray background in weekends, white text color */
|
||||
.vis-time-axis .vis-grid.vis-saturday,
|
||||
.vis-time-axis .vis-grid.vis-sunday {
|
||||
background: gray;
|
||||
}
|
||||
.vis-time-axis .vis-text.vis-saturday,
|
||||
.vis-time-axis .vis-text.vis-sunday {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<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: 'custom', start: '2015-01-01'},
|
||||
{id: 2, content: 'styling', start: '2016-01-01'},
|
||||
{id: 3, content: 'of', start: '2017-01-01'},
|
||||
{id: 4, content: 'background', start: '2018-01-01'},
|
||||
{id: 5, content: 'grid', start: '2019-01-01'}
|
||||
]);
|
||||
|
||||
// Configuration for the Timeline
|
||||
var options = {};
|
||||
|
||||
// Create a Timeline
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
117
web/bower_components/vis/examples/timeline/styling/itemClassNames.html
vendored
Executable file
117
web/bower_components/vis/examples/timeline/styling/itemClassNames.html
vendored
Executable file
@@ -0,0 +1,117 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Item class names</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, input {
|
||||
font: 12pt verdana;
|
||||
}
|
||||
|
||||
/* custom styles for individual items, load this after vis.css/vis-timeline-graph2d.min.css */
|
||||
|
||||
.vis-item.green {
|
||||
background-color: greenyellow;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
/* create a custom sized dot at the bottom of the red item */
|
||||
.vis-item.red {
|
||||
background-color: red;
|
||||
border-color: darkred;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
box-shadow: 0 0 10px gray;
|
||||
}
|
||||
.vis-item.vis-dot.red {
|
||||
border-radius: 10px;
|
||||
border-width: 10px;
|
||||
}
|
||||
.vis-item.vis-line.red {
|
||||
border-width: 5px;
|
||||
}
|
||||
.vis-item.vis-box.red {
|
||||
border-radius: 0;
|
||||
border-width: 2px;
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.vis-item.orange {
|
||||
background-color: gold;
|
||||
border-color: orange;
|
||||
}
|
||||
.vis-item.vis-selected.orange {
|
||||
/* custom colors for selected orange items */
|
||||
background-color: orange;
|
||||
border-color: orangered;
|
||||
}
|
||||
|
||||
.vis-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-item.vis-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
|
||||
// note that months are zero-based in the JavaScript Date object
|
||||
var data = new vis.DataSet([
|
||||
{
|
||||
'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>
|
||||
251
web/bower_components/vis/examples/timeline/styling/itemTemplates.html
vendored
Normal file
251
web/bower_components/vis/examples/timeline/styling/itemTemplates.html
vendored
Normal file
@@ -0,0 +1,251 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Templates</title>
|
||||
|
||||
<!-- load handlebars for templating, and create a template -->
|
||||
<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>
|
||||
<td colspan="3" class="description">{{description}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{player1}}</td>
|
||||
<th>{{score1}} - {{score2}}</th>
|
||||
<td>{{player2}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
|
||||
<th></th>
|
||||
<td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</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, html {
|
||||
font-family: sans-serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.vis.timeline .item {
|
||||
border-color: #acacac;
|
||||
background-color: #efefef;
|
||||
box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
|
||||
}
|
||||
|
||||
table .description {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#visualization {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
.logo img {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>WK 2014</h1>
|
||||
<p style="max-width: 600px;">
|
||||
This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
|
||||
</p>
|
||||
|
||||
<div id="visualization">
|
||||
<div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// create a handlebars template
|
||||
var source = document.getElementById('item-template').innerHTML;
|
||||
var template = Handlebars.compile(document.getElementById('item-template').innerHTML);
|
||||
|
||||
// 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([
|
||||
// round of 16
|
||||
{
|
||||
player1: 'Brazil',
|
||||
abbr1: 'br',
|
||||
score1: '1 (3)',
|
||||
player2: 'Chile',
|
||||
abbr2: 'cl',
|
||||
score2: '1 (2)',
|
||||
description: 'round of 16',
|
||||
start: '2014-06-28T13:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Colombia',
|
||||
abbr1: 'co',
|
||||
score1: 2,
|
||||
player2: 'Uruguay',
|
||||
abbr2: 'uy',
|
||||
score2: 0,
|
||||
description: 'round of 16',
|
||||
start: '2014-06-28T17:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Netherlands',
|
||||
abbr1: 'nl',
|
||||
score1: 2,
|
||||
player2: 'Mexico',
|
||||
abbr2: 'mx',
|
||||
score2: 1,
|
||||
description: 'round of 16',
|
||||
start: '2014-06-29T13:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Costa Rica',
|
||||
abbr1: 'cr',
|
||||
score1: '1 (5)',
|
||||
player2: 'Greece',
|
||||
abbr2: 'gr',
|
||||
score2: '1 (3)',
|
||||
description: 'round of 16',
|
||||
start: '2014-06-29T17:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'France',
|
||||
abbr1: 'fr',
|
||||
score1: 2,
|
||||
player2: 'Nigeria',
|
||||
abbr2: 'ng',
|
||||
score2: 0,
|
||||
description: 'round of 16',
|
||||
start: '2014-06-30T13:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Germany',
|
||||
abbr1: 'de',
|
||||
score1: 2,
|
||||
player2: 'Algeria',
|
||||
abbr2: 'dz',
|
||||
score2: 1,
|
||||
description: 'round of 16',
|
||||
start: '2014-06-30T17:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Argentina',
|
||||
abbr1: 'ar',
|
||||
score1: 1,
|
||||
player2: 'Switzerland',
|
||||
abbr2: 'ch',
|
||||
score2: 0,
|
||||
description: 'round of 16',
|
||||
start: '2014-07-01T13:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Belgium',
|
||||
abbr1: 'be',
|
||||
score1: 2,
|
||||
player2: 'USA',
|
||||
abbr2: 'us',
|
||||
score2: 1,
|
||||
description: 'round of 16',
|
||||
start: '2014-07-01T17:00:00'
|
||||
},
|
||||
|
||||
// quarter-finals
|
||||
{
|
||||
player1: 'France',
|
||||
abbr1: 'fr',
|
||||
score1: 0,
|
||||
player2: 'Germany',
|
||||
abbr2: 'de',
|
||||
score2: 1,
|
||||
description: 'quarter-finals',
|
||||
start: '2014-07-04T13:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Brazil',
|
||||
abbr1: 'br',
|
||||
score1: 2,
|
||||
player2: 'Colombia',
|
||||
abbr2: 'co',
|
||||
score2: 1,
|
||||
description: 'quarter-finals',
|
||||
start: '2014-07-04T17:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Argentina',
|
||||
abbr1: 'ar',
|
||||
score1: 1,
|
||||
player2: 'Belgium',
|
||||
abbr2: 'be',
|
||||
score2: 0,
|
||||
description: 'quarter-finals',
|
||||
start: '2014-07-05T13:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Netherlands',
|
||||
abbr1: 'nl',
|
||||
score1: '0 (4)',
|
||||
player2: 'Costa Rica',
|
||||
abbr2: 'cr',
|
||||
score2: '0 (3)',
|
||||
description: 'quarter-finals',
|
||||
start: '2014-07-05T17:00:00'
|
||||
},
|
||||
|
||||
// semi-finals
|
||||
{
|
||||
player1: 'Brazil',
|
||||
abbr1: 'br',
|
||||
score1: 1,
|
||||
player2: 'Germany',
|
||||
abbr2: 'de',
|
||||
score2: 7,
|
||||
description: 'semi-finals',
|
||||
start: '2014-07-08T17:00:00'
|
||||
},
|
||||
{
|
||||
player1: 'Netherlands',
|
||||
abbr1: 'nl',
|
||||
score1: '0 (2)',
|
||||
player2: 'Argentina',
|
||||
abbr2: 'ar',
|
||||
score2: '0 (4)',
|
||||
description: 'semi-finals',
|
||||
start: '2014-07-09T17:00:00'
|
||||
},
|
||||
|
||||
// final
|
||||
{
|
||||
player1: 'Germany',
|
||||
score1: 1,
|
||||
abbr1: 'de',
|
||||
player2: 'Argentina',
|
||||
abbr2: 'ar',
|
||||
score2: 0,
|
||||
description: 'final',
|
||||
start: '2014-07-13T16:00:00'
|
||||
}
|
||||
]);
|
||||
|
||||
// Configuration for the Timeline
|
||||
var options = {
|
||||
// specify a template for the items
|
||||
template: template
|
||||
};
|
||||
|
||||
// Create a Timeline
|
||||
var timeline = new vis.Timeline(container, items, options);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
111
web/bower_components/vis/examples/timeline/styling/weekStyling.html
vendored
Normal file
111
web/bower_components/vis/examples/timeline/styling/weekStyling.html
vendored
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline | Grid styling</title>
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.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, html {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/* alternating column backgrounds */
|
||||
.vis-time-axis .vis-grid.vis-odd {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
Week numbers are calculated based on locales. For this to properly work, the timeline must be loaded with a version
|
||||
of moment.js including locales.</p>
|
||||
<p>To set a locale for the timeline, specify the option
|
||||
<code>{locale: STRING}</code>.</p>
|
||||
<p>To set the scale to use week numbers, use for example <code>{scale: 'week', step: 1}</code>.</p>
|
||||
<p>The following timeline is initialized with the 'de' locale and items are added with locally localized moment.js
|
||||
objects. The timeline locale can be switched to another locale at runtime. If you choose the 'en' locale, the week
|
||||
numbers will be calculated according to the US week calendar numbering scheme.</p>
|
||||
|
||||
<p>
|
||||
<label for="locale">Select a locale:</label>
|
||||
<select id="locale">
|
||||
<option value="en">en</option>
|
||||
<option value="it">it</option>
|
||||
<option value="nl">nl</option>
|
||||
<option value="de" selected>de</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div id="visualization"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var itemCount = 26;
|
||||
|
||||
// DOM element where the Timeline will be attached
|
||||
var container = document.getElementById('visualization');
|
||||
|
||||
// just a group for the effects
|
||||
var groups = new vis.DataSet();
|
||||
groups.add([{id: 1, content: "ISO Weeks"}, {id: 2, content: "US Weeks"}]);
|
||||
|
||||
// Create a DataSet (allows two way data-binding)
|
||||
var items = new vis.DataSet();
|
||||
|
||||
// create a localized moment object based on the current date
|
||||
var USdate = moment().locale('en').hours(0).minutes(0).seconds(0).milliseconds(0);
|
||||
|
||||
// use the locale-aware weekday function to move to the begin of the current week
|
||||
USdate.weekday(0);
|
||||
|
||||
// Iterate and just add a week to use it again in the next iteration
|
||||
for (var i = 0; i < itemCount; i++) {
|
||||
var USweekNumber = USdate.format('w');
|
||||
var USweekStart = USdate.format();
|
||||
var USweekEnd = USdate.add(1, 'week').format();
|
||||
items.add({
|
||||
id: i,
|
||||
group: 2,
|
||||
content: 'US week ' + USweekNumber,
|
||||
start: USweekStart,
|
||||
end: USweekEnd
|
||||
});
|
||||
}
|
||||
|
||||
// create another localized moment object - the 'de' locale works according to the ISO8601 leap week calendar system
|
||||
var DEdate = moment().locale('de').hours(0).minutes(0).seconds(0).milliseconds(0);
|
||||
DEdate.weekday(0);
|
||||
for (var j = 0; j < itemCount; j++) {
|
||||
var DEweekNumber = DEdate.format('w');
|
||||
var DEweekStart = DEdate.format();
|
||||
var DEweekEnd = DEdate.add(1, 'week').format();
|
||||
items.add({
|
||||
id: itemCount + j,
|
||||
group: 1,
|
||||
content: 'ISO week ' + DEweekNumber,
|
||||
start: DEweekStart,
|
||||
end: DEweekEnd
|
||||
});
|
||||
}
|
||||
|
||||
// Configuration for the Timeline
|
||||
var options = {timeAxis: {scale: 'week', step: 1}, locale: 'de'};
|
||||
|
||||
// Create a Timeline
|
||||
var timeline = new vis.Timeline(container, items, groups, options);
|
||||
|
||||
// update the locale when changing the select box value
|
||||
var select = document.getElementById('locale');
|
||||
select.onchange = function () {
|
||||
timeline.setOptions({
|
||||
locale: this.value
|
||||
});
|
||||
};
|
||||
select.onchange();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user