Problem Zoom - Plot

[Frank]

Hello, 
I have a problem with the zoom of a graph.

From code Follow link:  

http://www.flotcharts.org/flot/examples/zooming/index.html

I added two buttons start and stop, because the graph is in realtime.
As soon as I click the Stop button, the zoom area concerned occurs with delay and not immediately.

Why?

     ....        
        // setup plot
            $("button.start").click(function(){
                myVar = setInterval(function () {fetchData()}, 1000);
            });

             $("button.stop").click(function(){
                clearInterval(myVar);
                myVar = null;  
            });
            function fetchData() {
                 function onDataReceived(series) {
                         data    =  series;
                         var plot = $.plot("#placeholder",[ data ], options);
                         var overview = $.plot("#overview", [ data ], {
                                        legend: {
                                                show: false
                                        },series: {
                                                lines: {
                                                        show: true,
                                                        lineWidth: 1
                                                },
                                                shadowSize: 0
                                        },xaxis: {
                                                ticks: 4
                                        },yaxis: {
                                                ticks: 3
                                        },grid: {
                                                color: "#999"
                                        },selection: {
                                                mode: "xy"
                                        }
                         });

                    // now connect the two

                    $("#placeholder").bind("plotselected", function (event, ranges) {
                    plot = $.plot("#placeholder", [ data ],
                    $.extend(true, {}, options, {
                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                              yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
                    })
                    );

                    overview.setSelection(ranges, true);
                    });

                    $("#overview").bind("plotselected", function (event, ranges) {
                    plot.setSelection(ranges);
                    });
                }
                   
     ....

Every time you click Start and Stop to make the zoom, zoom area takes a long time.

Thanks

[Ced]

You should not bind event handlers in your interval handler, fetchData()

Every 1000ms, you are adding a new event handler.  Eventually, you will have too many event handlers running which will slow down your page.