You should also try Exhibit if you want fancy filtering features:
http://simile.mit.edu/exhibit/
David
jqueryui-vienna wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
