Finally I figured out a simple timeline filtering function, which would make a nice addition to the GettingStarted-Tutorial. Note that the source code omits some necessary parts (e.g. loading JSON/XML EventSource), so it won't work out of the box. Anyhow the comments ease the understanding of event filtering even for Newbies.
<!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.2.0/ timeline-api.js" type="text/javascript"></script> var tl; //the global tl variable references your timeline, it gets populated in the onLoad function function onLoad() { var eventSource = new Timeline.DefaultEventSource(); 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); //here you would load your JSON/XML data and populate your event source } function filter_timeline (str){ var filter_matcher = null; //setting the filter_matcher to null means no event gets filtered out if (str !== ""){ //filter matcher is a callback function that is invoked as the EventPainter iterates over the timeline events //the evt parameter stands for the current event //filter_matcher either returns true (event is still shown on timeline) or false (event gets filtered out). filter_matcher = function(evt) { //look for str in event caption and description and display the event if contained if ((evt.getText + evt.getDescription()).toLowerCase().indexOf (str.toLowerCase()) > - 1){ return true; } //hide all non-matching events return false; } } //activate the filter on the first timeband of the timeline tl.getBand(0).getEventPainter().setFilterMatcher(filter_matcher); //repaint the timeline after filtering tl.paint(); } </head> <body> <div id="my-timeline"></div> <!-- This is our filter form --> <label for="locationfilter">Filter by Event Location:</label> <!--with the onchange event handler, filter_timeline is invoked as soon as a new option was selected --> <select id="locationfilter" name="locationfilter" onchange="filter_timeline(this.value);"> <option value="">All Venues</option> <!--note the empty string in the value attribute, which tells filter_timeline to leave all events untouched --> <option value="http://meyerspub.example.com";>Meyer's Pub</option><!-- only show events whose text/description contains the URL http://meyerspub.example.com--> <option value="http://chezbruno.example.com";>Chèz Bruno</ option> <option value="http://pueblobar.example.com";>El Pueblo</option> </select> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "SIMILE Widgets" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/simile-widgets?hl=en -~----------~----~----~----~------~----~------~--~---
