Redraw Morris Donut nach AJAX Anruf

Question

Ich benutze Morris Donut für ein Dashboard Ich arbeite an und Abrufen von Daten über AJAX mit zwei Datumsbereichen als Parameter. Das Problem, mit dem ich konfrontiert bin, ist, dass wenn ich zwei neue Datumsbereiche eingib, das Donut-Diagramm einen neuen über Donut erstellt, der bereits beim Laden der Seite erstellt wurde. Ich habe gesucht und kann Informationen zur Verwendung von setData() sehen, aber ich habe keine Ahnung, wie dies in meinem Code enthalten.

Mein Code:

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

Die Suchtaste führt Folgendes, wenn darauf geklickt:

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

Hier ist die Funktion, die aufgerufen wird.

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 + "%" } 
      }); 
     } 
    } 
    }); 
} 

Screenshot von dem, was nach der Eingabe von neuen Datumsbereiche geschieht:

Answer 1

Versuchen $("#pieChart").empty(); vor dem Rendern der zweiten Diagramm aufrufen.

Vorzugsweise hier:

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