Good Afternoon.
I have been working for several days to get the filter/highlight controls
working on my timeline. Unfortunately, no luck. the filters will not
display. Please help!
Best,
Kim
<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="ReportsTimeline.aspx.vb" Inherits="ESRS.ReportsTimeline" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>OCPA Outreach Simile Timeline</title>
<script src="http://simile.mit.edu/timeline/api/timeline-api.js";
type="text/javascript"></script>
<script src="http://simile.mit.edu/timeline/examples.js";
type="text/javascript"></script>
<script type="text/javascript">
var tl;
function onLoad() {
//band info
var FM3_ES = new Timeline.DefaultEventSource();
var ArmyMil_ES = new Timeline.DefaultEventSource();
var zones1 = [
{ start: "Jan 01 2006 00:00:00 GMT-0500",
end: "Jan 01 2009 00:00:00 GMT-0500",
magnify: 7,
unit: Timeline.DateTime.WEEK
}
];
var zones2 = [
{ start: "Jan 01 2006 00:00:00 GMT-0500",
end: "Jan 01 2009 00:00:00 GMT-0500",
magnify: 7,
unit: Timeline.DateTime.MONTH
}
];
var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 150; // px
theme.event.bubble.width = 350;
theme.event.bubble.height = 225;
theme.event.track.gap = 0.1;
theme.ether.backgroundColors = [
"#D1CECA",
"#E7DFD6",
"#E8E8F4",
"#D0D0E8"
];
var bandInfos = [
//***Set up bands***
//FM-03 Rollout Events
Timeline.createHotZoneBandInfo({
eventSource: FM3_ES,
width: "40%",
intervalUnit: Timeline.DateTime.MONTH,
zones: zones1,
theme: theme,
intervalPixels: 100
}),
//Army.Mil Events
Timeline.createHotZoneBandInfo({
eventSource: ArmyMil_ES,
width: "40%",
intervalUnit: Timeline.DateTime.MONTH,
zones: zones1,
theme: theme,
intervalPixels: 100
}),
Timeline.createHotZoneBandInfo({
trackHeight: 1.0,
trackGap: 0.2,
eventSource: FM3_ES,
width: "20%",
intervalUnit: Timeline.DateTime.YEAR,
zones: zones2,
theme: theme,
showEventText: false,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
bandInfos[2].syncWith = 0;
bandInfos[2].highlight = true;
bandInfos[2].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
// finally, show timelines
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos,
Timeline.HORIZONTAL);
Timeline.loadXML("FM3.xml", function(xml, url) { FM3_ES.loadXML(xml, url);
});
Timeline.loadXML("ArmyMil.xml", function(xml, url) { ArmyMil_ES.loadXML(xml,
url); });
setupFilterHighlightControls(document.getElementById("timeline-controls"),
tl, [0,1], theme);
}//end onLoad
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}//end resizeTimerID
</script>
<style type="text/css">
table {
font-size: 100%;
}
.timeline-default {
font-family: Trebuchet MS, Helvetica, Arial, sans serif;
font-size: 8pt;
}
</style>
</head>
<body onload="onLoad();" onresize="onResize();" class="timeline-default">
<div id="my-timeline" style="height: 500px; border: 1px solid #aaa"></div>
<div class="controls" id="timeline-controls"></div>
</body>
</html>
_______________________________________________
General mailing list
[email protected]
http://simile.mit.edu/mailman/listinfo/general
