Creating a vertical bar in the timeline

[SteveP]

My goal is to create something similar to the picture attached below. This is from the JFK example.

Am I limited to creating hot zones, or is there another method, preferably one I can specify in a JSON source file?

[Michael Nosal]

These can be created with SpanHighlightDecorators. HotZones are used to expand/compress a span of time. SpanHighlightDecorators simply draw the highlighted region on the timeline band.

You can easily specify these start/end times in a JSON file, which is loaded via ajax and then processed to create SpanHighlightDecorators. 

--Mike

[Steve Pai]

Thanks for clearing that up Michael. Re-reading the JFK example makes a lot more sense now.

Do you have any examples I can reference?  So if I understand correctly, within the timeline script I would have something like:

Timeline.SpanHighlightDecorator({
                                startDate:  startDate ,
                                endDate:    endDate
                            });

Do I then use loadJSON to specify the source file? Sorry, this is all still very new to me.

Steve

--
You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group.
To post to this group, send email to simile-...@googlegroups.com.
To unsubscribe from this group, send email to simile-widget...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en.

[Michael Nosal]

Simple example - lets add decorators to the Life of Monet example (http://simile-widgets.org/timeline/examples/monet/monet.html)

Make a json file with the dates for your decorators (wars.json):

[{"title":"Crimean War",start:"1853",end:"1856"},

 {"title":"Algerian War",start:"1830",end:"1847"},

 {"title":"Franco-Prussian War",start:"1870",end:"1871"}]

Decorators are specified as part of the bandInfos, but no reason we can't add them after the fact. Let's add a method to _Band:

Timeline._Band.prototype.addDecorator = function(decorator) {

this._decorators.push(decorator);

decorator.initialize(this,this._timeline);

decorator.paint();

}

(Don't modify the Timeline source code to do this, instead load this function as part of your own code, either as a .js script or as a <script> element in your HTML).

Now we can add decorators to our Bands anytime we like.

tl.loadJSON("wars.json", function(json) {

  var len = json.length;

  var band = tl.getBand(1);

  while (len--) {

    var span = json[len];

    var deco = new Timeline.SpanHighlightDecorator({

      startDate : span.start,

      endDate : span.end,

      startLabel : span.title

    });

    band.addDecorator(deco);

  }

});

--Mike

[Steve Pai]

Michael, I can't thank you enough! Extremely helpful example. :)

--

[Steve Pai]

Michael, another question for you if you don't mind:

I'd like to define start/end time in the form: '2000-01-01' rather than just year. If I change format in the JSON source file, the timeline appears to hit an error while trying to parse it. So, I assumed that we needed to leverage the .parseGregorianDateTime function:

var deco = new Timeline.SpanHighlightDecorator({

startDate : Timeline.DateTime.parseGregorianDateTime(span.start),

endDate : Timeline.DateTime.parseGregorianDateTime(span.end),

startLabel : span.title,

color : span.color

});

However, this does not seem to work either. Is there another parameter I am missing?

Steve

[Michael Nosal]

On Mar 20, 2012, at 5:19 PM, Steve Pai wrote:

> Michael, another question for you if you don't mind:
>
> I'd like to define start/end time in the form: '2000-01-01' rather than just year. If I change format in the JSON source file, the timeline appears to hit an error while trying to parse it. So, I assumed that we needed to leverage the .parseGregorianDateTime function:
>
> var deco = new Timeline.SpanHighlightDecorator({
> startDate : Timeline.DateTime.parseGregorianDateTime(span.start),
> endDate : Timeline.DateTime.parseGregorianDateTime(span.end),
> startLabel : span.title,
> color : span.color
> });
>
> However, this does not seem to work either. Is there another parameter I am missing?
>
> Steve

This causes lots of confusion for folks.
parseGregorianDateTime() basically tries to do two things with a date string:
If it's less than 8 chars long, it assumes it is a year value.
e.g. parseGregorianDateTime will return:
"1995" -> Sun Jan 1 1995

If it is more than 8 chars long, then it calls the JS Date.parse method.
This takes dates in the RFC2822 / IETF date syntax:
"Mon, Dec 25 1995" or "25 Dec 1995" or "December 25, 1995".

Browsers differ in their support of date formats that are not RFC2822. For example, Firefox supports a subset of ISO8601 date formats. Firefox will parse "1995-12-25", Safari will not. Firefox and Safari will parse "12/25/1995" but not "12-25-1995". IE9 supports the ISO8601 date formats. If the date format is not ISO8601, then IE will attempt to parse the date by using (in their words) "other parsing rules".

So your best bets are to format your dates as "25 Dec 1995" or "12/25/1995" if you want to use parseGregorianDateTime.

You say you want to define your dates as "2000-01-01", which is a subset of the ISO8601 format.
You can use Timeline.DateTime.parseIso8601DateTime("1995-12-25").

Hope this helps.
--Mike

[Steve Pai]

Thank you Mike, that helped a lot. Again, great explanation :)