-
Notifications
You must be signed in to change notification settings - Fork 79
/
index.html
175 lines (144 loc) · 8.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Chronoline.js : chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale." />
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Chronoline.js</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/StoicLoofah/chronoline.js">View on GitHub</a>
<h1 id="project_title">Chronoline.js</h1>
<h2 id="project_tagline">chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale.</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/StoicLoofah/chronoline.js/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/StoicLoofah/chronoline.js/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<p>Welcome to the chronoline.js demo page. chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale. From a list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and more. Below are 3 examples with events from the 2012 MLB Regular Season.</p>
<h2>Monthly Timeline</h2>
<p>This day-by-day timeline shows off a few features. The events are automatically stacked compactly when they overlap, whether over a single point or a range. Notice how the month labels stick to the edges when you scroll forward and past the first day of the month.</p>
<div id="target1" class="timeline-tgt">
<input id="to-today" type="button" value="Go To Today" />
</div>
<h2>Quarterly Timeline</h2>
<p>Timelines can appear on different scales simply by plugging in one of a few existing defaults or by providing custom functions for it. Additionally, there are different options for how you want (or don't want) to highlight today on the timeline. If qtip is used, events also have tooltips.</p>
<p>This timeline also has dragging enabled, so click, hold, and drag to try that out.</p>
<div id="target2" class="timeline-tgt">
</div>
<h2>Yearly Timeline</h2>
<p>Even at a very large scope, chronoline.js still functions. Events are stacked differently because there isn't enough space to place them adjacently anymore.</p>
<p>You can zoom in and out on the timeline. And if you didn't notice, the left and right arrows support both single clicks for discrete jumps and click-and-hold to scroll continuously.</p>
<div id="target3" class="timeline-tgt">
<label>Zoom Factor <input id="zoom-factor" type="text" value="2"></label><input id="zoom" type="button" value="Zoom" />
</div>
<h2>Support</h2>
<p>I mostly don't know what versions of various components are required. So far, I have used:</p>
<ul>
<li>raphael.js: 2.1.0</li>
<li>jQuery: 1.7.2</li>
<li><a href="http://qtip2.com/">qTip2</a>: 2.0.1</li>
</ul><p>Browser support is:</p>
<ul>
<li>Internet Explorer 8+</li>
<li>Firefox 12+</li>
<li>Chrome 18+</li>
</ul><h2>Credits</h2>
<ul>
<li>Built by and for <a href="https://zanbato.com">Zanbato</a>.</li>
<li>Developed by Kevin Leung (<a href="http://kevinleung.com">website</a>, <a href="https://github.com/StoicLoofah">github</a>)</li>
<li>Designed by Deny Khoung (<a href="http://twitter.com/#!/denykhoung">twitter</a>, <a href="https://github.com/denyk">github</a>)</li>
<li>Additional help from Dan Settel and Brandon Kwock</li>
</ul>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Chronoline.js is maintained by <a href="https://github.com/StoicLoofah">StoicLoofah</a> and licensed under the MIT license.</p>
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/chronoline.css" />
<script type="text/javascript" src="dist/chronoline.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var events = [
{dates: [new Date(2015, 3, 5)], title: "2015 Season Opener", section: 0},
{dates: [new Date(2016, 1, 28)], title: "Spring Training Begins", section: 2},
{dates: [new Date(2016, 4, 20)], title: "Brewers @ Mets Game 1", section: 1},
{dates: [new Date(2016, 4, 21)], title: "Brewers @ Mets Game 2", section: 1},
{dates: [new Date(2016, 4, 22)], title: "Brewers @ Mets Game 3", section: 1},
{dates: [new Date(2016, 4, 23), new Date(2016, 4, 25)], title: "Mets @ Nationals", section: 1},
{dates: [new Date(2016, 4, 23), new Date(2016, 4, 25)], title: "Phillies @ Tigers", section: 1},
{dates: [new Date(2016, 4, 23), new Date(2016, 4, 26)], title: "Diamondbacks @ Pirates", section: 1},
{dates: [new Date(2016, 4, 26), new Date(2016, 4, 28)], title: "Cardinals @ Nationals", section: 1},
{dates: [new Date(2016, 6, 12)], title: "All-Star Game", section: 1},
{dates: [new Date(2016, 9, 24)], title: "World Series Begins", section: 3}
];
var sections = [
{dates: [new Date(2015, 3, 5), new Date(2015, 10, 2)], title: "2015 MLB Regular Season", section: 0, attrs: {fill: "#d4e3fd"}},
{dates: [new Date(2016, 3, 3), new Date(2016, 9, 2)], title: "2016 MLB Season", section: 1, attrs: {fill: "#d4e3fd"}},
{dates: [new Date(2016, 1, 28), new Date(2016, 3, 2)], title: "Spring Training", section: 2, attrs: {fill: "#eaf0fa"}},
{dates: [new Date(2016, 9, 3), new Date(2016, 9, 31)], title: "2016 MLB Playoffs", section: 3, attrs: {fill: "#eaf0fa"}}
];
var timeline1 = new Chronoline(document.getElementById("target1"), events,
{animated: true,
tooltips: true,
defaultStartDate: new Date(2016, 4, 17),
sections: sections,
sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
});
$('#to-today').click(function(){timeline1.goToToday();});
var sections2 = [
{dates: [new Date(2015, 3, 5), new Date(2015, 10, 2)], title: "2015 MLB Regular Season", section: 0, attrs: {fill: "#e3f0fe"}},
{dates: [new Date(2016, 3, 3), new Date(2016, 9, 2)], title: "2016 MLB Season", section: 1, attrs: {fill: "#e3f0fe"}},
{dates: [new Date(2016, 1, 28), new Date(2016, 3, 2)], title: "Spring Training", section: 2, attrs: {fill: "#cce5ff"}},
{dates: [new Date(2016, 9, 3), new Date(2016, 9, 31)], title: "2016 MLB Playoffs", section: 3, attrs: {fill: "#cce5ff"}}
];
var timeline2 = new Chronoline(document.getElementById("target2"), events,
{visibleSpan: DAY_IN_MILLISECONDS * 91,
animated: true,
tooltips: true,
defaultStartDate: new Date(2016, 4, 1),
sections: sections2,
sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
labelInterval: isFifthDay,
hashInterval: isFifthDay,
scrollLeft: prevMonth,
scrollRight: nextMonth,
markToday: 'labelBox',
draggable: true
});
var timeline3 = new Chronoline(document.getElementById("target3"), events,
{visibleSpan: DAY_IN_MILLISECONDS * 366,
animated: true,
tooltips: true,
defaultStartDate: new Date(2016, 4, 25),
sections: sections,
sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
labelInterval: isHalfMonth,
hashInterval: isHalfMonth,
scrollLeft: prevQuarter,
scrollRight: nextQuarter,
floatingSubLabels: false,
});
$('#zoom').click(function() {
timeline3.zoom(parseFloat($('#zoom-factor').val()));
});
});
</script>
</body>
</html>