Angularjs Element duplicating

Question

I made a chart with Morris.js https://morrisjs.github.io/morris.js/donuts.html

and put it inside a return of a query, so far everything right, but when I call this query again to generate other data on the graph, it generates another graph, is duplicating, instead of just exchanging information, it creates another graph and is 2

As I change the option, it generates a new chart...

My code

 $scope.selectAction = function(myOption) {
       $http.get('http://localhost/Angularjs/php/TotalAlunos.php?cod=' + $scope.myOption.id).then(function(result){    
        Morris.Donut({
          element: 'donut-example',
          data: [
            {label: "In-Store Sales", value: result.data.total},
            {label: "Mail-Order Sales", value: 20}
          ]
        });
      });
};

Answer 1

I do not know this morrisjs, but giving a search I found something that may help.

Try to create a single chart and just update your data on each call. Something like this:

var donut = Morris.Donut({
      element: 'donut-example',
      data: [
          {label: "In-Store Sales", value: 0},
          {label: "Mail-Order Sales", value: 0}
      ]
    });

 $scope.selectAction = function(myOption) {
   $http.get('http://localhost/Angularjs/php/TotalAlunos.php?cod=' + $scope.myOption.id).then(function(result){    
    donut.setData([
        {label: "In-Store Sales", value: result.data.total},
        {label: "Mail-Order Sales", value: 20}
      ]);
  });
};