vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

134 lines
3.9 KiB

<!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 the following options:
<code>
{
timeAxis: {
scale: 'week',
step: 1
},
format: {
minorLabels: {week: 'w'}
}
}
</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 = {
locale: 'de',
timeAxis: {
scale: 'week',
step: 1
},
format: {
minorLabels: {week: 'w'}
}
};
// 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>