Timeline Documentation

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 = [

Timeline.createBandInfo({

eventSource: dataSource, date: "18 Dec 2008 04:00:00", width: "90%", intervalUnit: Timeline.DateTime?.DAY, intervalPixels: 50, theme: mytheme, zoomIndex:0, zoomSteps:[

{unit:Timeline.DateTime?.DAY, pixelsPerInterval:50}, {unit:Timeline.DateTime?.DAY, pixelsPerInterval:100}, {unit:Timeline.DateTime?.DAY, pixelsPerInterval:200}, {unit:Timeline.DateTime?.HOUR, pixelsPerInterval:30}

]

})];

//============ 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) {

timeline.getBand(0).setCenterVisibleDate(Timeline.DateTime?.parseGregorianDateTime(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 
    &lt;a href="http://simile.mit.edu/timeline/"&gt;Timeline&lt;/a&gt;.
  </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?