Flot Returns Incorrect X Value (mm/dd/yy - Date) After Zoom For Stack Bar Chart

I want to get the correct x axis label when user zooms the chart and click on a specific bar when clicking on the bar on (02/14/14 - xaxis) the alert shows the (02/19/14 - xaxis) l

Solution 1:

The problem is this line of code:

var tickClicked = item.series.xaxis.ticks[item.dataIndex+1].label; 

When your plot is unzoomed you have one tick per datapoint (bar). When you zoom, however, you end up with in between ticks, so the finding a tick by item.dataIndex isn't going to work.

I'm guessing you care more about the data associated to the bar (and not really the tick) so get the bar x value and format it back to a date string.

var tickClicked = $.plot.formatDate(newDate(item.datapoint[0]),"%m/%d/%Y");

EDITS

Instead of making another .plot call on zoom redraw the chart with (this is how I do it in my applications using flot):

var opts = plot.getOptions();
opts.xaxes[0].min = ranges.xaxis.from;
opts.xaxes[0].max = ranges.xaxis.to;
opts.yaxes[0].min = ranges.yaxis.from;
opts.yaxes[0].max = ranges.yaxis.to;
plot.setupGrid();
plot.draw();