My new code:
var tl;
var eventSource = new Timeline.DefaultEventSource(0);
var eventSource2 = new Timeline.DefaultEventSource(0);
var listOfDate = new Array();
function isset (variable) {
return (typeof variable != 'undefined');
}
function setDateAsLoaded(date){
listOfDate[date]=true;
}
function isDateLoaded(date){
return isset(listOfDate[date]);
}
function loadData3(timeline_date){
var i=0;
for (i=-5;i<=5;i++)
{
var date = new Date(timeline_date);
date.setDate(date.getDate()+i);
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var d = year+'-'+month+'-'+day;
//alert(d);
if(!isDateLoaded(d)){
setDateAsLoaded(d);
tl.loadJSON("test.php?d="+day+"&m="+month
+"&y="+year, function(json, url) {
eventSource.loadJSON(json, url);
tl.finishedEventLoading();
});
}
}
}
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,
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();
});
loadData();
var topBand = tl.getBand(1);
tl.getBand(1).setCenterVisibleDate(Timeline.DateTime.parseGregorianDateTime(new
Date()));
topBand.addOnScrollListener( loadData );
}
function loadData(){
var da = tl.getBand(1).getCenterVisibleDate();
loadData3(da);
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
Only 1 problem, when i scroll (with the month band) he start loading
lot of date at same time and can be slow (apparently he can't do more
than a certain number of synchronous request)
But moving the day band it's really good thanks for the idea
On Sep 30, 9:41 am, Belfo <[email protected]> wrote:
> 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.
