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.
139 lines
5.5 KiB
139 lines
5.5 KiB
<!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>
|