TIMELINE. Timeline navigation in IE 6 is slow and difficult when using the HOUR time unit

I have created a timeline with 6 bands, where four of them uses the
interval unit Timeline.DateTime.HOUR. The problem is that navigation in the
timeline gets extremely slow and difficult in IE 6 when using the HOUR time
unit. To navigate through a large timespan is time-consuming and difficult.
When using other "higher" time intervals, such as WEEK or YEAR etc the
navigation speed improves a lot.

I have pasted in the html code for this timeline below (without event
sources) that illustrates this problem. Navigating in the two bottom bands
is hard. When using different event sources in each band, the navigation
performance gets even slower.

Is this a known problem with the HOUR interval unit?
Can it be a problem for navigation speed to have HOUR time unit band and
MONTH time unit bands in the same timeline?
Is it possible to configure the timeline in a way to avoid this problem and
get a seamless navigation? I need to show the data in an HOUR interval unit.

[Submitted by Siw on simile.mit.edu]

Code:

<html>
  <head>
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js"
type="text/javascript"></script>
  </head>
  <body onload="onLoad();" onresize="onResize();">
<div id="my-timeline" style="height: 400px; border: 1px solid #aaa"></div>
  <script>
var tl;
function onLoad() {
var theme = Timeline.ClassicTheme.create();
theme.event.label.width = 250; // px
theme.event.bubble.width = 250;
theme.event.bubble.height = 200;
theme.ether.backgroundColors[0] = "#FFF";
theme.ether.backgroundColors[1] = "#EEE";
theme.ether.backgroundColors[2] = "#FFF";
theme.ether.backgroundColors[3] = "#EEE";
theme.ether.backgroundColors[4] = "#F8D888";
theme.ether.backgroundColors[5] = "#F2B36E";
var bandInfos = [
Timeline.createBandInfo({
                showEventText: false,
trackHeight: 0.6,
                date: "Nov 30 2005 00:00:00 GMT",
width: "14%",
               intervalUnit: Timeline.DateTime.HOUR,
               intervalPixels: 100,
theme: theme
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.6,
        date: "Nov 30 2005 00:00:00 GMT",
width: "12%",
        intervalUnit: Timeline.DateTime.HOUR,
        intervalPixels: 100,
theme: theme
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.6,
        date: "Nov 30 2005 00:00:00 GMT",
width: "12%",
        intervalUnit: Timeline.DateTime.HOUR,
        intervalPixels: 100,
theme: theme
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.6,
        date: "Nov 30 2005 00:00:00 GMT",
width: "12%",
        intervalUnit: Timeline.DateTime.HOUR,
        intervalPixels: 100,
theme: theme
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.6,
        date: "Nov 30 2005 00:00:00 GMT",
width: "30%",
        intervalUnit: Timeline.DateTime.DAY,
        intervalPixels: 100,
theme: theme
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.6,
        date: "Nov 30 2005 00:00:00 GMT",
width: "20%",
        intervalUnit: Timeline.DateTime.MONTH,
        intervalPixels: 200,
theme: theme
})
];
bandInfos[1].syncWith = 0;
bandInfos[2].syncWith = 0;
bandInfos[3].syncWith = 0;
bandInfos[4].syncWith = 0;
bandInfos[5].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos)
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
}
}
  </script>
  </body>
</html>
Original issue reported on code.google.com by GabrielR...@googlemail.com on 8 Apr 2009 at 2:30
cldarcy / simile-widgets

TIMELINE. Timeline navigation in IE 6 is slow and difficult when using the HOUR time unit #225
