Selection zoom isn't working

[naveen chandra]

Hi,

We have used flotr2 framework for charting purpose in our web application.

The requirement is to zoom the data points displayed on the chart.

Refer to Chart (A) in the attachment for more details.

Below is the code that has been used to generate the chart.

function add(array, x, y, html) {
	array.push([x, y]);
	var key = x.toFixed(2) + "," + y.toFixed(2);
	xyToHtml_[key] = html;
	}

(function basic_axis(container) {
	var xAxisTicks = null;
	var s0 = []; //s0 has data set up for specific points only as per the chart in the attachment(all green dots)

	add(s0, 400.0, 21.445172413793106) - pushes element to s0 array. add(s0, 500.0, 21.34892634242958 ... so on... 16 points in total are present in this array.
	var data = [
	{ data : s0, label : "Win" , points : { show : true , fillColor: ['green', 'green'], fill : true}, color:"green", fill : true },
	{ data : s1, label : "Loss" , points : { show : true , fillColor: ['red', 'red'], fill : true}, color:"red", fill : true },
	{ data : s2, label : "Pending" , points : { show : true , fillColor: ['black', 'black'], fill : true}, color:"black", fill : true },
	{ data : s3, label : "Price Logarithmic" , points : { show : false } , lines : { show : true }, color:"#00A8F0", fill : true },
	var settings = {
	mouse : {
	track: true,
	lineColor: 'black',
	relative: true,
	position: 'ne',
	sensibility: 1, // => The smaller this value, the more precise you've to point
	trackDecimals: 2,
	trackFormatter: function(o) { return format(o); },
	selection : { mode : 'x', fps : 30 }
	},
	xaxis : {
	min : 0.0,
	max : 1100.0,
	},
	yaxis : {
	min : 0.0,
	max : 3.1675656411617134E7,
	},
	grid : {
	verticalLines : true,
	backgroundColor : {
	colors : [[0,'#fff'], [1,'#ccc']],
	start : 'top',
	end : 'bottom'
	}
	},
	legend : {
	container : getById("leg17"),
	},
	points : {
	show : true,
	stacked : true,
	horizontal : false,
	barWidth : chart17BarWidth_,
	lineWidth : 1,
	shadowSize : 3
	},
	title : "",
	subtitle : "Price/Volume"
	};
	options = {
	selection : { mode : 'x', fps : 30 }
	}
	function drawGraph (opts) {
	var o = Flotr._.extend(Flotr._.clone(options), opts || {});
	return Flotr.draw(container, data, o);
	}
	graph = drawGraph();
	Flotr.EventAdapter.observe(container, 'flotr:select', function (area) {
	graph = drawGraph(
	{
	xaxis: {min:area.x1, max:area.x2},
	yaxis: {min:area.y1, max:area.y2}
	});
	});
	Flotr.EventAdapter.observe(container, 'flotr:click', function () { drawGraph(); });
	})
	(getById("chart17"));
	} The data points on the chart got disappeared during zooming process however the data variable still holds the values.

zoom selection image :

Original Image :

After zoom:

The data points are lost and not visible.

Can someone provide pointers on how to handle this issue ?

Thanks in Advance,

Naveen