ChartJS changing displayed data based on date?

Question

I have a simple section in which I am displaying data from the database , in my database I have two tables which shares \'sid` (session id); my tables looks like this.

Answer 1

Since you asked me to take a look at your question I recreated the whole client side in this snippet and it's all working as expected. The error must be in the php code.

I never did php myself but I'll updated the answer if I find what's wrong with it. If I were to take a guess I would say that you need to use the $sql somewhere.

// bypass CORS
jQuery.ajaxPrefilter(function(options) {
    if (options.crossDomain && jQuery.support.cors) {
        options.url = 'https://cors-anywhere.herokuapp.com/' + options.url;
    }
});
// updated code
$(document).ready(function() {
  $.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
  });
  $("#firstdatepicker").datepicker();
  $("#lastdatepicker").datepicker();
  $('#filter').click(function() {
    var from_date = $('#firstdatepicker').val();
    var to_date = $('#lastdatepicker').val();
    if (from_date != '' && to_date != '') {
      console.log(from_date, to_date);
      $.ajax({
        url: "https://meed.audiencevideo.com/admin/chats/stats.php",
        type: "GET",
        data: {
          from_date: from_date,
          to_date: to_date
        },
        success: function(data) {
          console.log(data[0])
          var session = data[0].sessions;
          var num_yes = data[0].num_yes;
          var num_no = data[0].num_no;
          var ctx = document.getElementById("myPieChart");
          var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
              labels: ["Sessions", "Yes", "No"],
              datasets: [{
                label: 'Genders',
                data: [session, num_yes, num_no],
                backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(54, 162, 235, 1)'
                ],
                borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 99, 132, 0.2)',
                ],
                borderWidth: 1
              }]
            },

          });
        }
      });
    } else {
      alert("Please Select Date");
    }
  });
});

canvas {display: block;}

data from 
 to