|
Timeline
Timeline documentation index page.
Timeline Documentation
This page serves as an entry point to the documentation of the Simile Widgets Timeline component. To reference the previous documentation hosted at MIT please refer to html or wiki. We'll try to move all existing (as of September 2nd, 2007) over by September 5th and we'll update that wiki to point here. Timeline allows web site creators to embed interactive timelines into their sites. It requires only that visitors have Javascript enabled. It's often referred to as "Google Maps" for time. Call for HelpWe need your help to make this documentation better. If you have information or examples, please contribute. This wiki still references images and examples from the MIT site. Almost all the content was migrated from that site. Overtime those artifacts will be migrated here as well. Examples
How-TosGetting Started
Controlling Timeline Appearance and Behavior
Timeline Client UI IdeasThe Timeline library is called by client software on your html page. Your client software can add additional User Interface (UI) features. Loading data
Timeline generators as a service
Sites and Software incorporating Timelines
Language or Framework Support
API
Guidelines
Similar Tools
If you have questions, please use the mailing list. Comments posted here are NOT read |
Sign in to add a comment
hgre;;or r;e fure' vre
If i just include "<script src="http://static.simile.mit.edu/timeline/api-2.0/timeline-api.js" type="text/javascript"></script>" in my page to have the timeline, how can i apply your patch to file "timeline.js"? I don't have a local copy of the timeline, neither i need for my application.
This implementation is not working for me on version 2.2.0
I can't get this working either (version 2.2.0).
Minor typo in the first paragraph. "Defaults can be changed using PARAMS" - all caps for emphasis.
Timeline.creteBandInfo also accepts zoomIndex and zoomSteps as follows.
//============ start here ======================= var mytheme = Timeline.getDefaultTheme(); mytheme.mouseWheel = "zoom";
var bandInfos = [
//============ end here =======================
These no longer work in createBandInfo: - showEventText - trackHeight - trackGap
There does not seem to be an API to retrieve date and time upon clicking a pixel on the timeline. Had there been something to do that, we could have made it a lot more interactive.
How do you control the alignment of the image for an instantaneous event (blue-circle.png icon)?
look like my old bit of code is still working, or so amanda said...
hmm, my rent about microsoft was taken out... :)
How do I center the timeline by clicking on a link?
ctitus12, you'd have to pass the information for the specific date that you'll be centering too.
maybe some javascript like:
timeline = document.getElementById('yourTimeline');
function moveTo(date) {
}and then in your link you could have something like:
<a href="#" onclick="moveTo('250 AD'); return false">Jump to 250 AD</a>
Hope that answers your question!
you'll have to check what the format of the date you're jumping too, I'm not sure which format you'll need.
I'd check their example here.
Does this work with exhbit as well? How can I define two diffrent Timelinevews with different Centers? For Example to show the art history of different Eras with differnt Scales and colorcoders. Perhaps you can helb me with this http://swiki.hfbk-hamburg.de:8888/seminare/uploads/156/Zeitstrahl_Kunstgeschichte2.1.html exhibit
Is it possible to get the start and end visible date? Is there a band_object.getMinVisibleDate() function available for instance? Thanks in advance.
Yes we can! The answer is here : http://code.google.com/p/simile-widgets/wiki/Timeline_BandClass
Hello!
Very cool library you do!
My questions are: 1. Is there any standard way to add/delete events one by one? I have to write a work around to make this possible by accessing private objects methods and fields (thanks to javascript)?
2. How can I drag events along the timeline (at least horizontally) to change its start dates?
Thanks a lot in advance!
Does anyone know how to animate the timeline to a given date? That is, the user clicks on a link (as described above) and the timeline slides to arrive at the given date?
Instead of using the setCenterVisibleDate() function, you have to use scrollToCenter().
The eventSource.clear dealt with a bug I had of duplicating items showing up, of course, now it adds some flicker as some event sources are deleted and then readded! I mentioned this in this bug on another project: http://code.google.com/p/similetimelinerailshelper/issues/detail?id=5
test
Great list, thanks a lot!
Family history http://home.venturacottage.com/timelinepage within Drupal
Also used by the White House: http://recovery.gov
http://flarecovery.com/ ... same usage as recovery.gov but w/ more data
http://www.tyinguplostthreads.com/Events has the timeline up and running but, they are in the process of correcting the actual dates.
http://canricart.info
We used this at the Annals of Internal Medicine in a rosiglitazone timeline.
we use it in our website http://www.xenit.eu
Add dependencies between events and make the best Gantt chart ever !!
Make it so event progress can be shown
I wrote some code to show a range of my timeline, using a slider like this: http://www.filamentgroup.com/examples/slider/index3UI.php Right now, this works well, but when the slider is changed I have to completely re-initialize the timeline with the new zoom and position settings. It would be awesome if there was a way to smoothly zoom and slide the timeline in realtime.
When the timeline is 'grabbed' for dragging, wouldn't it be nicer if the mouse y position were stored and maintained (or x position in the case of a vertical timeline)?
In this way, it would be easier to slide back and forth without accidentally selecting text.
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!
To me it only worked without the 'dateTimeFormat': 'iso8601' declaration!
I've added a new dateTimeFormat called 'javascriptnative' so I can send Date() objects in valid JSON.
I create new parser in timeline_ajax/scripts/date-time.js;
SimileAjax.DateTime.parseNativeDate = function (string) { try { var date = eval('new ' + string); // string should be 'Date(yy,mm,dd)' or another valid Date constructor if (date == undefined) return null; return date; } catch (e) { return null; } };Then in timeline_ajax/scripts/units.js define the parser function which just calls eval('new ' + string) to construct a new Date object;
SimileAjax.NativeDateUnit.getParser = function(format) { if (typeof format == "string") { format = format.toLowerCase(); } if (format == "javascriptnative") { return SimileAjax.DateTime.parseNativeDate; } return (format == "iso8601" || format == "iso 8601") ? SimileAjax.DateTime.parseIso8601DateTime : SimileAjax.DateTime.parseGregorianDateTime; };I'm writing a django app and using django.utils.simplejson encoder like this in my view;
from django.utils.simplejson import JSONEncoder def list_items(request): e_dict = {} e_dict['dateTimeFormat'] = 'javascriptnative' e_list = list() e_dict['events'] = events e1 = {} e1['start'] = 'Date(%s)' % datetime.now().strftime('%Y,%m-1,%d,%H,%M,%S') e1['title'] = 'Hey now!' e_list.append(e1) return HttpResponse(JSONEncoder().encode(e_dict), mimetype='application/javascript')Note that the javascript Date() constructor expects the month to be zero-indexed, so I subtract 1 from the python datetime '%m' argument.
Regardless of how you enter the dates, the display in the popups will always be converted to display in GMT.
not work for me, using 'dateTimeFormat': 'iso8601' -> 'start': new Date(1216,2,15) error => v1 is null, n1=v1.getTime();
May someone write a simple example on how to use these methods ?
EG: I need to getText the 3rd event in the timeline, which is the first one visible. How do I write the code to get that ?
tl.eventSource.event(whatevent!?).getText() ??
fvsdfvsd
Where is this example 3 you speak of?
its in the SVN source
This works only with the Original Event Painter, I tried. But when I tried the same with the Compact Event Painter an error was rised by firebug and the instruction was not executed.
The code follows:
Timeline.CompactEventPainter.prototype._showBubble = function(x, y, evt) { document.location.href=evt.getLink(); }error: evt.getLink is not a function
Here is my patch for timeline-bundle.js from line 785 to line 806:
basically you replace the four methods
onClickInstantEvent, onClickMultiplePreciseInstantEvent onClickDurationEvent showBubble
In the CompactEventPainter??.prototype
Timeline.CompactEventPainter.prototype._onClickMultiplePreciseInstantEvent=function(E,A,B){var F=SimileAjax.DOM.getPageCoordinates(E); this._showBubble(F.left+Math.ceil(E.offsetWidth/2),F.top+Math.ceil(E.offsetHeight/2),B); var D=[]; for(var C=0; C<B.length; C++){D.push(B[C].getID()); }this._fireOnSelect(D); A.cancelBubble=true; SimileAjax.DOM.cancelEvent(A); return false; }; Timeline.CompactEventPainter.prototype._onClickInstantEvent=function(C,A,B){var D=SimileAjax.DOM.getPageCoordinates(C); this._showBubble(D.left+Math.ceil(C.offsetWidth/2),D.top+Math.ceil(C.offsetHeight/2),B); this._fireOnSelect(B.getID()); A.cancelBubble=true; SimileAjax.DOM.cancelEvent(A); return false; }; Timeline.CompactEventPainter.prototype._onClickDurationEvent=function(F,B,C){if("pageX" in B){var A=B.pageX; var E=B.pageY; }else{var D=SimileAjax.DOM.getPageCoordinates(F); var A=B.offsetX+D.left; var E=B.offsetY+D.top; }this._showBubble(A,E,C); this._fireOnSelect(C.getID()); B.cancelBubble=true; SimileAjax.DOM.cancelEvent(B); return false; }; Timeline.CompactEventPainter.prototype.showBubble=function(A){var B=this._eventIdToElmt[A.getID()]; if(B){var C=SimileAjax.DOM.getPageCoordinates(B); this._showBubble(C.left+B.offsetWidth/2,C.top+B.offsetHeight/2,A); }};It doesn't break the defeault Bubble behaviour, but it allows finally to extend the method showBubble for CompactEventPainter??.
The difference was just the square brackets around the B and A where this letters are the events passed. I removed them and written as they were in other Painters.
That's it. Bug gone.
Can somebody take this on ? I'm too lazy to checkout the file :-P
There's a way to make the distortion automatic?
walter.oho: Here's an example of an approach that could do just that: http://www.bee-young.co.uk/?p=26
I'm also interested in it but I have to strech my programming skills to do it :)
"can be panned infinitely by dragging" an infinity? Tempting. As a geologist, I'm sitting here, bored, on an oil rig, with a geological time scale in front of me covering 4.5-odd billion years with easy potential to need sub-year resolution. Hell, when you're looking at overprinting footprints, you could well need sub-second resolution. This should shake some bugs out of the trees. Where's my editor and the FM?
4444
Hey can anyone help me figure out why I keep getting an empty box when I try to set up timeline? I followed the steps in the getting started tutorial. Thanks
Can anyone let me know why japanese locale is not supported for timeline? After changing the language to japanese i cannot see Timeline it disappears also i looked arounf l10n folder and i could not get ja folder in it. Is this the issue?