|
|
|
@ -0,0 +1,139 @@ |
|
|
|
<!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 blue; |
|
|
|
font-family: purisa, 'comic sans', cursive; |
|
|
|
font-size: 12pt; |
|
|
|
background: #E8E8E8; |
|
|
|
} |
|
|
|
|
|
|
|
.vis-item { |
|
|
|
border-color: #0B002B; |
|
|
|
background-color: #88BAFF; |
|
|
|
font-size: 15pt; |
|
|
|
color: black; |
|
|
|
box-shadow: 5px 5px 20px rgba(47,27,0, 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: #2C3E50; |
|
|
|
background-color: #498FBE; |
|
|
|
} |
|
|
|
|
|
|
|
.vis-time-axis .vis-text { |
|
|
|
color: #0B002B; |
|
|
|
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: #88BAFF; |
|
|
|
} |
|
|
|
|
|
|
|
.vis-labelset .vis-label |
|
|
|
{ |
|
|
|
color: black; |
|
|
|
} |
|
|
|
|
|
|
|
.vis-time-axis .vis-grid.vis-major { |
|
|
|
border-width: 2px; |
|
|
|
border-color: #0B002B; |
|
|
|
} |
|
|
|
</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'); |
|
|
|
|
|
|
|
var groups = new vis.DataSet([ |
|
|
|
{id: 0, content: 'Education', value: 1}, |
|
|
|
{id: 1, content: 'Work Experience', value: 2}, |
|
|
|
{id: 2, content: 'Major Projects', value: 3}, |
|
|
|
{id: 3, content: 'Blog Posts', value: 4} |
|
|
|
]); |
|
|
|
|
|
|
|
// note that months are zero-based in the JavaScript Date object |
|
|
|
var items = new vis.DataSet([ |
|
|
|
//education |
|
|
|
{id: 0, group: 0, start: new Date(2013,7,1), end: new Date(2017,5,15), content: 'High School'}, |
|
|
|
{id: 1, group: 0, start: new Date(2017,7,1), end: new Date(2021,4,15), content: 'RIT: Computer Science'}, |
|
|
|
|
|
|
|
//work experience |
|
|
|
{id: 2, group: 1, start: new Date(2016,5,1), end: new Date(2017,0,1), content: 'Hoffends App Developer'}, |
|
|
|
{id: 3, group: 1, start: new Date(2017,0,1), end: new Date(2018,0,1), content: 'Pioneer App Developer and Maltster'}, |
|
|
|
{id: 4, group: 1, start: new Date(2018,4,1), end: new Date(2018,7,1), content: 'Co Op ISE Research Assistant'}, |
|
|
|
{id: 5, group: 1, start: new Date(2019,0,1), end: new Date(2019,7,1), content: 'Co Op ISE Research Assistant'}, |
|
|
|
{id: 6, group: 1, start: new Date(2015,5,1), end: new Date(2015,6,1), content: 'East Side West Side Head Camp Counselor'}, |
|
|
|
{id: 7, group: 1, start: new Date(2018,2,1), end: new Date(2019,0,1), content: 'IT Support Specialist'}, |
|
|
|
{id: 8, group: 1, start: new Date(2019,7,1), end: new Date(2020,0,1), content: 'Teachers Assistant'}, |
|
|
|
{id: 9, group: 1, start: new Date(2018,7,1), end: new Date(2019,0,1), content: 'Note Taker'}, |
|
|
|
|
|
|
|
//projects |
|
|
|
{group: 2, start: new Date(2016,2,0,23,0,0), content: '<div>Panda Quotes</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2016,5,0,23,0,0), content: '<div>Tanks Game</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2017,1,0,23,0,0), content: '<div>Musical Floppy Drives</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2017,5,0,23,0,0), content: '<div>Club Panda</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2017,9,0,23,0,0), content: '<div>Hoffends</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2017,11,0,23,0,0), content: '<div>Tiger OS</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2018,0,0,23,0,0), content: '<div>What the Trend</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2018,2,0,23,0,0), content: '<div>Bash Manager</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2018,0,3,23,0,0), end: new Date(2019,0,1), content: '<div>Node JS Blog</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
{group: 2, start: new Date(2018,7,0,23,0,0), content: '<div>Steam Friend\'s Graph</div><img src="../resources/img/mail-icon.png" style="width:32px; height:32px;">'}, |
|
|
|
]); |
|
|
|
|
|
|
|
var options = { |
|
|
|
// option groupOrder can be a property name or a sort function |
|
|
|
// the sort function must compare two groups and return a value |
|
|
|
// > 0 when a > b |
|
|
|
// < 0 when a < b |
|
|
|
// 0 when a == b |
|
|
|
groupOrder: function (a, b) { |
|
|
|
return a.value - b.value; |
|
|
|
}, |
|
|
|
margin: { |
|
|
|
item: 20, |
|
|
|
axis: 40 |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
var timeline = new vis.Timeline(container); |
|
|
|
timeline.setOptions(options); |
|
|
|
timeline.setGroups(groups); |
|
|
|
timeline.setItems(items); |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
