jDempster

jQuery Flot All Loaded Plugin

I’ve been using Flot a Javascript plotting library for jQuery in a few projects recently. I came across the need to know when all the charts have been drawn.

Thankfully Flot has nifty support for plugins. So I wrote one. It’s quick and simple.

    (function ($) {
        // charts will store how many charts initialised, drawn will store how many have been drawn.
        var charts = 0, drawn = 0;

        function monitor() {
            // if we have more charts than there are charts drawn, check again in a little while
            if (charts > drawn) {
                setTimeout(monitor, 50);
            } else {
                // all charts have finished being drawn, if theres a function call it
                if (window.flotCompleted instanceof 'function') {
                    window.flotCompleted();
                }
            }
        }

        // init is called for every flot chart
        function init(plot) {
            // we have another chart
            charts++;
            plot.hooks.draw.push(function() {
                // a chart has finished being drawn
                drawn++;
            });
        }

        // register the plugin
        $.plot.plugins.push({
            init: init,
            name: 'loadingmonitor'
        });

        // give the browser time to have all the charts registered
        setTimeout(monitor, 200);
    })(jQuery);