Refreshing data on Panels

I have a Canvas report that contains 2 selection boxes, month and year. It also contains 2 tabs. Each tab has a report.

When I change one of the selection boxes, only the current tab report is updated. When I switch to the second tab, there is no data. If I redo the selection box, then the data appears.

The selection boxes are on the same page above the tabs, thus they should control both reports.

The tabs are activated by the data-toggle code below.

<ul class="nav nav-tabs">
			<li class="active">
        <a  href="#1" data-toggle="tab">Cash Costs by Account</a>
			</li>
			<li><a href="#2" data-toggle="tab">Cash Costs by Activity</a>
			</li>
	</ul>

Each tab as an ID of 1 or 2. The toggle code is using href anchors to link between the tabs. This code is from the bootstrap site.

Do you know why both tabs are not populated when the page is first loaded or a selection is made?

Brian

Hi @bknott,

Will need more information about it.

How about the actual content?

If you type in a normal text, are they visible on first load?


Paul

hi @plim. Maybe a couple of screen shots to explain it.

This is the screen when you first go to the report.The mine cash cost by account is selected and we have graphs.

When I click the Mine cash costs by activity tab I get the screen below. Notice no data in the graphs

If I change the month I get data the graphs are refreshed.

However switching back to the original mine cash costs by account tab, and the data is gone.

Brian

Hi @bknott,

Try to display the variable you need on each tab. For example, if the dropdowns are tied to titles.year and titles.period, then on each section of the tab, display them like:

{{titles.year}} and {{titles.period}}

What I would like to check is if the values are visible when the tab is activated.

Also, how are you initializing the contents of the tab pane? Try to use ng-if with the graphs so that it only retrieves data from TM1 if the tab where it is located is the active one.

For example:

<div ng-init="titles.activeTab = 1">
	<ul class="nav nav-tabs">
		<li ng-class="{'active':titles.activeTab == 1}">
			<a ng-click="titles.activeTab = 1"  data-toggle="tab">Cash Costs by Account</a>
		</li>
		<li ng-class="{'active':titles.activeTab == 2}">
			<a ng-click="titles.activeTab = 2" data-toggle="tab">Cash Costs by Activity</a>
		</li>
	</ul>
	<div ng-if="titles.activeTab == 1">
		<!-- First Tab Contents -->
	</div>
	<div ng-if="titles.activeTab == 2">
		<!-- Second Tab Contents -->
	</div>
</div>

Note that you can also remove the href. I had also utilized ng-class in here to set the ‘active’ class.


Paul

Hi @plim

With the original href, the {{selection.month}} variable is shown and updated on both tabs whenever a change is made on either tab. Its just the graphs and tables that are not updated on the hidden tab…

If I change to ng-class to hide then there is nothing on the second tab, not even the text. See below



Brian

Hi @bknott,

What do you mean by changing to ng-class to hide?

As for the charts, have you tried to use ng-if instead? So that it only initialize if the tab where it is related to is the active one?


Paul

Hi @plim.

If I use your code with ng-class and onclick, Then the second tab is blank.

I’m not sure what you mean by ‘have you tried to use ng-if instead?’ I want to data to be initialized on both tabs.

Brian

Hi @bknott,

Can you post your HTML here? Those that shows:

  • The tabs
  • The container that houses the tm1-ui-chart section
  • The tm1-ui-chart section


Paul

Hi @plim.

Code is below

There is a table in each page as well that I have cut out to simply it as well. Interestingly the tables update, Just nt the charts.

<div ng-controller="MineCashCostsCtrl">

<ol class="breadcrumb">
  <li><a href="#/">Home</a></li>
  <li class="Unit Mine Cash Costs Report">Data</li>
</ol>

  <h1>
    <span style="float: left; width: 50px; "><i ng-if="$root.isLoading"  class="fa fa-cog fa-spin" ></i><i ng-if="!$root.isLoading" class="fa fa-file-text-o"></i></span> Unit Mine Cash Costs Report
  </h1>
  
  <div class="row">
  	<div class="col-md-2">
			<tm1-ui-subnm
							tm1-instance="Wesfarmers_Prod" 
							tm1-dimension="year" 
							tm1-subset="years" 
							tm1-default-element="{{default.year}}" 
							ng-model="selections.finYear" >
			</tm1-ui-subnm>
  	</div>
  	<div class="col-md-4">
			<tm1-ui-subnm
							tm1-instance="Wesfarmers_Prod" 
							tm1-dimension="Month" 
							tm1-default-element="{{default.month}}" 
							tm1-subset="Canvas-MonthsOnly" 
							tm1-attribute="DESC"
							ng-model="selections.month" >
			</tm1-ui-subnm>
  	</div>
  	<div class="col-md-4">
  	
  	</div>
  </div>
    
	<!-- tabs for data -->
	<ul class="nav nav-tabs">
			<li class="active">
        <a  href="#1" data-toggle="tab">Cash Costs by Account</a>
			</li>
			<li><a href="#2" data-toggle="tab">Cash Costs by Activity</a>
			</li>
	</ul>
	<!--ul class="nav nav-tabs">
		<li ng-class="{'active':titles.activeTab == 1}">
			<a ng-click="titles.activeTab = 1"  data-toggle="tab">Cash Costs by Account</a>
		</li>
		<li ng-class="{'active':titles.activeTab == 2}">
			<a ng-click="titles.activeTab = 2" data-toggle="tab">Cash Costs by Activity</a>
		</li>
	</ul-->

		<div class="tab-content ">

			<!--- tab 1 for cash costs by account -->
			<div class="tab-pane active" id="1">

				<div class="row">
					<div class="col-md-4 panel panel-default">
						<h4 class="text-center">Mine Cash Costs by Account Month to Date {{default.fullMonth}}</h4>
						<tm1-ui-chart tm1-chart-type="multiBar" tm1-axis-label-y="$/t" tm1-axis-label-x="" tm1-height="600">
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Contractors - Thiess" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Contractors,69311,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Contractors - Other" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Contractors,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Labour" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Labour,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Fuel" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Fuel,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Maint. Spares" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Maintenance Spares,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Other" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Other cash cost accounts,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Explosives" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Explosives,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Water/Elec" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Explosives,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Consumables" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Consumables,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Hire Equipment" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Hire Equipment,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Process Cons" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Process Consumables,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Tyres" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},Tyres & Tubes,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-db>
						</tm1-ui-chart>
					</div>	

					<div class="col-md-4 panel panel-default">
						<h4 class="text-center">Mine Cash Costs by Activity Year to Date {{selections.finYear}}</h4>
						<tm1-ui-chart tm1-chart-type="multiBar" tm1-axis-label-y="$/t" tm1-axis-label-x="" tm1-height="600">
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Contractors - Thiess" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Contractors,69311,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Contractors - Other" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Contractors,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Labour" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Labour,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Fuel" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Fuel,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Maint. Spares" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Maintenance Spares,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Other" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Other cash cost accounts,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Explosives" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Explosives,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Water/Elec" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Explosives,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Consumables" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Consumables,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Hire Equipment" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Hire Equipment,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Process Cons" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Process Consumables,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-dbr>
							<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}"  tm1-series="Tyres" tm1-instance="Wesfarmers_prod" tm1-cube="Trial_Balance" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_YTD,Tyres & Tubes,total identifier,total activity,total lob,total location,01,value (000000),$" ></tm1-ui-chart-db>
						</tm1-ui-chart>
					</div>	

				</div>

			</div><!-- end of tab-pane 1 -->
					

			<!-- tab 2 for cash costs by account -->
			<div class="tab-pane" id="2">
		
				<!-- cash costs by activity go here -->
				<div class="row">
					<div class="col-md-4 panel panel-default">
							<h4 class="text-center">Mine Cash Costs by Activity Month to Date {{default.fullMonth}}</h4>
							<tm1-ui-chart tm1-chart-type="multiBar" tm1-axis-label-y="$/t" tm1-axis-label-x="" tm1-margin-bottom="chart.margin" tm1-height="400">
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Drill and Blast" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2001,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Dragline Systems" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2002,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="truck and Shovel" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2003,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Coal Mining" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2005,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Coal Processing" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2006,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Indirect" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}},total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2007,value (000000),$" ></tm1-ui-chart-dbr>
							</tm1-ui-chart>
					</div>	

					<div class="col-md-4 panel panel-default">
							<h4 class="text-center">Mine Cash Costs by Activity Year to Date {{selections.finYear}}</h4>
							<tm1-ui-chart tm1-chart-type="multiBar" tm1-axis-label-y="$/t" tm1-axis-label-x="" tm1-margin-bottom="chart.margin" tm1-height="400">
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Drill and Blast" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_ytd,total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2001,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Dragline Systems" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_ytd,total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2002,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="truck and Shovel" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_ytd,total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2003,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Coal Mining" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_ytd,total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2005,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Coal Processing" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_ytd,total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2006,value (000000),$" ></tm1-ui-chart-dbr>
								<tm1-ui-chart-dbr ng-repeat="scenario in ['Budget','Actual'] track by $index" tm1-order-no="{{$index + 1}}" tm1-label="{{scenario}}" tm1-series="Indirect" tm1-instance="Wesfarmers_prod" tm1-cube="ABC" tm1-elements="{{scenario}},Base,{{selections.finYear}},{{selections.month}}_ytd,total tb account,total identifier,total activity,total lob,total location,01,total allocation,all abc equipment,total abc location,2007,value (000000),$" ></tm1-ui-chart-dbr>
							</tm1-ui-chart>
					</div>	

				</div>


		</div> <!-- end of tab div-->

</div><!-- end of controller div -->

Hi @bknott,

Can you try the following changes to check if it helps:

<!-- tabs for data -->
<ul class="nav nav-tabs" ng-init="values.activeTab = 1">
	<li class="active">
		<a ng-click="values.activeTab = 1" href="#1" data-toggle="tab">Cash Costs by Account</a>
	</li>
	<li>
		<a ng-click="values.activeTab = 2" href="#2" data-toggle="tab">Cash Costs by Activity</a>
	</li>
</ul>

Then for the tab containers, to ensure that the chart only initializes when they are visible:

<!--- tab 1 for cash costs by account -->
<div class="tab-pane active" id="1" ng-if="values.activeTab == 1">

And for the tab2,

<!-- tab 2 for cash costs by account -->
<div class="tab-pane active" id="2" ng-if="values.activeTab == 2">

What I have done is to initialize a variable called values.activeTab which then gets set every time you clicked on the tab button. Then on the body of the tab, it will initialize the chart when that tab pane is active.

Let me know how it goes.


Paul

@plim that works.

Can you add a bit of a description as to why this works and why the original code does not.

Currently some of what AngularJS does is not logical for me.

Brian

Hi @bknott,

Great!

This has probably more to do with the underlying charting framework’s nature. The data from the second tab was actually retrieved. But the underlying chart was not able to render it as there is no space to render it on due to the fact that it was hidden.

So the update done was to ensure that the charts get rendered only when the space they where at is visible.

The activeTab variables that was added, combined with the ng-ifs should try to ensure that this happens.


Paul

Thanks @plim