bug using jquery.sparkline with jquery ui tabs()

[simogeo]

Hi,

And first thanks for this plugin. It seems there is a bug using it with tabs() function. Indeed, sparkline is working well on the active tab, but not working when clicking others tabs.

I've seen the problem also described her in SO : http://stackoverflow.com/questions/13952354/sparklines-not-drawing-when-using-bootstrap-and-using-tabs

The proposed workaround is not working. It just hides the span containing values. Any help/clue would be welcome.

(I'm using version 2.1.2)

Thanks

[gwatts]

You need to call the $.sparkline_display_visible() function when the tab is displayed for the sparkline to be rendered as per http://omnipotent.net/jquery.sparkline/#hidden

You can also take a look at the source for the sparklines project page to see how it works there - Take a look at renderTabs() function in http://omnipotent.net/jquery.sparkline/assets/index.js (you should only need the call to $.sparkline_display_visible() inside the tabshow event handler; the rest is specific to the site)

[simogeo]

Indeed, it works well. thanks for support. :+1:

[ChidoYo]

I have the same problem but we have an AngularJS app and we are using the bootstrap tabs. We created a directive for both the bootstrap tabs and the sparklines. I'm not quite sure where to place the function call for $.sparkline_display_visible();. Has anyone come across this issue on an AngularJS app in Bootstrap?

[simogeo]

THis is how I resolved the issue related to sparkline and jquery tabs plugin :

    $( "#tabs").tabs().bind("tabsshow", 
            function(event, ui) {
                $.sparkline_display_visible();
            }
    );

[simogeo]

I was working with old versions of jQuery and jQuery.ui.

Since I've updated them the instructions should now be :

    $( "#tabs").tabs({
        activate: function( event, ui ) {
            $.sparkline_display_visible();
            }
    });

Hope it's not to late for you