Timeline autoheight not showing all bands

[dan]

Hi,

I have a timeline containing 6 bands. I need the height of the
timeline to be set automatically according to the number of events
within bands 2 and 5. I've almost got this working, but the following
code only shows bands 1, 2 and 3 when the page is loaded (literally
bands 4, 5 and 6 aren't there at all, even though they have data in
the current view). When I grab the timeline and scroll, it suddenly
expands to show all of the bands. I don't know why it's doing this -
it should load everything into view upon loading.

Can anyone see how I can get it to do this?



<script type="text/javascript">
var tl;

function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var eventSourceSearch = new Timeline.DefaultEventSource();

var theme1 = Timeline.ClassicTheme.create();
theme1.autoWidth = true; // Set the Timeline's "width"
automatically. Set autoWidth on the Timeline's first band's theme,
will affect all bands.

var bandInfos = [
Timeline.createBandInfo({
width: "50",
theme: theme1,
eventSource: eventSource
}),
Timeline.createBandInfo({
date: "Oct 08 2009 00:00:00 GMT",
width: "380",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 50,
theme: theme1,
eventSource: eventSource,
zoomIndex: 10,
zoomSteps: new Array(
{ pixelsPerInterval: 280, unit: Timeline.DateTime.HOUR },
{ pixelsPerInterval: 140, unit: Timeline.DateTime.HOUR },
{ pixelsPerInterval: 70, unit: Timeline.DateTime.HOUR },
{ pixelsPerInterval: 35, unit: Timeline.DateTime.HOUR },
{ pixelsPerInterval: 400, unit: Timeline.DateTime.DAY },
{ pixelsPerInterval: 200, unit: Timeline.DateTime.DAY },
{ pixelsPerInterval: 100, unit: Timeline.DateTime.DAY },
{ pixelsPerInterval: 50, unit: Timeline.DateTime.DAY },
{ pixelsPerInterval: 400, unit: Timeline.DateTime.MONTH },
{ pixelsPerInterval: 200, unit: Timeline.DateTime.MONTH },
{ pixelsPerInterval: 100, unit: Timeline.DateTime.MONTH} //
DEFAULT zoomIndex
)
}),
Timeline.createBandInfo({
date: "Oct 08 2009 00:00:00 GMT",
width: "70",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 100,
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2,
theme: theme1,
eventSource: eventSource,
overview: true
}),
Timeline.createBandInfo({
width: "50",
theme: theme1,
eventSource: eventSourceSearch
}),
Timeline.createBandInfo({
date: "Oct 08 2009 00:00:00 GMT",
width: "380",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 50,
theme: theme1,
eventSource: eventSourceSearch
}),
Timeline.createBandInfo({
date: "Oct 08 2009 00:00:00 GMT",
width: "70",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 100,
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2,
theme: theme1,
eventSource: eventSourceSearch,
overview: true
})
];
bandInfos[2].syncWith = 1;
bandInfos[4].syncWith = 1;
bandInfos[5].syncWith = 1;
bandInfos[2].highlight = true;
bandInfos[5].highlight = true;

tl = Timeline.create(document.getElementById("my-timeline"),
bandInfos);
Timeline.loadXML("example1.xml", function(xml, url)
{ eventSource.loadXML(xml, url); });
Timeline.loadXML("example2.xml", function(xml, url)
{ eventSourceSearch.loadXML(xml, url); });

}




var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}



</script>


Thanks all!

[dan]

I'm pretty sure this is a bug rather than something wrong with the
coding. The only thing I can think of which might work would be to
programatically scroll the timeline 1 pixel forward then back after
loading, which might have the same affect as dragging the timeline.

Does anyone know how to accomplish this, or to fix this in a neater
way? My whole project is resting on this at the moment, so it's
crucial I can get the timeline height to adjust to the content within
upon load.

Thanks

[dan]

I've sorted this now. It may not be the most elegant way to do it,
but at least it does work (haven't tested cross-browser, only Win
Firefox 3.5).

I just included:

tl.getBand(0)._autoScroll(1);

At the end of the onload event. This programatically scrolls the
timeline by 1px, which seems to trigger the correct autoheight.

[Goblin_Queen]

Hi,

I was having the same problem as you, and it took me some time to find
the solution, and actually the solution was already in the example
that demonstrates the use of autoWidth:
http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/examples/test_example2/test_example2.html
(I just managed to look over it, again and again)

tl.loadJSON("/timeline/events", function(json, url) {
eventSource.loadJSON(json, url);
tl.finishedEventLoading(); //By adding this line, the Timeline
automatically chooses the correct height.
});

It was a bit confusing I guess, I never found anything in the
documentation that this line was needed in order to make autoWidth
work.

Your solution didn't work the first time the Timeline loaded, because
then it took some time to load the JSON data. From the moment the JSON
data had loaded once, your solution did work, but yet it's not
recommended I think.

[Goblin_Queen]

Hi,

I was having the same problem as you, and it took me some time to find

the solution, but actually the solution was already present in the
example demonstrating the use of autoWidth:
http://simile-widgets.googlecode.com/svn/timeline/tags/latest/src/webapp/examples/test_example2/test_example2.html
(I just managed to look over it, again and again).

tl.loadJSON("/timeline/events", function(json, url) {
eventSource.loadJSON(json, url);

tl.finishedEventLoading(); //This line makes the Timeline choose the
correct height automatically
});

I find it strange that the documentation didn't seem to mention that
this line is needed in order to make autoWidth work correctly.

Your solution didn't work for me the first time my Timeline
loaded,because then it took some time to load the JSON data. From the
moment the JSON data had loaded once, your solution did work, but it's
probably not recommended and you should better use
tl.finishedEventLoading();