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;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery.ui.datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/sunny/jquery-ui.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css"></link>

data from <input type="text" id="firstdatepicker" name="firstdatepicker" value="19-08-13"><br> to <input type="text" id="lastdatepicker" name="lastdatepicker" value="19-08-14">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
<canvas id="myPieChart" width="400" height="400"></canvas>

Answer 2

Use POST instead of GET in AJAX request.

$firstDate= $_POST['firstdatepicker'];
$lastDate= $_POST['lastdatepicker'];