0

In my application I have two tabs, let's simply call them A and B.

Graphs are in tab A. Here's the simple code:

<canvas width="100%" height="30%" style="width: 100%; height: 20%;" id="line_general" 
class="chart chart-line" chart-data="myData" 
 chart-legend="true" chart-colours="colours"
chart-labels="myLabels" chart-series="mySeries"/>

Graph is then populated each time a button is pressed, this button is in the tab A as well:

$scope.buttonPressed = function(){
    $http.get('remoteURL').success(function(response, status, headers, config){
        myLabels = response.labels;
        myData = respose.data;
        ...
}

Problem comes when user switches to tab B once the graph has been initially populated and, while this tab is active, they resize the browser's window. This action triggers an event on the graph which tries to update but, as it is hidden because of the bootstrap UI's tab mechanism, update does not work and causes an exception.

So my idea would be to listen for tab change event, I can do that by adding a select event to tabs with:

<div ng-controller="MainCtrl" class="wrapper">
    <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabChanged(tab)">
            <div ng-include="tab.content"></div>
        </tab>
    </tabset>
</div>

and, inside of the handler:

$scope.tabChanged = function(tab){
    if(tab.title != "A"){
        //disable refresh
    }else{
    //  re-enable refresh

    }
};

so, is there a way to accomplish that?

Phate
  • 6,066
  • 15
  • 73
  • 138
  • Just a random thought, have you tried `ng-click` on the tab element to fire your function ? `ng-click="tabChanged(tab)"` – ODelibalta Sep 18 '15 at 15:17
  • Select just works fine, the event triggers...my problem is to fill those comments with proper code to actually enable/disable refresh of graphs – Phate Sep 18 '15 at 15:18
  • Ah ... Can you put a sample of code of how you are making the chart ? If it is assigned to a variable in your scope, angular might be watching it for changes thus causing the refresh. Just another random thought (: – ODelibalta Sep 18 '15 at 15:21
  • Done, anyway the chart is automagically made by the angular-chart (an angularjs wrapper for the Chart.js library actually): my only task is to populate variables representing data the graph will show. Problem is just related to the automatic resizing event done by the library. – Phate Sep 18 '15 at 15:29
  • Maybe this thread can help you : http://stackoverflow.com/questions/29395853/chart-js-in-angularjs-tabset-does-not-render – bviale Sep 21 '15 at 12:33

1 Answers1

0

Solved with a workaround: each time user switches to the tab in which graphs are contained I manually fire a "resize" window event. This event is listened by the graph library which automatically resizes graphs.

$scope.tabChanged = function(tab){
if(tab.title == "A"){
    $timeout(function() {
            var evt = $window.document.createEvent('UIEvents'); 
            evt.initUIEvent('resize', true, false, $window, 0); 
            $window.dispatchEvent(evt);
        });
}
};

Not very elegant but it will do, waiting for a library update.

Phate
  • 6,066
  • 15
  • 73
  • 138