jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

More examples added

css_transitions
jos 10 years ago
parent
c06d00a3ef
commit
cfb327a249
8 changed files with 465 additions and 2 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      examples/timeline/01_basic.html
  2. +1
    -0
      examples/timeline/03_a_lot_of_data.html
  3. +57
    -0
      examples/timeline/11_points.html
  4. +88
    -0
      examples/timeline/12_custom_styling.html
  5. +88
    -0
      examples/timeline/13_past_and_future.html
  6. +109
    -0
      examples/timeline/14_a_lot_of_grouped_data.html
  7. +115
    -0
      examples/timeline/15_item_class_names.html
  8. +6
    -1
      examples/timeline/index.html

+ 1
- 1
examples/timeline/01_basic.html View File

@ -23,7 +23,7 @@
{id: 3, content: 'item 3', start: '2014-04-18'}, {id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'}, {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'}, {id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27'}
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]; ];
var options = {}; var options = {};
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);

examples/timeline/03_much_data.html → examples/timeline/03_a_lot_of_data.html View File

@ -53,6 +53,7 @@
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
editable: true,
start: now.clone().add('days', -3), start: now.clone().add('days', -3),
end: now.clone().add('days', 11), end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day zoomMin: 1000 * 60 * 60 * 24, // a day

+ 57
- 0
examples/timeline/11_points.html View File

@ -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>

+ 88
- 0
examples/timeline/12_custom_styling.html View File

@ -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>

+ 88
- 0
examples/timeline/13_past_and_future.html View File

@ -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">&nbsp;</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>

+ 109
- 0
examples/timeline/14_a_lot_of_grouped_data.html View File

@ -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&nbsp;1'},
{id: 2, content: 'Truck&nbsp;2'},
{id: 3, content: 'Truck&nbsp;3'},
{id: 4, content: 'Truck&nbsp;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>

+ 115
- 0
examples/timeline/15_item_class_names.html View File

@ -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>

+ 6
- 1
examples/timeline/index.html View File

@ -14,7 +14,7 @@
<p><a href="01_basic.html">01_basic.html</a></p> <p><a href="01_basic.html">01_basic.html</a></p>
<p><a href="02_interactive.html">02_dataset.html</a></p> <p><a href="02_interactive.html">02_dataset.html</a></p>
<p><a href="03_much_data.html">03_much_data.html</a></p>
<p><a href="03_a_lot_of_data.html">03_a_lot_of_data.html</a></p>
<p><a href="04_html_data.html">04_html_data.html</a></p> <p><a href="04_html_data.html">04_html_data.html</a></p>
<p><a href="05_groups.html">05_groups.html</a></p> <p><a href="05_groups.html">05_groups.html</a></p>
<p><a href="06_event_listeners.html">06_event_listeners.html</a></p> <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
@ -22,6 +22,11 @@
<p><a href="08_edit_items.html">08_edit_items.html</a></p> <p><a href="08_edit_items.html">08_edit_items.html</a></p>
<p><a href="09_order_groups.html">09_order_groups.html</a></p> <p><a href="09_order_groups.html">09_order_groups.html</a></p>
<p><a href="10_limit_move_and_zoom.html">10_limit_range_and_zoom.html</a></p> <p><a href="10_limit_move_and_zoom.html">10_limit_range_and_zoom.html</a></p>
<p><a href="11_points.html">11_points.html</a></p>
<p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
<p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
<p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
<p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

Write Preview
Loading…
Cancel
Save