Hello, thanks for the info.
Just how can you work on eventSource? Ok for calling the page only when needed.But how i can add manually data to eventSource (to check if data is already there and avoir double entry) Thanks On Sep 29, 9:40 pm, Michael Nosal <[email protected]> wrote: > You are on the right track, but the problem is that the onScrollListener gets > called every time your Timeline moves a single pixel. > You want this function to do nothing unless absolutely necessary. > For example, your ajax request is asking test.php for new data for an entire > day. You want to fetch this data once when the user scrolls to a new day, not > every time the user scrolls. > Here's how I approached this problem: > > Create the timeline > Fetch data for "today" (9-29-2011) > Add "9-29-2011" to the list of days I've fetched data for (ListOfDays) > > onScrollListener = function() { > var currDate = date of timeline() > if (currDate is NOT in ListOfDays) { > add currDate to ListOfDays > fetch new data via ajax for currDate { > update eventSource > tl.layout() > } > } > > } > > This way, I only load new data if it hasn't been fetched before, and the user > has scrolled the timeline to a date they haven't seen before. It avoids > removing the scrollListener, stopping the timeout, restarting the timeout, > re-adding the scroll listener, hoping the data returns in a reasonable time, > etc. The data is being returned asynchronously anyway, so I don't care how > long it takes to show up. It also avoids race conditions between > window.setTimeout()'s > > I don't clear out the event source when fetching new data. Rather I loop over > the returned data, adding/changing/deleting events in the eventSource as > necessary. Creating events from JSON is expensive, so only do it if necessary. > > Performance is really excellent with this setup, and most of the time the > user has no idea that data is being loaded on the fly. > > --Mike > > On Sep 29, 2011, at 8:25 AM, Belfo wrote: > > > > > > > > > I progressed putting this code: > > > var tl; > > var eventSource = new Timeline.DefaultEventSource(0); > > var eventSource2 = new Timeline.DefaultEventSource(0); > > function onLoad() { > > > var theme1 = Timeline.ClassicTheme.create(); > > theme1.autoWidth = true; > > theme1.mouseWheel = "default"; > > theme1.firstDayOfWeek=1; > > > var bandInfos = [ > > Timeline.createBandInfo({ > > overview: true, > > width: "10%", > > intervalUnit: Timeline.DateTime.MONTH, > > eventSource: eventSource2, > > theme: theme1, > > intervalPixels: 100, > > timezone: 1 > > }),Timeline.createBandInfo({ > > > width: "10%", > > intervalUnit: Timeline.DateTime.DAY, > > //overview: true, > > eventSource: eventSource, > > theme: theme1, > > intervalPixels: 150, > > timezone: 1 > > }) > > > ]; > > bandInfos[0].syncWith = 1; > > > bandInfos[0].highlight = true; > > > tl = Timeline.create(document.getElementById("tl"), > > bandInfos); > > > tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime > > (new > > Date())); > > tl.loadJSON("test.php", function(json, url) { > > eventSource2.loadJSON(json, url); > > tl.finishedEventLoading(); > > // > > tl.getBand(0).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime > > (new > > Date())); > > > }); > > var da = tl.getBand(1).getCenterVisibleDate(); > > var date = new Date(da); > > var day = date.getDate(); > > var month = date.getMonth(); > > var year = date.getFullYear(); > > tl.loadJSON("test.php?d="+day+"&m="+month+"&y="+year, > > function(json, url) { > > eventSource.loadJSON(json, url); > > tl.finishedEventLoading(); > > > tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime > > (new > > Date())); > > > }); > > > var func2 = function(){ > > > window.clearTimeout(initTimer); > > var topBand = tl.getBand(1); > > topBand.addOnScrollListener( loadData ); > > } > > var initTimer=window.setTimeout(func2,3000); > > } > > > function loadData(){ > > var band = tl.getBand(1); > > > if (band._timer !== false) { > > window.clearTimeout(band._timer); > > band._timer = false; > > } > > var func = function() { > > band.removeOnScrollListener(loadData); > > window.clearTimeout(band._timer); > > band._timer = false; > > var eventSource = band.getEventSource(); > > eventSource.clear(); > > var da = band.getCenterVisibleDate(); > > //alert(da); > > var date = new Date(da); > > var day = date.getDate(); > > var month = date.getMonth(); > > var year = date.getFullYear(); > > tl.loadJSON("test.php?d="+day+"&m="+month > > +"&y="+year, function(json, url) { > > eventSource.loadJSON(json, url); > > tl.finishedEventLoading(); > > > }); > > tl.layout(); > > band.addOnScrollListener(loadData); > > }; > > band._timer = window.setTimeout(func,3000); > > > } > > > var resizeTimerID = null; > > function onResize() { > > if (resizeTimerID == null) { > > resizeTimerID = window.setTimeout(function() { > > resizeTimerID = null; > > tl.layout(); > > }, 500); > > } > > } > > > The problem is i must set a timeout large enough to be sure the data > > is loaded (and can be long (4s) when passing through reverse proxy/ > > firewall) otherwise it start calling the test.php page infinitely. > > Also with this solution, when scrolling i wait the settled second > > before start to showing data. > > > -- > > 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 > > athttp://groups.google.com/group/simile-widgets?hl=en. -- 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.
