Hi, I'm a Timeline Newbie-just got my first timeline functional on my internal servers-love it!!
I can't figure out how to add filter/highlight boxes to my timeline. I've tried to follow the information given at this link (http://code.google.com/p/simile-widgets/wiki/Timeline_highlighting_and_filtering) and in by mimicking the JFK example. It seems as if I just add two lines of code into my html, and the filtering should work..but I'm obviously missing something. I can't share a live webpage, but here's the HTML I'm using with the two lines of code added in that I thought would turn on filtering: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <!-- <link href="your-css-file.css" type="text/css" rel="stylesheet"/> --> <script> var tl; function onLoad() { var theme = Timeline.ClassicTheme.create(); theme.event.label.width = 400; // px theme.event.bubble.width = 700; theme.event.bubble.height = 500; var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, theme: theme, date: "Jul 1 2002 00:00:00 GMT", width: "75%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 60 }), Timeline.createBandInfo({ overview: true, //makes this band into the zoomed out bar. eventSource: eventSource, date: "Jul 1 2002 00:00:00 GMT", width: "25%", intervalUnit: Timeline.DateTime.YEAR, intervalPixels: 90 }), //Timeline.createBandInfo({ // overview: true, //makes this band into the zoomed out bar. // eventSource: eventSource, // date: "Jul 1 2002 00:00:00 GMT", // width: "25%", // intervalUnit: Timeline.DateTime.YEAR, // intervalPixels: 400 // }) ]; //To make the two bands scroll in synchrony, and then to make the bottom band highlights the visible time span of the top band, add the following code: bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; // bandInfos[2].syncWith = 0; // bandInfos[2].highlight = true; // tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); Timeline.loadXML("sdeevents.xml", function(xml, url) { eventSource.loadXML(xml, url); }) setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; tl.layout(); }, 500); } } </script> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script src="http://knetcontent/timeline/src/webapp/api/timeline-api.js?bundle=true"; type="text/javascript"></script> </head> <b>SDE Timeline</b> <body onload="onLoad();" onresize="onResize();" onunload="GUnload();"> </div> <div class="bodyContentStyle"> <div class="controls" id="controls"></div> <div id="my-timeline" style="height: 300px; border: 1px solid #aaa"> </div> <noscript>This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page. Thank you. </noscript> </body> </html> ------------------------------------------------------------------------------------------------------------------------------------------------------ Marc Shecter<http://internal.amazon.com/phone?query=shecter> | My Internal Blog<https://blogs.amazon.com/users/shecter/> | Reports from KNET? You Betcha!<http://knetcontent/knet_jobaids/reports/reports_in_knet/engage.html> | My Books Available for Borrowing<https://library.amazon.com/userinfo.php?user=shecter> Senior Program Manager 206-266-5583 [cid:[email protected]] --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
<<inline: image001.png>>
