AngularJS ui-chart not working in ui-bootstrap tabs

Question

I use ui-chart angularjs module to show a line graph, the thing is when I put it in ui-bootstrap tabs, it only show the line graph at the first tab, it wouldn't show at the second or third tab.

When I read the jqPlot documentation (ui-chart is a directive for jqPlot), it says it needs to use replot(), but I don't know how to implement this in ui-chart.

Can anyone give me a heads up on this?

Answer 1

Did you include all the plugins required ? You need to include the adequate plugin for each graph. I forgot it a lot of times. Otherwise, I think we might need the code to do more investigation. for example to draw a pie you have to include :

<script src=".../jqplot/plugins/jqplot.pieRenderer.js" type="text/javascript"></script>

in addition.

Answer 2

I've managed to accomplish that by modifying the ui-chart directive, adding the following to the end of it:

var plot = $.jqplot(elem.attr('id'), data, opts);

// search for a tabpanel (jquery-ui tabs) containing the chart
elem.closest('.tabpanel').bind('tabsactivate',
    function(event, ui) {
        if (plot._drawCount === 0) {
            plot.replot();
        }
});

The if _drawCount part is very important because reploting a chart is a heavy-weight operation.