|
Timeline_GettingStarted
Developers start here... 5 simple steps to creating your first Timeline
Getting StartedHere are a few easy steps to create a simple timeline. Open up your favorite text or HTML editor and start creating an HTML file. NoteThis tutorial has been partially updated for use with Timeline version 2.x. The screen shots are from Timeline version 1, so your Timeline will look somewhat different. ExamplesIn addition to this tutorial, please check out:
Step 1. Link to the APIIn your HTML code, link to Timeline's Javascript API code as follows: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
...
<script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script>
...
</head>
<body>
...
</body>
</html>Step 2. Create a DIV ElementCreate a div element in your HTML code, and include a noscript element immediately after it. <div id="my-timeline" style="height: 150px; border: 1px solid #aaa"></div> <noscript> This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you. </noscript> You should give it an ID as well as fix its height. You can optionally set its borders, this usually makes the timeline look better. The noscript tag will help out people who have turned off Javascript in their browser. Timeline uses Javascript, which is included in all browsers and enabled by default. It does not use Java. Step 3. Call Timeline.create()Add two event handlers, onload and onresize, to the body element: <body onload="onLoad();" onresize="onResize();">
...
</body>Then write the following code in a script block or a separate Javascript file: 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);
}
}Note that we put the code to construct the timeline in the onload handler to ensure that when we start to use Timeline's API, all its code has been loaded. That code creates a horizontal timeline (below) with 2 bands: in the top band, a month spans 100 pixels (approximately, since a month here refers to 30 days while not every month is exactly 30 days long); and in the bottom band, a year spans 200 pixels. The top band takes up 70% of the timeline's height, and the bottom band 30%. '''Note that the two bands scroll independently.'''
Step 4. Keep the bands in syncTo make the two bands scroll in synchrony, and then to make the bottom band highlights the visible time span of the top band, add the following code: bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; Gives you this... function onLoad() {
var bandInfos = [
Timeline.createBandInfo({
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
}If you try to pan one band, the other is scrolled as well.
Step 5. Add EventsTo add events to the timeline, create a DefaultEventSource as shown below. Then load the event source with data from your XML, JSON or SPARCL event file. See Event attributes and loading event files. It is not hard for developers to add additional loaders for other event file formats. Additional information on event source. Add the following code: ...
var eventSource = new Timeline.DefaultEventSource();
...
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
...
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
...
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); })Gives you this... function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}The date field parm was added to make sure the timeline starts out showing the events immediately without requiring the user to pan first. If you do not provide a date parm, the default is now. Here is the resulting timeline with 3 events:
Take a look at example1.xml. There are 3 types of events:
Click on the events to see how their bubbles are rendered based on the data in the XML file. For the exact format of such XML files, refer to the documentation on event sources. '''Note that loading XML files is only one way in which you can add events to timelines.''' Step 6. Differentiate the two bandsLooking at the previous timeline, it is obvious that the lower band looks denser, and it will become a lot denser a lot quicker than the upper band should we add more events. Usually, a lower band usually acts as a zoomed-out overview for an upper band and it does not have to show as much detail as the upper band. Change the lower band to be an overview band: ...
overview: true,Gives you this... function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.MONTH,
intervalPixels: 100
}),
Timeline.createBandInfo({
overview: true,
eventSource: eventSource,
date: "Jun 28 2006 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}The lower band of the timeline below does not show text and its event markers are also smaller.
For more background on how a timeline is initialized including how to override defaults check out Understanding Initialization That's it for getting started. To continue with this tutorial check out creating Hot Zones when your events get too cramped. If you have questions, please use the mailing list. Comments posted here are NOT read |
Sign in to add a comment
The embedded links for the event class illustrating XML format should point to Timeline_EventSources not Timeline_EventSourceClass.
Once I stopped pointing at the MIT javscript file and instead pointed at the src I downloaded via SVN I began to receive an error message upon the line that executes:
bandInfos1?.eventPainter.setLayout(bandInfos0?.eventPainter.getLayout());
The error message provides the following information:
"bandInfos0?.eventPainter.getLayout is not a function"
Has something been broken between the MIT and SVN sources?
"Take a look at example1.xml." How?
johnmuthuk, I was wondering the same thing, and I found it on the old site here: http://simile.mit.edu/timeline/docs/example1.xml
I get the same error as brady.gaster as well. Is there a solution?
Anybody know how to fix the intervalPixels when using months.
For example, I have a fixed background 70 pixels wide, so I set intervalPixels=70, months with 31 days keep it at 70 pixels wide, but months with 30 days change to 68 pixels wide and February is 64 pixels wide. This is making everything out of alignment.
Even a way to add the extra pixels to the offset at the end of the month depending on it's length would be good
I get the same error as brady.gaster as well. Is there a solution?
Can't understand why the inclusion of the JS file is surrounded by a <span> element, in the <head>. Accordingly with xhtml standards, that is not valid.
I'm guessing the script tags are wrapped in a span as an effort by the document writer to make the script tag "pop" on the page - however, it just inlines it as well. I'd pull those span tags out. :)
Using the given "http://static.simile.mit.edu/timeline/api-2.0/timeline-api.js" u should be facing problems in step 6 n 7. Use "http://simile.mit.edu/timeline/api/timeline-api.js" instead.
I have setup the timeline and it works great with no problems using "http://simile.mit.edu/timeline/api/timeline-api.js", however there is a lot of customization that can be done much easier (such as bubble height) in ver 2... however when I switch to "http://simile.mit.edu/timeline/api/timeline-api.js" or try to serve the library files from my own server I just get a blank div box at the center of my page.
Am I missing something not covered in these easy steps?
The following line does not work with the new version of timeline... bandInfos1?.eventPainter.setLayout(bandInfos0?.eventPainter.getLayout());
DELETE IT
This line in the onResize() also doesnt seem to work in newer version
tl.layout();
I want to use timeline in a project for a corporate intranet. But i can't use the inclusion of the JS file directly from you servers in internet (why? because some user in our net do not have internet access, it's not up to me).
If I download the JS and included directly from one of my internal servers, would timeline work perfectly?
For Step 4: in onLoad() the following line is missing: var eventSource = new Timeline.DefaultEventSource?(); See Step 5. You will get errors if you don't declare eventSource.
I had the same error on bandInfos1?.eventPainter.setLayout(bandInfos0?.eventPainter.getLayout()). It seems the API evolved, I solved it by replacing with the following line : bandInfos1?.eventPainter.Layout=bandInfos0?.eventPainter.Layout; (i.e. using parameter insteand of method).
Just uploaded a timeline but nothing's coming up on the screen. Any ideas?
Followed the instructions on this page and never got anything but an empty rectangle at any stage. Perhaps something is incorrect or missing from the sample code?
Same thing happened to me. When I reloaded, it worked. Got the 2 bands. However, I like to know where example1.xml is.
I believe the following should be included to prevent the empty rectangle noted above. The exact path can be determined by entering "http://static.simile.mit.edu/timeline/api-2.3.0". Mine started working after this adjustment..
<script> Timeline_ajax_url="http://YOUR_SERVER/javascripts/timeline/timeline_ajax/simile-ajax-api.js"; Timeline_urlPrefix='http://YOUR_SERVER/javascripts/timeline/timeline_js/'; Timeline_parameters='bundle=true'; </script>
is it possible to dynamically set the text font sizes?
example1.xml below:
<data> <event start="May 28 2006 09:00:00 GMT" end="Jun 15 2006 09:00:00 GMT" isDuration="true" title="Writing Timeline documentation" image="http://simile.mit.edu/images/csail-logo.gif"> A few days to write some documentation for <a href="http://simile.mit.edu/timeline/">Timeline</a>. </event> <event start="Jun 16 2006 00:00:00 GMT" end="Jun 26 2006 00:00:00 GMT" title="Friend's wedding"> I'm not sure precisely when my friend's wedding is. </event> <event start="Aug 02 2006 00:00:00 GMT" title="Trip to Beijing" link="http://travel.yahoo.com/"> Woohoo! </event> </data>Very nice, thanks!
The code described here caused errors, but after some Googling I found the solution. The complete code that works fine (as of 7 August 2009) is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script>Timeline_urlPrefix = "http://static.simile.mit.edu/timeline/api-2.3.0/";;</script> <script src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true" type="text/javascript"></script> <script> var tl; function onLoad() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: "Jun 28 2006 00:00:00 GMT", width: "80%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 100 }), Timeline.createBandInfo({ overview: true, eventSource: eventSource, date: "Jun 28 2006 00:00:00 GMT", width: "20%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 200 }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); Timeline.loadXML("example1.xml", function(xml, url) { eventSource.loadXML(xml, url); }); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } } </script> </head> <body onload="onLoad();" onresize="onResize();"> <div id="my-timeline" style="height: 300px; border: 1px solid #aaa"></div> <noscript> This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you. </noscript> </body> </html>Thanks phowland!
thanks pehowland,
Could you give an example of your xml. ? how you title it and where the file goes Thanks S