title: Update Chart JS with date range selector
body: <p>I am trying to update a chart depending on the dates and and shifts selected using ajax. My ajax call returns an array like this:</p>
  
  <pre><code>0   
  date    "2017-11-20"
  shift   "Day Shift"
  availability    100
  1   
  date    "2017-11-21"
  shift   "Day Shift"
  availability    63.63636363636363
  2   
  date    "2017-11-22"
  shift   "Day Shift"
  availability    63.63636363636363
  3   
  date    "2017-11-23"
  shift   "Day Shift"
  availability    63.63636363636363
  4   
  date    "2017-11-24"
  shift   "Day Shift"
  availability    14.285714285714285
  5   
  date    "2017-11-20"
  shift   "Night Shift"
  availability    67.56756756756756
  6   
  date    "2017-11-21"
  shift   "Night Shift"
  availability    67.56756756756756
  7   
  date    "2017-11-22"
  shift   "Night Shift"
  availability    67.56756756756756
  8   
  date    "2017-11-23"
  shift   "Night Shift"
  availability    67.56756756756756
  </code></pre>
  
  <p>my javascript looks like this:</p>
  
  <pre><code>// on change event
  var request;
  $('input').on('change', function(event) {
      console.log('changed');
      event.preventDefault();
  
      // Abort any pending request
      if (request) {
          request.abort();
      }
  
      var rangeStart = moment($('#daterange').data('daterangepicker').startDate).unix();
      var rangeEnd = moment($('#daterange').data('daterangepicker').endDate).unix();
      var shift = 'all';
      request = $.ajax({
          url: "report_availability.php",
          type: "post",
          data: {
              rangeStart: rangeStart,
              rangeEnd: rangeEnd,
              shift: shift
          }
      });
  
      request.done(function (response, textStatus){
          drawChart(response); 
      });
  
      request.fail(function (textStatus, errorThrown){
          // Log the error to the console
          console.error(
              "The following error occurred: "+
              textStatus, errorThrown
          );
      });
  
      request.always(function () {
         console.log('request finished');
      });
  });
  
  function drawChart(data) {
      var dates = [];
      var shift1Score = [];
      var shift2Score = [];
      for(var i in data) {
          var found = jQuery.inArray(data[i].date, dates);
          if (found &lt; 0) {
              dates.push(data[i].date);
          }
           if(data[i].shift == 'Day Shift' ) {
              shift1Score.push(data[i].availability);
          } else {
              shift2Score.push(data[i].availability);
          }
       }
  
      // Destroy the chart if it already exists
      // NOT WORKING
      if(myChart!=null){
          myChart.destroy();
          console.log('destroy');
      }
  
      var ctx = document.getElementById("myChart").getContext('2d');
      ctx.canvas.height = 50;
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: dates,
              datasets: [
              {
                  label: "Day Shift",
                  backgroundColor: "#3e95cd",
                  data: shift1Score
              }, {
                  label: "Night Shift",
                  backgroundColor: "#8e5ea2",
                  data: shift2Score
              }
            ]
          },
          options: {
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              },
              responsive: true,
              maintainAspectRatio: false
          }
      });
   }
  </code></pre>
  
  <p>I have 2 problems with this:</p>
  
  <p>problem 1: The chart is not being destroyed so when I redraw it, it just redraws on top of the old chart which causes problems with the hover events. I have tried to use chart.update() to resolve this issue however this seems to just add to the original data instead of replacing it.</p>
  
  <p>EDIT:- I have solved problem 1 by removing the canvas and then creating a new canvas:-</p>
  
  <pre><code>$('#myChart').remove();
  $('#chartBar').append('&lt;canvas id="myChart"&gt;&lt;/canvas&gt;');
  </code></pre>
  
  <p>Problem 2: There is more than 2 shifts.. sometime upto 5 and I do not want to hard code all of these. I would like to draw each dataset depending on how many shifts are returned in the array, I am open to changing the array structure in php or javascript but just cannot seem to figure out the correct array structrue or how to build a dynamic dataset array for the chart.</p>
  
  <p>the chart should output like this for 2 shifts:
  <a href="https://i.stack.imgur.com/NgVUl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NgVUl.png" alt="enter image description here"></a></p>
  
  <p>Any help would be great thanks</p>