Hi,
I have a working timeline developed against 1713 and 1687. I
needed the beta 2.3 code to allow autoWidth. The dataset is
unpredictable in number of events per period.
The timeline consists of multiple bands moving in sync - currently
four but will probably move to three. I want to also use the highlight
functionality (bandinfos[1].highlight=true in most examples). However
having autoWidth and highlight enabled at the same time produces a
javascript error:
line 1112, char 1, invalid argument. Simile code:
<script>
var tl;
function onLoad() {
var tl_el = document.getElementById("tl");
var eventSource1 = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.autoWidth = true; // Set the Timeline's "width"
automatically.
// Set autoWidth on the
Timeline's first band's theme,
// will affect all bands.
theme.event.bubble.width = 350;
theme.event.bubble.height = 250;
var d = Timeline.DateTime.parseGregorianDateTime("1700")
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource1,
width: "40%",
intervalUnit: Timeline.DateTime.DAY,
intervalPixels: 270,
date: "Oct 21 2010 00:00:00 GMT",
theme: theme,
layout: 'detail'
}),
Timeline.createBandInfo({
eventSource: eventSource1,
width: "20%",
intervalUnit: Timeline.DateTime.WEEK,
intervalPixels: 270,
date: "Oct 21 2010 00:00:00
GMT",
theme: theme,
layout: 'overview'
}),
Timeline.createBandInfo({
eventSource: eventSource1,
width: "20%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 270,
date: "Oct 21 2010 00:00:00
GMT",
theme: theme,
layout: 'overview'
}),
Timeline.createBandInfo({
eventSource: eventSource1,
width: "20%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 270,
date: "Oct 21 2010 00:00:00
GMT",
theme: theme,
layout: 'overview'
})
];
bandInfos[1].syncWith = 0;
bandInfos[2].syncWith = 0;
bandInfos[3].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[2].highlight = true;
bandInfos[3].highlight = true;
// Asynchronous Callback functions. Called after data
arrives.
function load_xml1(xml, url) {
// Called with first xml file from server
// Also initiates loading of second Band
eventSource1.loadXML(xml, url);
tl.finishedEventLoading(); // Automatically set new size
of the div
};
// create the Timeline
// Strategy: Initiate Ajax call for first band's data,
then have its callback
// initiate Ajax call for second band's data. Then have
its callback
// automagically resize the overall Timeline since we will
then have all
// the data.
tl = Timeline.create(tl_el, bandInfos,
Timeline.HORIZONTAL);
// stop browser caching of data during testing by
appending time
tl.loadXML("cmevents.xml?"+ (new Date().getTime()),
load_xml1);
tl.getBand(0).setCenterVisibleDate(new Date());
mySpan = document.getElementById("centerdate");
mySpan.innerHTML = tl.getBand(0).getCenterVisibleDate
().toDateString();
// add a listener for scrolling
var b0 = tl.getBand(0);
b0.addOnScrollListener(updateDate);
}
function updateDate() {
d = tl.getBand(0).getCenterVisibleDate();
mySpan = document.getElementById("centerdate");
mySpan.innerHTML = d.toDateString();
}
function moveTimeline(month) {
d = tl.getBand(0).getCenterVisibleDate();
d.setMonth(d.getMonth()+month);
tl.getBand(0).setCenterVisibleDate(d);
// mySpan = document.getElementById("centerdate");
// mySpan.innerHTML = d.toDateString();
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
Cheers Paul
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"SIMILE Widgets" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/simile-widgets?hl=en
-~----------~----~----~----~------~----~------~--~---
