I have implemented some zooming functionality with jQuery flot, but it is not working quite right. Zoom is implemented by capturing flot's "plotselected" event and re-plotting using the "ranges" parameter to modify the xaxis and yaxis max and min values.

The plot does show up correctly when it is initially plotted, and I can drag to make an x-y selection. When the plot is redrawn, the actual size of the axis grid on screen shrinks, though the appropriate data range is plotted. In addition, every time I zoom-replot, the axis labels disappear from view, though I can still see them in the inspector and there is some cruft in the extreme upper left of the plot that looks like the axis labels may have been moved up there and are partly (barely) visible. I have some other code that re-draws the plot with different data that also removes the axis labels from view, though the size of the plot doesn't shrink (as it does when zooming), and again the appropriate data are plotted. I mention that as perhaps the two issues share a common origin.

I thought perhaps I could take care of these problems by somehow destroying the plot or clearing the canvas before re-drawing, but I haven't found any guidance on how to do this.

Here are some relevant code snippets. The first lists the code which initially renders the plot and binds to the "plotselected" event:

```
            o.midGraph = $.plot($("#small-graph-mid"), testData, graphOptions);
                $("#small-graph-mid").unbind("plotselected");
                $("#small-graph-mid").bind("plotselected", function (event, ranges) {
                    graphOptions = o.midGraph.getOptions();
                    testData = o.midGraph.getData();
                    o.midGraph = $.plot($("#small-graph-mid"), testData,
                            self._graphZoomOptions(graphOptions, ranges));
                });

```

And here is the function that sets the axis extents to the new ranges:

```
    _graphZoomOptions: function(options, ranges) {
        return $.extend(true, {}, options, {
            xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
            yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
        });
    },

```

Am I on the right track in thinking that I need to somehow destroy/clear/reset the plot/canvas?