Redraw Morris Donut после вызова AJAX

Question

Я использую Morris Donut для панели инструментов. Я работаю над и получаю данные через AJAX, используя два диапазона дат в качестве параметров. Проблема, с которой я сталкиваюсь, заключается в том, что когда я ввожу два новых диапазона дат, диаграмма пончиков отображает новый поверх пончика, уже созданного при загрузке страницы. Я искал и могу видеть информацию об использовании setData(), но я понятия не имею, как включить это в мой код.

Мой код:

$(document).ready(function() { 
     var start = $('#SearchStart').val(); 
     var end = $('#SearchEnd').val(); 
     populateDonut(start, end); 
}); 

Кнопка поиска выполняет следующие действия при нажатии:

$('#DateRange').click(function() { 
     var start = $('#SearchStart').val(); 
     var end = $('#SearchEnd').val(); 
     populateDonut(start, end); 
}); 

Вот функция, которая называется.

function populateDonut(start, end) { 
var param = { start: start, end: end }; 
$.ajax({ 
    type: "POST", 
    url: "/WebService.asmx/getDonutData", 
    contentType: "application/json; charset=utf-8", 
    dataType: 'json', 
    async: true, 
    data: JSON.stringify(param), 
    success: function (result) { 
     var data = eval("(" + result.d + ")"); 
     var pieChart = ''; 
     if (data.status == 0) { 
      var donut = Morris.Donut({ 
       element: 'pieChart', 
       data: [ 
        { label: "Inbound", value: data.inbound }, 
        { label: "Outbound", value: data.outbound }, 
        { label: "Unanswered", value: data.unanswered } 
       ], 
       colors: ['#1ca8dd', '#33b86c', '#ebc142'], 
       resize: true, 
       formatter: function (x) { return x + "%" } 
      }); 
     } 
    } 
    }); 
} 

Скриншот, что происходит после ввода новых диапазонов дат:

Answer 1

Попробуйте позвонить $("#pieChart").empty(); перед визуализацией второй график.

Предпочтительно здесь:

$('#DateRange').click(function() { 
    var start = $('#SearchStart').val(); 
    var end = $('#SearchEnd').val(); 
    // Clear the existing chart before populating new donut 
    $("#pieChart").empty(); 
    populateDonut(start, end); 
});