destroy multiple charts on same page

Question

I am creating project using Angularjs. In my project I am integrating the charts using angularcharts.js.In my project am displaying two charts on same page. I want to destroy both charts when user change select some filed on select box, but I am unable to do that. Here is my code: In js:

$scope.$on('create', function(event, chart) {
        console.log(chart)
        $rootScope.checkgraph = chart;

    });
if($scope.allFlows.length == 0)
    $scope.checkgraph.destory()

}

In Html:

<canvas id="line" class="chart chart-line" chart-data="dataBilling"
  chart-labels="labelsBilling" chart-colours="ocw.colours" chart-options="options" chart-legend="true" 
  chart-click="onClick" height="150" width="400">
</canvas> 

<canvas id="line" class="chart chart-line" chart-options="options" chart-data="data"
  chart-labels="labels" chart-colours="ocw.colours" chart-legend="true" 
  chart-click="onClick"  height="150" width="400">
</canvas>

score 0 · Answer 1 · answered Jun 28 '16 at 10:53

Ive had done some similar thing in the past, if i remember correcly, this is how i did it:

in controller

$scope.charts = [
    { 
        // chart 1 data
    },
    { 
        // chart 2 data
    }
]
$scope.removeChart = function(index) {
    $scope.charts.splice(index,1);
}

and html

<div ng-repeat="chart in charts track by $index">
    <!-- charts come here -->
</div>

if you remove chart from array of charts, it will also disappear from front view

destroy multiple charts on same page

1 Answers1