113 lines
3.1 KiB
JavaScript
113 lines
3.1 KiB
JavaScript
var tl;
|
|
var date = "Mar 10 2008 13:00:00";
|
|
var theme = Timeline.ClassicTheme.create();
|
|
theme.event.label.width = 250; // px
|
|
theme.event.bubble.width = 250;
|
|
theme.event.bubble.height = 200;
|
|
Timeline.GregorianDateLabeller.prototype.labelPrecise = function(date) {
|
|
return Timeline.DateTime.removeTimeZoneOffset(
|
|
date,
|
|
0
|
|
).toLocaleDateString();
|
|
|
|
};
|
|
|
|
window.onload=function() {
|
|
var eventSource = new Timeline.DefaultEventSource();
|
|
var bandInfos = [
|
|
Timeline.createHotZoneBandInfo({
|
|
zones: [
|
|
{ start: "Jun 01 2007 00:00:00 GMT+0800",
|
|
end: "Dec 31 2009 00:00:00 GMT+0800",
|
|
magnify: 2,
|
|
unit: Timeline.DateTime.WEEK
|
|
},
|
|
{ start: "Mar 12 2008 06:00:00 GMT-0500",
|
|
end: "Apr 01 2008 12:00:00 GMT-0500",
|
|
magnify: 5,
|
|
unit: Timeline.DateTime.DAY
|
|
},
|
|
{ start: "Jun 04 2008 00:00:00 GMT+0800",
|
|
end: "Jul 22 2008 00:00:00 GMT+0800",
|
|
magnify: 5,
|
|
unit: Timeline.DateTime.DAY
|
|
}
|
|
],
|
|
width: "70%",
|
|
intervalUnit: Timeline.DateTime.WEEK,
|
|
eventSource: eventSource,
|
|
date: date,
|
|
intervalPixels: 100,
|
|
theme: theme
|
|
}),
|
|
Timeline.createBandInfo({
|
|
width: "20%",
|
|
intervalUnit: Timeline.DateTime.MONTH,
|
|
eventSource: eventSource,
|
|
date: date,
|
|
overview: true,
|
|
intervalPixels: 200,
|
|
theme: theme
|
|
}),
|
|
Timeline.createBandInfo({
|
|
width: "10%",
|
|
intervalUnit: Timeline.DateTime.YEAR,
|
|
eventSource: eventSource,
|
|
date: date,
|
|
overview: true,
|
|
intervalPixels: 200,
|
|
theme: theme
|
|
})
|
|
];
|
|
for (var i = 0; i < bandInfos.length-1; i++) {
|
|
bandInfos[i].decorators = [
|
|
new Timeline.SpanHighlightDecorator({
|
|
startDate: "Jul 1 2007 8:00:00 GMT+0800",
|
|
endDate: "Dec 30 2007 18:00:00 GMT+0800",
|
|
color: "#F1D5B8",
|
|
opacity: 50,
|
|
startLabel: "POP",
|
|
endLabel: "",
|
|
cssClass: 't1highlight'
|
|
}),
|
|
new Timeline.SpanHighlightDecorator({
|
|
startDate: "Mar 1 2008 8:00:00 GMT+0800",
|
|
endDate: "Jul 30 2008 18:00:00 GMT+0800",
|
|
color: "#ECA965",
|
|
opacity: 50,
|
|
startLabel: "IOP",
|
|
endLabel: "",
|
|
cssClass: 't2highlight'
|
|
}),
|
|
new Timeline.SpanHighlightDecorator({
|
|
startDate: "Aug 1 2008 8:00:00 GMT+0800",
|
|
endDate: "Dec 31 2009 18:00:00 GMT+0800",
|
|
color: "#C6B7A8",
|
|
opacity: 50,
|
|
startLabel: "Persistent observation period",
|
|
endLabel: "",
|
|
cssClass: 't2highlight'
|
|
})
|
|
];
|
|
}
|
|
|
|
bandInfos[1].syncWith = 0;
|
|
bandInfos[1].highlight = true;
|
|
bandInfos[2].syncWith = 0;
|
|
bandInfos[2].highlight = true;
|
|
|
|
|
|
tl = Timeline.create(document.getElementById("tl"), bandInfos);
|
|
tl.loadXML("/watertime.xml", function(xml, url) {
|
|
eventSource.loadXML(xml, url);
|
|
});
|
|
}
|
|
var resizeTimerID = null;
|
|
window.onresize=function() {
|
|
if (resizeTimerID == null) {
|
|
resizeTimerID = window.setTimeout(function() {
|
|
resizeTimerID = null;
|
|
tl.layout();
|
|
}, 500);
|
|
}
|
|
} |