Sparkline rendering is slow and hangs browser

Question

Sparklines are awesome for doing little inline graphs. However, if the container they are in is hidden, you can't simply draw them behind the scenes and then show them. You must first display the container and then call the $.sparkline_display_visible method.

This is ok, except that it's really slow if you have a lot of graphs. I have a little over 200 graphs (and will eventually scale to more) to render and it takes around 4000ms to render them all, hanging the browser. Does anyone know how to either speed up this process (doubtful) or improve perceived performance by not hanging the browser? I tried to add a timer so each graph would show up one at a time while being rendered, but that still takes a while with 200+ graphs and the effect is a bit distracting to the user.

Thanks

Answer 1

You could have the plugin render the graph for the ones that are visible on load then loop through the hidden ones and have it render those in groups of 10. Will make it so the browser doesn't hang and will "pre-render" the hidden ones before you need them.

var sparklines = $('.inlinesparkline').sparkline();
var hidden = sparklines.parent().filter(':hidden').addClass('needsSparkline');

(function loopy(){
    var objs = hidden.filter(':lt(10)').removeClass('needsSparkline');
    hidden = hidden.filter('.needsSparkline');
    if (objs.length) {
        objs.css({
            'display':'',
            'visibility':'hidden'
        });
        $.sparkline_display_visible();
        objs.css({
            'display':'none',
            'visibility':''
        });
        hidden.length && setTimeout( loopy, 250 );
    }
})();