On my List page (List.Html), users can select multiple rows to display the data in a chart using C3. However, when clicking on the compareList() button to navigate to the Chart page (Chart.Html), the chart does not display properly. It seems that the chart data is being loaded before the page itself, causing issues with finding the HTML element to insert the chart into.
If the Chart Page loads before the list page, the chart is generated but disappears after one click.
In the Controller.js:
$scope.compareList = function(){
var total = $scope.array.length;
var tempArray= [];
for(var i=0; i<total; i++){
if($scope.array[i].selected){
tempArray[i] = $scope.array[i];
}
}
if(comparr.length>0){
$scope.compGraph(tempArray);
}
}
$scope.compGraph = function(array){
var tempData = [];
for(var i=0; i<array.length;i++){
tempData.push([array[i].name,array[i].evi]);
}
var chart = c3.generate({
bindto: '#chart',
data: {
columns: tempData,
type:'bar'
}
});
$state.go('eventmenu.compare');
}
List.Html:
<ion-view view-title="List">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-stats-bars" ng-click="compareList()"></button>
</ion-nav-buttons>
<ion-content>
<ion-item ng-repeat="item in items" class="item-remove-animate">
<div class="row" >
<div class="col col-40"{{ item.name }}</div>
<div class="col col-30" style=";">{{ item.area}}m<sup>2</sup></div>
<div class="col col-20" style=";">{{ item.value}}</div>
<div class="col col-10 col-top" ><ion-checkbox style="border:none;margin-top: -20px;" ng-model="item.selected"></ion-checkbox></div>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Chart.Html:
<ion-view view-title="Land Comparison">
<ion-content ng-controller="Controller">
<div class="padding">
<div id="chart" ></div>
</div>
</ion-content>
</ion-view>