if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var d = xmlhttp.responseText;
var data = eval(d);
drawVisualization(data);
}
The "drawVisualization" function then renders the timeline using that data.
function drawVisualization(data)
{
timeline = null; // setting to null in the hope of reclaiming the memory allocated to timeline
var options =
{
'min': new Date(2012,4,1),
'max': new Date(2012,8,31),
'width': "100%",
'height': "auto",
'editable': false,
'showNavigation': false,
'eventMargin': 40, // minimal margin between events
'eventMarginAxis': 0, // minimal margin beteen events and the axis
'groupsChangeable' : false,
'groupsOnRight': false,
'axisOnTop': true
};
timeline = new links.Timeline(document.getElementById('tl'));
timeline.draw(data, options);
}
There are buttons on this java script page that allow the user to move forward or backwards in time. Each click of the button (forward or back) loads data corresponding to that time range and replaces the time line data on that page. Yes, I am aware that the widget itself offers this feature - but I have millions of events to show. So I have to take control of the "pagination".
When I do this repeatedly (say I move in the forward direction 10 times). I observe the following: