Introduction

The Timeline library includes highlighting and filtering api calls.

Highlighting

An event can have highlighting added on a per-band basis.

Use the band's getHighlightMatcher and setHighlightMatcher to add your highlighting function.
Your function will have argument evnt -- an event object
Your function returns the highlighting_index (integer) for the event:

0 - no highlighting

9 - highlighting indexes. -- Uses the highlighting css in the css file.

Example

See the JFK Timeline for an example of adding highlighting to a Timeline

Filtering

Bands include a filtering option. Each event in a band with a filter either will pass the filter and be shown in the band, or will be stopped by the filter and not shown.

Use the band's getFilterMatcher and setFilterMatcher to add your filter function.
Your function will have argument evnt -- an event object
Your function returns true if the event passes the filter, or false.

Filters are binary: either an event passes the filter procedure and will thus be shown on the timeline or it doesn't, and the event will be omitted.

If you want additional logic for the user interface then you can make your filter procedure as elaborate as you'd like: eg multiple boxes that "or" the boxes' content against the event name/description; check boxes for different pre-defined event types, ANDing and ORing of expressions; filtering using drop down menus of different event 'categories' etc.

Note that the filter can also look into additional event attributes that are not part of the formal Timeline event attributes. This is done through the method event.getProperty

Example

See the JFK Timeline for an example of adding filtering to a Timeline

Comment by avi.b...@gmail.com, Mar 14, 2009

hgre;;or r;e fure' vre

Comment by wazhe.wi...@gmail.com, Apr 8, 2010

Hi,

Can you provide any example of source code on how to create the highlighting and filtering function? Thanks.

Angelia

Comment by farrelld...@gmail.com, Aug 2, 2010

I can't seem to find any documentation on getFilterMatcher and setFilterMatcher or which file(s) they're in. Any suggestions?

Thanks, Dean

Comment by rex.bark...@gmail.com, Nov 11, 2010

Hey everyone, this is the highlighting code in the JFK example

for (var i = 0; i < bandInfos.length; i++) {
                bandInfos[i].decorators = [
                    new Timeline.SpanHighlightDecorator({
                        startDate:  "Fri Nov 22 1963 12:30:00 GMT-0600",
                        endDate:    "Fri Nov 22 1963 13:00:00 GMT-0600",
                        color:      "#FFC080", /*this is the color of the "span" that is highlighted*/
                        opacity:    50,
                        startLabel: "Duck <br> Now", /* labels can use HTML tags, should be styled in style sheet below, this one is right aligned*/
                        endLabel:   "t.o.d.", /* this one is left aligned*/
                       // theme:      theme,
                       cssClass: 't-highlight1'
                    }),
                    new Timeline.PointHighlightDecorator({ /* this is a point in time - Johnson sworn in aboard Air Force One*/
                        date:       "Fri Nov 22 1963 14:38:00 GMT-0600",
                        color:      "#FFC080",
                        opacity:    50,
                        //theme:      theme,
                        cssClass: 'p-highlight1'
                    }),
                    new Timeline.PointHighlightDecorator({
                        date:       "Sun Nov 24 1963 13:00:00 GMT-0600",
                        color:      "#FFC080",
                        opacity:    50
                        //theme:      theme
                    })
                ];
            }

► Sign in to add a comment