Switching from Tabs will shrink Chart Margin


#1

Hello, I made use of the tabs AngularJS as shown in the help page. That’s really nice

Sometimes when switching from tab to tab, especially after changing Subnm, the charts are of very high chance to be shrinked. then i have to refresh the page

is it normal? Or is there actually some control to prevent from this issue? Thanks very much


#2

Hi @crea.hui,

Could you help clarify more on the meaning of tab to tab? Meaning by browser tab? Or is it because a library tab? It could be because of the animations by the underlying chart library.

One way you can go about it is to force it to re-create the chart on situations when you want it. This can be done for example, via a combination of ng-if and $timeout. Here is a sample sections of it:

In HTML,

<tm1-ui-chart ng-if="values.show">...</tm1-ui-chart>

In JS or on your controller,


// call this function whenever you want the chart to refresh, i.e. via Refresh button, on page load, etc.
$scope.recreateChart = function(){
  $scope.values.show = false;
  $timeout(function(){
    $scope.values.show = true;
  }, 10);
};

Alternatively, you may need to find a function to have it refresh itself via options through tm1-options-override:

http://krispo.github.io/angular-nvd3/#/

Cheers,
Paul


#3

Hello @plim , thanks so much for your workaround, I would study it and apply to my html later.

Regarding my problem
I made use the example shown on http://localhost:8080/#/bootstrap “Tabs with AngularJS”
class="nav nav-tabs"
so that in single page I could click to switch between tabs.


#4

Hi @crea.hui,

The above workaround should help. Thanks for the clarifications!


Cheers,
Paul