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