I've trying to build a timeline with two bands. I've got a simple
timeline working with one band but I'd like to add another band so
that I have the year and month. The scripts I'm using are the
following:
<script src="local_data.js" type="text/javascript"></script>
<script>
var tl;
function onLoad() {
var tl_el = document.getElementById("tl");
var eventSource1 = 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.
theme1.timeline_start = new Date(Date.UTC(1927, 0, 1));
theme1.timeline_stop = new Date(Date.UTC(2010, 0, 1));
var d = Timeline.DateTime.parseGregorianDateTime("1927")
var bandInfos = [
Timeline.createBandInfo({
width: 45, // set to a minimum, autoWidth
will then adjust
intervalUnit: Timeline.DateTime.YEAR,
// set for start interval
intervalPixels: 100,
eventSource: eventSource1,
date: d,
theme: theme1,
layout: 'original' // original, overview,
detailed
})
];
// create the Timeline
tl = Timeline.create(tl_el, bandInfos,
Timeline.HORIZONTAL);
var url = '.'; // The base url for image, icon and
background image
// references in the data
eventSource1.loadJSON(timeline_data, url); // The data was
stored into the
//
timeline_data variable.
tl.layout(); // display the Timeline
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
I'd like to build something that uses something similar to the
following (which I got from the documentation) but whenever I try to
use this it breaks the timeline and nothing is displayed:
var tl;
function onLoad() {
var bandInfos = [
Timeline.createBandInfo({
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
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);
}
}
I'd like to be able to use a data js file rather than an xml (which
the above example
uses) to load my data.
Any suggestions?
Thanks. By the way Timeline rocks. I've been stoked since I found
it. Great work developers!
Pedroparamo
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
