chart / grid width resizing unexpectedly on plotselected event.

[Christopher Hacia]

I am attempting to zoom in on plots as per the example on the main site, minus the ability to run if there are multiple charts on the page at once.

My problem as it seems. Is randomly at best reproducible. Meaning I can reproduce it again and again, but not with consistency. So I can't figure out the exact issue.
I have been trying to pick it apart all day, and I know its specifically involves the code Im pasting below, and from it, I have tried to track down what I might be able to alter inorder to stop this behavior but unsuccessfully. Not to many people seem to have this issue from what I can find, and those who have do not provide a solution or at least not one that makes sense.

    $(idStr).bind("plotselected", function (event, ranges) {
        console.log(ranges);
        plot_base = a_charts.findBindingPlot('#'+$(this).attr('id'));
        console.log(plot_base);
        if(plot_base !== null && plot_base !== undefined)
        {
            plot = $.plot(plot_base.chart_id, plot_base.chart_data, plot_base.chart_settings);
            $.each(plot.getXAxes(), function(_, axis) {
                var opts = axis.options;
                opts.min = ranges.xaxis.from;
                opts.max = ranges.xaxis.to;

                console.log(opts);
            });
            plot.setupGrid();
            plot.draw();
            plot.clearSelection();
        }
    });

Below is a before/after image of a the right side of my chart before resize, and after resize. From what I've discovered otherwise, nothing else changes size not the labels not the main container, nothing. Just the area's width of the black bordered element. (The Refresh Icon is a fixed position element that I have floating over the grid, outside of the canvas)

Before:

After:

[Ced]

I feel like I just answered this a couple days ago.  Did you look at the sample I linked in your last post?  Did the sample code not work for you?
http://jsfiddle.net/troo1e8n/

Your opts variable doesn't do anything.  It's local. Setting new values in opts doesn't change anything in the plot.
The only way to update options in a plot is through a call to $.plot()

setupGrid(), draw(), and clearSelection() don't do anything meaningful here because you haven't actually changed anything.

One way to do this would be to $.extend plot_base.chart_settings with your new range options and then call $.plot().  See the flot selection and zooming example.
Or just refer to the sample I linked for a slightly different way to do it that also supports multiple charts on one page.

Also, I'm guessing findBindingPlot() doesn't return undefined (if it does, it probably shouldn't), so your conditional doesn't need to check that.

[Christopher Hacia]

This portion is directly inherited from flotcharts.org's example's. (well without the console.log()).

            $.each(plot.getXAxes(), function(_, axis) {
                var opts = axis.options;
                opts.min = ranges.xaxis.from;
                opts.max = ranges.xaxis.to;

                console.log(opts);
            });
            plot.setupGrid();
            plot.draw();
            plot.clearSelection();


Commenting out any piece of that, and the chart fails to re-render zoomed in, with exception of
clearSelection which clears out the selection I've made. Otherwise the selection remains. Though you are correct in the sense that short of some voodoo somewhere its hard to make out how exactly opts actually ties in, but it does.

That all said, I did manage to get my charts to work on the page independently of one another despite how many are rendered at a time. With exception of toggling series on and off, which is only temporary at the time.

With that this question though maybe similar sounding in nature due to the mention of multiple charts is about a whole different aspect of the charts. From which your example on jsFiddle also does. Again like with my charts its not always a situation you can expect to happen everytime, but if you make a selection on a chart a few times you will notice the right hand side the border of the actualy chart shifts left and right. That specific issue is the issue I am trying to figure out how to stop, since it brings attention to the reset button I have placed above the chart. Since its a fixed position assuming that that chart wouldnt resize like it does.

[Ced]

I was wrong about the local variable, you're right.  It's actually a copy of a reference to the axis.options object.
It's still unclear why you're seeing that weird selection behavior.  It might help if you could reproduce it in a jsFiddle.