Browse Source

Revert "Improving timeline documentation appearance" (#2541)

fixRailRoadSRFB
Alexander Wunschik 7 years ago
committed by GitHub
parent
commit
e987781c3c
25 changed files with 136 additions and 958 deletions
  1. +1
    -10
      css/examples.css
  2. +9
    -14
      examples/timeline/editing/individualEditableItems.html
  3. +0
    -99
      examples/timeline/editing/overrideEditingItems.html
  4. +2
    -24
      examples/timeline/groups/groupsEditable.html
  5. +0
    -113
      examples/timeline/groups/nestedGroups.html
  6. +6
    -11
      examples/timeline/groups/subgroups.html
  7. +6
    -0
      examples/timeline/groups/verticalItemsHide.html
  8. +1
    -23
      examples/timeline/interaction/eventListeners.html
  9. +0
    -45
      examples/timeline/interaction/rollingMode.html
  10. +0
    -111
      examples/timeline/items/expectedVsActualTimesItems.html
  11. +0
    -49
      examples/timeline/items/tooltip.html
  12. +0
    -67
      examples/timeline/items/visibleFrameTemplateContent.html
  13. +4
    -12
      examples/timeline/other/drag&drop.html
  14. +0
    -2
      examples/timeline/other/usingReact.html
  15. +8
    -4
      examples/timeline/other/verticalScroll.html
  16. BIN
      images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png
  17. BIN
      images/exampleScreenshots/timeline/groups/verticalItemsHide.png
  18. BIN
      images/exampleScreenshots/timeline/other/drag&drop.png
  19. BIN
      images/exampleScreenshots/timeline/other/functionLabelFormats.png
  20. BIN
      images/exampleScreenshots/timeline/other/horizontalScroll.png
  21. BIN
      images/exampleScreenshots/timeline/other/usingReact.png
  22. BIN
      images/exampleScreenshots/timeline/other/verticalScroll.png
  23. BIN
      images/exampleScreenshots/timeline/styling/axisOrientation.png
  24. BIN
      images/exampleScreenshots/timeline/styling/gridStyling.png
  25. +99
    -374
      timeline_examples.html

+ 1
- 10
css/examples.css View File

@ -36,6 +36,7 @@ div.textHTMLContent {
width:800px; width:800px;
} }
img.example { img.example {
border:1px solid #dddddd; border:1px solid #dddddd;
width:250px; width:250px;
@ -43,16 +44,6 @@ img.example {
border-radius:10px; border-radius:10px;
margin-top:10px; margin-top:10px;
} }
img.timeline_example {
border: 1px solid #dddddd;
border-radius: 10px;
margin-top: 10px;
max-height: 150px;
width: 100%;
max-width: 250px;
}
div.exampleTitle { div.exampleTitle {
position:relative; position:relative;
top:-7px; top:-7px;

+ 9
- 14
examples/timeline/editing/individualEditableItems.html View File

@ -34,21 +34,16 @@
<div id="visualization"></div> <div id="visualization"></div>
<script> <script>
// create groups to highligh groupUpdate
var groups = new vis.DataSet([
{id: 1, content: 'Group 1'},
{id: 2, content: 'Group 2'}
]);
// create a DataSet with items // create a DataSet with items
var items = new vis.DataSet([ var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Edit Time Only', editable: { updateTime: true }, start: '2010-08-28', group: 1},
{id: 6, content: 'Edit Group Only', editable: { updateGroup: true }, start: '2010-08-29', group: 2},
{id: 7, content: 'Remove Only', editable: { remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
{id: 1, content: 'Editable', editable: true, start: '2010-08-23'},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'},
{id: 5, content: 'Editable', editable: true, start: '2010-08-28'},
{id: 6, content: 'Read-only', editable: false, start: '2010-08-29'},
{id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'},
{id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'}
]); ]);
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
@ -56,7 +51,7 @@
editable: true // default for all items editable: true // default for all items
}; };
var timeline = new vis.Timeline(container, items, groups, options);
var timeline = new vis.Timeline(container, items, options);
</script> </script>
</body> </body>

+ 0
- 99
examples/timeline/editing/overrideEditingItems.html View File

@ -1,99 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Individual editable items</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
div.vis-editable,
div.vis-editable.vis-selected {
/* custom styling for editable items... */
}
div.vis-readonly,
div.vis-readonly.vis-selected {
/* custom styling for readonly items... */
background-color: #ff4500;
border-color: red;
color: white;
}
</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>Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable</p>
<div id="visualization"></div>
<p>
<form>
Timeline.editable = {</br>
<input name="add" type="checkbox" checked>add</input></br>
<input name="remove" type="checkbox" checked>remove</input></br>
<input name="updateGroup" type="checkbox">updateGroup</input></br>
<input name="updateTime" type="checkbox" checked>updateTime</input><br>
<input name="overrideItems" type="checkbox">overrideItems</input><br>
}
</form>
</p>
<script>
// create a DataSet with items
var items = new vis.DataSet([
{id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
{id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
{id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
{id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
{id: 5, content: 'Editable', editable: true, start: '2010-08-28', group: 1},
{id: 6, content: 'Read-only', editable: false, start: '2010-08-29', group: 2},
{id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03', group: 1},
{id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00', group: 2},
{id: 9, content: 'Default', start: '2010-09-04', group: 1},
{id: 10, content: 'Default', start: '2010-08-24', group: 2}
]);
var groups = [
{
id: 1,
content: 'group 1'
},
{
id: 2,
content: 'group 2'
}
]
var container = document.getElementById('visualization');
var options = {
editable: {
add: true,
remove: true,
updateGroup: false,
updateTime: true,
overrideItems: false
} // default for all items
};
var timeline = new vis.Timeline(container, items, groups, options);
var updateEditOptions = function(e){
var changedOption = e.target.name;
var options = { editable: { } };
options.editable[changedOption] = e.target.checked;
timeline.setOptions(options);
};
var cbs = document.getElementsByTagName("input");
[].forEach.call(cbs, function(cb){
cb.onchange = updateEditOptions;
});
</script>
</body>
</html>

+ 2
- 24
examples/timeline/groups/groupsEditable.html View File

@ -28,8 +28,7 @@
</head> </head>
<body> <body>
<p> <p>
This example demonstrates editable groups (reordering and hiding).
<button onclick="showAllGroups()">Restore Hidden</button>
This example demonstrates editable groups (for now only reordering).
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
@ -56,14 +55,7 @@
{"content": "WEC", "id": "WEC", "value": 18, className:'endurance'}, {"content": "WEC", "id": "WEC", "value": 18, className:'endurance'},
{"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'} {"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'}
]); ]);
// function to make all groups visible again
function showAllGroups(){
groups.forEach(function(group){
groups.update({id: group.id, visible: true});
})
};
// create a dataset with items // create a dataset with items
// note that months are zero-based in the JavaScript Date object, so month 3 is April // note that months are zero-based in the JavaScript Date object, so month 3 is April
var items = new vis.DataSet([ var items = new vis.DataSet([
@ -307,20 +299,6 @@
a.value = b.value; a.value = b.value;
b.value = v; b.value = v;
}, },
groupTemplate: function(group){
var container = document.createElement('div');
var label = document.createElement('span');
label.innerHTML = group.content + ' ';
container.insertAdjacentElement('afterBegin',label);
var hide = document.createElement('button');
hide.innerHTML = 'hide';
hide.style.fontSize = 'small';
hide.addEventListener('click',function(){
groups.update({id: group.id, visible: false});
});
container.insertAdjacentElement('beforeEnd',hide);
return container;
},
orientation: 'both', orientation: 'both',
editable: true, editable: true,
groupEditable: true, groupEditable: true,

+ 0
- 113
examples/timeline/groups/nestedGroups.html View File

@ -1,113 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Nested Groups example</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
</style>
<!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
This example demonstrate using groups. Note that a DataSet is used for both
items and groups, allowing to dynamically add, update or remove both items
and groups via the DataSet.
</p>
<div id="visualization"></div>
<script>
var now = moment().minutes(0).seconds(0).milliseconds(0);
var itemCount = 60;
// create a data set with groups
var groups = new vis.DataSet();
groups.add([
{
id: 1,
content: "Lee",
nestedGroups: [11,12,13]
},
{
id: 2,
content: "invisible group",
visible: false
},
{
id: 3,
content: "John",
nestedGroups: [14],
showNested: false
},
{
id: 4,
content: "Alson"
},
]);
groups.add([
{
id: 11,
content: "cook",
},
{
id: 12,
content: "shop",
},
{
id: 13,
content: "clean house",
},
{
id: 14,
content: "wash dishes",
}
]);
// create a dataset with items
var items = new vis.DataSet();
var groupIds = groups.getIds();
var types = [ 'box', 'point', 'range', 'background']
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 200, 'hours');
var end = start.clone().add(2, 'hours');
var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
var type = types[Math.floor(4 * Math.random())]
items.add({
id: i,
group: randomGroupId,
content: 'item ' + i,
start: start,
end: end,
type: type
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
groupOrder: 'content' // groupOrder can be a property name or a sorting function
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

+ 6
- 11
examples/timeline/groups/subgroups.html View File

@ -1,10 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Timeline | Subgroups</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<title>Timeline | Background areas</title>
<style> <style>
body, html { body, html {
@ -22,11 +19,14 @@
border-left: 2px solid green; border-left: 2px solid green;
} }
</style> </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> </head>
<body> <body>
<p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p> <p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>
<button onclick="toggleStackSubgroups()">Toggle stackSubgroups</button>
<div id="visualization"></div> <div id="visualization"></div>
@ -66,16 +66,11 @@
start: '2014-01-10', start: '2014-01-10',
end: '2014-02-10', end: '2014-02-10',
editable: true, editable: true,
stack: false,
stackSubgroups: true
stack: false
}; };
var timeline = new vis.Timeline(container, items, groups, options); var timeline = new vis.Timeline(container, items, groups, options);
function toggleStackSubgroups() {
options.stackSubgroups = !options.stackSubgroups;
timeline.setOptions(options);
}
</script> </script>
</body> </body>
</html> </html>

+ 6
- 0
examples/timeline/groups/verticalItemsHide.html View File

@ -106,6 +106,12 @@
maxHeight: 400, maxHeight: 400,
start: new Date(), start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()), 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'
}; };

+ 1
- 23
examples/timeline/interaction/eventListeners.html View File

@ -15,7 +15,7 @@
</head> </head>
<body> <body>
<p> <p>
This example listens for events <code>select</code>, <code>click</code>, <code>doubleClick</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline (other possible events: <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>, <code>mouseMove</code>), and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
This example listens for events <code>select</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline, and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
<p></p> <p></p>
@ -57,28 +57,6 @@
setHoveredItem('none'); setHoveredItem('none');
}); });
timeline.on('click', function (properties) {
logEvent('click', properties);
});
timeline.on('doubleClick', function (properties) {
logEvent('doubleClick', properties);
});
timeline.on('contextmenu', function (properties) {
logEvent('contextmenu', properties);
});
// other possible events:
// timeline.on('mouseOver', function (properties) {
// logEvent('mouseOver', properties);
// });
// timeline.on("mouseMove", function(properties) {
// logEvent('mouseMove', properties);
// });
items.on('*', function (event, properties) { items.on('*', function (event, properties) {
logEvent(event, properties); logEvent(event, properties);
}); });

+ 0
- 45
examples/timeline/interaction/rollingMode.html View File

@ -1,45 +0,0 @@
<html>
<head>
<title>Timeline | rolling mode Option</title>
<meta charset="utf-8">
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<h1><i id="icon">&#9974;</i>Timeline rolling mode option</h1>
<div id="mytimeline"></div>
<script>
var container = document.getElementById('mytimeline');
var items = new vis.DataSet();
for (var i = 10; i >= 0; i--) {
items.add({
id: i,
content: "item " + i,
start: new Date(new Date().getTime() + i*100000)
});
}
// Configuration for the Timeline
// specify options
var options = {
start: new Date(),
end: new Date(new Date().getTime() + 1000000),
rollingMode: true
};
// create a Timeline
timeline = new vis.Timeline(container, items, null, options);
</script>
</body>
</html>

+ 0
- 111
examples/timeline/items/expectedVsActualTimesItems.html View File

@ -1,111 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | expected vs actual times items</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
.vis-item.expected {
background-color: transparent;
border-style: dashed!important;
z-index: 0;
}
.vis-item.vis-selected {
opacity: 0.6;
}
.vis-item.vis-background.marker {
border-left: 2px solid green;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script>
// create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings
// containing an ISO date. The fields will be outputted as ISO dates
// automatically getting data from the DataSet via items.get().
var items = new vis.DataSet({
type: { start: 'ISODate', end: 'ISODate' }
});
var groups = new vis.DataSet([
{
id: 'group1',
content:'group1'
}
]);
// add items to the DataSet
items.add([
// group 1
{
id: 'background1',
start: '2014-01-21',
end: '2014-01-22',
type: 'background',
group:'group1'
},
// subgroup 1
{
id: 1,
content: 'item 1 (expected time)',
className: 'expected',
start: '2014-01-23 12:00:00',
end: '2014-01-26 12:00:00',
group:'group1',
subgroup:'sg_1'
},
{
id: 2,
content: 'item 1 (actual time)',
start: '2014-01-24 12:00:00',
end: '2014-01-27 12:00:00',
group:'group1',
subgroup:'sg_1'
},
// subgroup 2
{
id: 3,
content: 'item 2 (expected time)',
className: 'expected',
start: '2014-01-13 12:00:00',
end: '2014-01-16 12:00:00',
group:'group1',
subgroup:'sg_2'
},
{
id: 4,
content: 'item 2 (actual time)',
start: '2014-01-14 12:00:00',
end: '2014-01-17 12:00:00',
group:'group1',
subgroup:'sg_2'
}
]);
var container = document.getElementById('visualization');
var options = {
start: '2014-01-10',
end: '2014-02-10',
editable: true,
stack: false,
stackSubgroups: false
};
var timeline = new vis.Timeline(container, items, groups, options);
</script>
</body>
</html>

+ 0
- 49
examples/timeline/items/tooltip.html View File

@ -1,49 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Tooltips</title>
<style type="text/css">
body, html {
font-family: sans-serif;
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>Tooltips</h1>
<p>
Setting the tooltip in various ways.
</p>
<div id="tooltips"></div>
<script type="text/javascript">
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'Item 1', start: '2016-01-01', end: '2016-01-02',
title: 'Normal text'},
{id: 2, content: 'Item 2', start: '2016-01-02', title: '<b>Bold</b>'},
{id: 3, content: 'Item 3', start: '2016-01-03', type: 'point',
title: '<span style="color: red">Red</span> text'},
{id: 4, content: '<h1>HTML</h1> Item', start: '2016-01-03', end: '2016-01-04',
title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'}
]);
// Options
var options = {};
// Timeline object
var timelineTooltips = new vis.Timeline(document.getElementById('tooltips'),
items, options
);
</script>
</body>
</html>

+ 0
- 67
examples/timeline/items/visibleFrameTemplateContent.html View File

@ -1,67 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Dynamic Content</title>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.progress-wrapper {
background: white;
width: 100%;
height: 18px;
text-align: center;
position: relative;
overflow: hidden;
}
.progress {
height: 100%;
width: 60%;
position: absolute;
left: 0px;
top: 0px;
background: #63ed63;
}
.progress-label {
position: absolute;
z-index: 1;
}
</style>
</head>
<body>
<div id="myTimeline"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('myTimeline');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
{id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
{id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
{id: 4, content: 'item 4 with visibleFramTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFramTemplate: '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">80%<label></div>'
}
]);
// Configuration for the Timeline
var options = {
visibleFrameTemplate: function(item) {
if (item.visibleFramTemplate) {
return item.visibleFramTemplate;
}
var percentage = item.value * 100 + '%';
return '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">' + percentage + '<label></div>';
}
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 4
- 12
examples/timeline/other/drag&drop.html View File

@ -49,10 +49,6 @@
<li draggable="true" class="item"> <li draggable="true" class="item">
item 3 - range item 3 - range
</li> </li>
<li draggable="true" class="item">
item 3 - range - fixed times - <br>
(start: now, end: now + 10 min)
</li>
</ul> </ul>
</div> </div>
@ -114,16 +110,12 @@
var item = { var item = {
id: new Date(), id: new Date(),
type: itemType, type: itemType,
content: event.target.innerHTML.split('-')[0].trim()
content: event.target.innerHTML.split('-')[0].trim(),
start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
}; };
var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
if (isFixedTimes) {
item.start = new Date();
item.end = new Date(1000*60*10 + (new Date()).valueOf());
}
event.dataTransfer.setData("text", JSON.stringify(item));
event.dataTransfer.setData("text/plain", JSON.stringify(item));
} }
var items = document.querySelectorAll('.items .item'); var items = document.querySelectorAll('.items .item');

+ 0
- 2
examples/timeline/other/usingReact.html View File

@ -88,12 +88,10 @@
end: new Date(1000*60*60*24 + (new Date()).valueOf()), end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true, editable: true,
template: function (item, element) { template: function (item, element) {
if (!item) { return }
ReactDOM.unmountComponentAtNode(element); ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<ItemTemplate item={item} />, element); return ReactDOM.render(<ItemTemplate item={item} />, element);
}, },
groupTemplate: function (group, element) { groupTemplate: function (group, element) {
if (!item) { return }
ReactDOM.unmountComponentAtNode(element); ReactDOM.unmountComponentAtNode(element);
return ReactDOM.render(<GroupTemplate group={group} />, element); return ReactDOM.render(<GroupTemplate group={group} />, element);
} }

+ 8
- 4
examples/timeline/other/verticalScroll.html View File

@ -52,13 +52,12 @@ zoomKey: 'ctrlKey'
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4)); date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
var end = new Date(date); var end = new Date(date);
var orderIndex = order + itemsPerGroup * truck
items.add({ items.add({
id: orderIndex,
id: order + itemsPerGroup * truck,
group: truck, group: truck,
start: start, start: start,
end: end, end: end,
content: 'Order ' + orderIndex
content: 'Order ' + order
}); });
} }
} }
@ -71,10 +70,15 @@ zoomKey: 'ctrlKey'
maxHeight: 200, maxHeight: 200,
start: new Date(), start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()), 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 // create a Timeline
options1 = Object.assign({}, options) options1 = Object.assign({}, options)
var container1 = document.getElementById('mytimeline1'); var container1 = document.getElementById('mytimeline1');
timeline1 = new vis.Timeline(container1, items, groups, options1); timeline1 = new vis.Timeline(container1, items, groups, options1);

BIN
images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png View File

Before After
Width: 250  |  Height: 150  |  Size: 3.1 KiB

BIN
images/exampleScreenshots/timeline/groups/verticalItemsHide.png View File

Before After
Width: 250  |  Height: 150  |  Size: 4.2 KiB

BIN
images/exampleScreenshots/timeline/other/drag&drop.png View File

Before After
Width: 250  |  Height: 150  |  Size: 2.6 KiB

BIN
images/exampleScreenshots/timeline/other/functionLabelFormats.png View File

Before After
Width: 250  |  Height: 150  |  Size: 4.9 KiB

BIN
images/exampleScreenshots/timeline/other/horizontalScroll.png View File

Before After
Width: 250  |  Height: 150  |  Size: 2.4 KiB

BIN
images/exampleScreenshots/timeline/other/usingReact.png View File

Before After
Width: 250  |  Height: 150  |  Size: 2.3 KiB

BIN
images/exampleScreenshots/timeline/other/verticalScroll.png View File

Before After
Width: 250  |  Height: 150  |  Size: 4.7 KiB

BIN
images/exampleScreenshots/timeline/styling/axisOrientation.png View File

Before After
Width: 250  |  Height: 150  |  Size: 2.5 KiB Width: 250  |  Height: 260  |  Size: 6.9 KiB

BIN
images/exampleScreenshots/timeline/styling/gridStyling.png View File

Before After
Width: 250  |  Height: 150  |  Size: 3.3 KiB Width: 250  |  Height: 163  |  Size: 30 KiB

+ 99
- 374
timeline_examples.html View File

@ -1,404 +1,129 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script> <head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timeline Examples</title>
<link rel="icon" HREF="favicon.ico">
<!-- Bootstrap -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timeline Examples</title>
<link rel="icon" HREF="favicon.ico">
<!-- Bootstrap -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<link href="./css/prettify.css" rel="stylesheet" type="text/css" /> <link href="./css/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/prettify/prettify.js"></script> <script type="text/javascript" src="./js/prettify/prettify.js"></script>
<link href="./css/examples.css" rel="stylesheet" type="text/css" /> <link href="./css/examples.css" rel="stylesheet" type="text/css" />
<script src="./dist/vis.js"></script> <script src="./dist/vis.js"></script>
<link href="./dist/vis.css" rel="stylesheet" type="text/css" /> <link href="./dist/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<script src="./js/imagesNetwork.js"></script>
<link href="./css/imagesNetwork.css" rel="stylesheet" type="text/css" />
</head>
<body onload="loadVis(220);">
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.html#modules">Modules</a></li>
<li><a href="./index.html#download_install">Download</a></li>
<li><a href="./showcase/index.html">Showcase</a></li>
<li><a href="./index.html#contribute">Contribute</a></li>
<li><a href="./index.html#licenses">License</a></li>
</ul>
</div>
</div> </div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="./index.html#modules">Modules</a></li>
<li><a href="./index.html#download_install">Download</a></li>
<li><a href="./showcase/index.html">Showcase</a></li>
<li><a href="./index.html#contribute">Contribute</a></li>
<li><a href="./index.html#licenses">License</a></li>
</ul>
</div>
</div>
</nav> </nav>
</div>
</div> </div>
</div>
<div class="contentWrapper">
<div class="contentWrapper">
<div id="networkContainer"></div> <div id="networkContainer"></div>
<div id="contentContainer"> <div id="contentContainer">
<h1>Timeline Examples</h1> <h1>Timeline Examples</h1>
This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br> This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
<a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a> <a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>
<h3>basic usage</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/editing/updateDataOnEvent.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/basicUsage.png">
<div class="exampleTitle">basic usage</div>
</a>
</div>
</div>
<h3>data handling</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/dataHandling/dataSerialization.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/dataHandling/dataSerialization.png">
<div class="exampleTitle">data serialization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/dataHandling/loadExternalData.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/dataHandling/loadExternalData.png">
<div class="exampleTitle">load external data</div>
</a>
</div>
</div>
<h3>editing</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/editing/customSnappingOfItems.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/customSnappingOfItems.png">
<div class="exampleTitle">data serialization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/editing/editingItems.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/editingItems.png">
<div class="exampleTitle">editing items</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/editing/editingItemsCallbacks.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/editingItemsCallbacks.png">
<div class="exampleTitle">editing items callbacks</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/editing/individualEditableItems.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/individualEditableItems.png">
<div class="exampleTitle">individual editable items</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/editing/updateDataOnEvent.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/updateDataOnEvent.png">
<div class="exampleTitle">update data on event</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/editing/tooltipOnItemChange.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png">
<div class="exampleTitle">tooltip on item change</div>
</a>
</div>
</div>
<h3>groups</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href=examples/timeline/groups/groups.html>
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groups.png">
<div class="exampleTitle">groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/groups/groupsEditable.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groupsEditable.png">
<div class="exampleTitle">groups editable</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/groups/groupsOrdering.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groupsOrdering.png">
<div class="exampleTitle">groups ordering</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/groups/subgroups.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/subgroups.png">
<div class="exampleTitle">subgroups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href=examples/timeline/groups/verticalItemsHide.html>
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/verticalItemsHide.png">
<div class="exampleTitle">vertical items hide</div>
</a>
</div>
</div>
<h3>interaction</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/interaction/animateWindow.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/animateWindow.png">
<div class="exampleTitle">animate window</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/interaction/clickToUse.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/clickToUse.png">
<div class="exampleTitle">click to use</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/interaction/eventListeners.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/eventListeners.png">
<div class="exampleTitle">event listeners</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/interaction/limitMoveAndZoom.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/limitMoveAndZoom.png">
<div class="exampleTitle">limit move and zoom</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/interaction/navigationMenu.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/navigationMenu.png">
<div class="exampleTitle">navigation menu</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/interaction/setSelection.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/setSelection.png">
<div class="exampleTitle">set selection</div>
</a>
</div>
<h3>basic usage</h3>
<a class='exampleLink' href="examples/timeline/basicUsage.html">basic usage</a><br />
<h3>interaction</h3>
<a class='exampleLink' href="examples/timeline/interaction/animateWindow.html">animate window</a><br />
<a class='exampleLink' href="examples/timeline/interaction/clickToUse.html">click to use</a><br />
<a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a><br />
<a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a><br />
<a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a><br />
<a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a><br />
<h3>editing</h3>
<a class='exampleLink' href="examples/timeline/editing/customSnappingOfItems.html">custom snapping of items</a><br />
<a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a><br />
<a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a><br />
<a class='exampleLink' href="examples/timeline/editing/individualEditableItems.html">individually editable items</a><br />
<a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a><br />
<h3>items</h3>
<a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
<a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
<a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a><br />
<a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a><br />
<a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a><br />
<a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a><br />
<h3>groups</h3>
<a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a><br />
<a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a><br />
<a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a><br />
<a class='exampleLink' href="examples/timeline/groups/groupsEditable.html">editable groups</a><br />
<h3>styling</h3>
<a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
<a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
<a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a><br />
<a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a><br />
<a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />
<h3>data handling</h3>
<a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />
<a class='exampleLink' href="examples/timeline/dataHandling/loadExternalData.html">load external data</a><br />
<h3>other</h3>
<a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a><br />
<a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a><br />
<a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a><br />
<a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a><br />
<a class='exampleLink' href="examples/timeline/other/localization.html">localization</a><br />
<a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
<a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">performance of groups</a><br />
<a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
<a class='exampleLink' href="examples/timeline/other/rtl.html">right to left (rtl)</a><br />
<a class='exampleLink' href="examples/timeline/other/timezone.html">timezone</a><br />
</div> </div>
</div>
<h3>items</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/items/backgroundAreas.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/backgroundAreas.png">
<div class="exampleTitle">background areas</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/items/backgroundAreasWithGroups.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/backgroundAreasWithGroups.png">
<div class="exampleTitle">background areas with groups</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/items/htmlContents.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/htmlContents.png">
<div class="exampleTitle">html contents</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/items/itemOrdering.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/itemOrdering.png">
<div class="exampleTitle">item ordering</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/items/pointItems.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/pointItems.png">
<div class="exampleTitle">point items</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/items/rangeOverflowItem.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/rangeOverflowItem.png">
<div class="exampleTitle">range over flow item</div>
</a>
</div>
</div>
<h3>other</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/requirejs/requirejs_example.html"">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/requirejs/requirejs_example.png">
<div class="exampleTitle">require js</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/customTimeBars.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/customTimeBars.png">
<div class="exampleTitle">custom time bars</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/dataAttributes.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/dataAttributes.png">
<div class="exampleTitle">data attributes</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/dataAttributesAll.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/dataAttributesAll.png">
<div class="exampleTitle">data attributes all</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/groupsPerformance.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/groupsPerformance.png">
<div class="exampleTitle">groups performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/hidingPeriods.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/hidingPeriods.png">
<div class="exampleTitle">hiding periods</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/localization.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/localization.png">
<div class="exampleTitle">localization</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/performance.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/performance.png">
<div class="exampleTitle">performance</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/rtl.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/rtl.png">
<div class="exampleTitle">rtl</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/timezone.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/timezone.png">
<div class="exampleTitle">timezone</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/drag&drop.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/drag&drop.png">
<div class="exampleTitle">drag & drop</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/functionLabelFormats.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/functionLabelFormats.png">
<div class="exampleTitle">function label formats</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/horizontalScroll.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/horizontalScroll.png">
<div class="exampleTitle">horizontal scroll</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/usingReact.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/usingReact.png">
<div class="exampleTitle">using react</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/other/verticalScroll.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/verticalScroll.png">
<div class="exampleTitle">vertical sroll</div>
</a>
</div>
</div>
<h3>styling</h3>
<div class="container-fluid">
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/styling/axisOrientation.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/axisOrientation.png">
<div class="exampleTitle">exis orientation</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/styling/customCss.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/customCss.png">
<div class="exampleTitle">custom css</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/styling/gridStyling.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/gridStyling.png">
<div class="exampleTitle">grid styling</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/styling/itemClassNames.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/itemClassNames.png">
<div class="exampleTitle">item class names</div>
</a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6">
<a href="examples/timeline/styling/itemTemplates.html">
<img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/itemTemplates.png">
<div class="exampleTitle">item templates</div>
</a>
</div>
</div>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html> </html>

Loading…
Cancel
Save