title: ChartJS remove previous chart when making new one
body: <p>In the code below I am making a chartJS chart using database data, this is being done via a submit button which looks like this:</p>
  
  <pre><code>function showWhatSelected(str) {
  $('#select2').hide();
  $('#select3').hide();
      if (str == "") {
          document.getElementById("select1").innerHTML = "";
          return;
      } else { 
          if (window.XMLHttpRequest) {
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 &amp;&amp; this.status == 200) {
                  document.getElementById("select1").innerHTML = this.responseText;
              }
          };
          xmlhttp.open("GET","../controller/teamleiderController.php?action=whatToShow&amp;value="+ str,true);
          xmlhttp.send();
      }
  }
  </code></pre>
  
  <p>After that the AJAX runs which makes the new chart when a change has been detected in the submit button:</p>
  
  <pre><code>        $.ajax({
              url: "../controller/teamleiderController.php?action=select2JSON&amp;value="+ str +"",
              method: "GET",
              success: function(data) {
                  console.log(data);
                  var label = ['aanwezig', 'afwezig'];
                  var aanwezigheid = [];
  
                  for(var i in data) {
                      aanwezigheid.push(data[i].aanwezig, data[i].afwezig, );
                  }
  
                  var chartdata = {
                      labels: label,
                      datasets : [
                          {
                              backgroundColor: ['rgba(0, 65, 140, 0.8)', 'rgba(215, 165, 0, 0.8)'],
                              borderColor: 'rgba(0, 0, 0, 0)',
                              hoverBackgroundColor: ['rgba(0, 65, 140, 1)', 'rgba(215, 165, 0, 1)'],
                              hoverBorderColor: 'rgba(200, 200, 200, 0)',
                              data: aanwezigheid
                          }
                      ]
                  };
  
                  var option = {
              };
  
                  var ctx = $("#mycanvas");
  
                  var barGraph = new Chart(ctx, {
                      type: 'pie',
                      data: chartdata,
                      options:option
                  });
              },
              error: function(data) {
                  console.log(data);
              }
          });
  }
  </code></pre>
  
  <p>My problem is that my chart is ghosting, it keeps showing previous data, is there any way I can fix this? I have tried .destroy() and .clear() but they both don't seem to work...</p>