CODEWITHSUNDEEP
javascriptjqueryflot
CR41G14
CR41G14

Reputation: 5594

Flot chart loading animation while rendering

I am trying to implement some sort of animation while a large graph gets rendered using Flot chart. I have tried numerous solutions all of which have failed. Does anyone know if this is at all possible so the user can see that the graph is being rendered.

I have attempted to use an overlay with a loading gif but the gif does not animate until the graph has stopped rendering.

The code is being asked a lot of but I want to make sure the user can see the progress.

Thanks in advance

Upvotes: 3

Views: 2238

Answers (1)

DNS
DNS

Reputation: 38199

Flot renders the whole plot in one pass on the UI thread. There's no way to show progress without modifying the library itself. A perfect solution would take a lot of work, but, depending on your data, a decent approximation might not require much effort.

For example, let's say your plot contains many series, and each one by itself renders pretty quickly, but together they take a long time. In that case, if you open the Flot source and look for the draw function, you'll see that there is a simple loop calling drawSeries for each series:

function draw() {

    CODE BLOCK A

    for (var i = 0; i < series.length; ++i) {
        executeHooks(hooks.drawSeries, [ctx, series[i]]);
        drawSeries(series[i]);
    }

    CODE BLOCK B
}

Replace that with (roughly; haven't tested this) the following:

function draw() {

    CODE BLOCK A

    var i = 0,
        drawNextSeries = function() {
            drawSeries(series[i]);
            if (++i < series.length) {
                setTimeout(drawNextSeries, 0);
            } else {
                CODE BLOCK B
            }
        };

    setTimeout(drawNextSeries, 0);
}

The idea is to draw each series in a separate call via setTimeout. The zero-millisecond delay queues up the call to run after any pending work, like other JS code, animations, etc. So after each series draws, there's a chance for the UI to update before the next one draws.

Again, this only works if you have many series that each draw fairly quickly. If you have just one big series, you'll still end up doing something similar, but within drawSeries.

Upvotes: 4

Related Questions