How to destroy Morris chart data before updating new data in controller using angularjs?

Question

Am loading graph based on selected item using angularjs. If i select the first item i am getting the details in my controller function am displaying it.when i select the next item,graph loading but first selected item details not destroying.if i select 4 items, 4 times graph were showing.How to clear the data from morris chart?

<!-- begin snippet: js hide: false console: true babel: false -->

     app.controller('MorrisCtrl', ['$rootScope', '$scope', '$state','loadhiscpuservice',  function ($rootScope, $scope, $state,loadhiscpuservice) {
   getgraphdetails();
$scope.getserverdetails = function (server) {
       // $state.go($state.current);
        $scope.serveridvalue = [];
        var serverid = [];
        $scope.serveridvalue = server;
        serverid = $scope.serveridvalue.serverID;

        var date = new Date();
        $scope.formattedDate = $filter('date')(date, "dd/MM/yyyy hh:mm:ss a", 'UTC');
        var date1 = $scope.formattedDate; 
        //chart1.destroy();      
        getgraphdetails(serverid, date1);      
    };
    function getgraphdetails(serverid, date1) {
        var details = { serverID: serverid, minutes: "180", date: "date1" };
        loadhiscpuservice.getCPUvalues(details).
              success(function (results) {                
                  alert(results);
                  var value = JSON.parse(results);
                  drawMorrisCharts1(results);
              })
              .error(function (error) {
                  $scope.result = 'Error Occured : ' + error;
              });
    };
     function drawMorrisCharts1(results2) {
            var points = [];
            points = results2;
            Morris.Area({
                element: 'area-chart2',
                data: points,
                xkey: 'lastUpdatedDateTime',
                ykeys: ['value'],
                labels: ['value'],
                parseTime: false,
                pointSize: 2,
                hideHover: 'auto',
                lineColors: [$rootScope.settings.color.themesecondary]
            });
        };
        })



    app.factory('loadhiscpuservice', function ($http) {
        return {
            //load d0ta service    
            getCPUvalues: function (details) {
                var request = $http({
                    method: 'POST',
                    url: 'http//abc link',              
                    data: { aaa: details.aaa, minutes: details.minutes, date: details.date }
                });
                return request;
            }
        };
    });




<!-- language: lang-css -->

      'lib/jquery/charts/morris/raphael-2.0.2.min.js',
      'lib/jquery/charts/morris/morris.js',
      'app/controllers/morris.js'

<!-- language: lang-html -->



    <div ng-controller="MorrisCtrl">
    <div class="orders-container">
            <div class="orders-header">
                <h6>Servers List</h6>
            </div>
            <ul ui-sref-active="active" class="orders-list" onscroll="true">
                <li class="order-item">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 item-left">
                            <div class="item-price">Servers: </div>
                        </div>
                        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 item-right">
                            <div class="input-group">
                                <select ng-options="server.serverName for server in serverDetails1" class="form-control" ng-model="server" ng-change="getserverdetails(server)">
                                    <option value="">--Select Server--</option>
                                </select>
                                <span class="input-group-addon">
                                    <i class="fa fa-desktop"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="row">
            <div class="col-xs-12 col-md-12 col-lg-12">
            <div id="area-chart2" class="chart chart-lg"></div>
          </div>
         </div>

Answer 1

i faced similar problem .. this is how i solved it. before drawing the new chart, use .empty to clear the div.

$("#area-chart2").empty();

thats all. works like magic.

hope this solves your problem