title: ChartJS changing displayed data based on date?
body: <p>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.</p>
  
  <pre><code>Events table
  
  id  sid                                    targetbuttonid
  
  1   1377Qqng1hn4866h7oh0t3uruu27dm5        Yes
  2   9021391Q86nog1028jnoqol8bqcrt182o7     No
  3   541Qqta8cs8s6kv60fei8i6jbesg36         Yes
  </code></pre>
  
  <p>And </p>
  
  <pre><code>Sessions table
  
  id  sid                                    datetime
  
  1   1377Qqng1hn4866h7oh0t3uruu27dm5        2019-08-07 07:00:03
  2   9021391Q86nog1028jnoqol8bqcrt182o7     2019-08-07 07:00:11
  3   541Qqta8cs8s6kv60fei8i6jbesg36         2019-08-13 09:56:51
  </code></pre>
  
  <p>I am displaying these data using charts js on pie chart like this</p>
  
  <p>HTML </p>
  
  <pre><code>&lt;body&gt;
  
          data from &lt;input type="text" id = "firstdatepicker" name = "firstdatepicker"&gt;
          to  &lt;input type="text" id = "lastdatepicker" name = "lastdatepicker"&gt;
              &lt;input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" /&gt; 
  
  
          &lt;canvas id="myPieChart" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  </code></pre>
  
  <blockquote>
    <p>UPDATE.</p>
  </blockquote>
  
  <p>JS</p>
  
  <pre><code>  $(document).ready(function(){  
         $.datepicker.setDefaults({  
              dateFormat: 'yy-mm-dd'   
         });  
         $(function(){  
              $("#firstdatepicker").datepicker();  
              $("#lastdatepicker").datepicker();  
         });  
         $('#filter').click(function(){  
              var from_date = $('#firstdatepicker').val();  
              var to_date = $('#lastdatepicker').val();  
              if(from_date != '' &amp;&amp; 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){  
                          var session= data[0].sessions;
                          var yes = data[0].num_yes;
                          var 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,yes, 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");  
              }  
         });  
    });  
  </code></pre>
  
  <p>Here is php.</p>
  
  <pre><code>&lt;?php
  //setting header to json
  header('Content-Type: application/json');
  
  //database
  define('DB_HOST', 'localhost');
  define('DB_USERNAME', 'vvvv');
  define('DB_PASSWORD', 'vvvvv');
  define('DB_NAME', 'vvvvv');
  
  $firstdate = $_POST['firstdatepicker'];
  $lastdate = $_POST['lastdatepicker'];
  //get connection
  $mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
  
  if(!$mysqli){
    die("Connection failed: " . $mysqli-&gt;error);
  }
  
  if (isset($_POST['firstdatepicker'])) {
  
    $firstDate= $_POST['firstdatepicker'];
    $lastDate= $_POST['lastdatepicker'];
  
    $sql = sprintf("SELECT count(*) as num_rows, datetime, count(distinct sid) as sessions, sum( targetbuttonname = 'yes' ) as num_yes, sum( targetbuttonname = 'no' ) as num_no from events AND time BETWEEN '$firstdate' AND '$lastdate'  ORDER BY datetime DESC");
  }
  
  //$query =sprintf("SELECT SUM( sid ) as session , COUNT( targetbuttonname ) as yes FROM events WHERE targetbuttonname LIKE  'Yes'");
  $query = sprintf("SELECT count(*) as num_rows, count(distinct sid) as sessions, sum( targetbuttonname = 'yes' ) as num_yes, sum( targetbuttonname = 'no' ) as num_no from events;");
  //execute query
  $result = $mysqli-&gt;query($query);
  
  //loop through the returned data
  $data = array();
  foreach ($result as $row) {
    $data[] = $row;
  }
  
  $result-&gt;close();
  
  $mysqli-&gt;close();
  print json_encode($data);
  </code></pre>
  
  <p>Now I want when user select date between certain dates, in pie chart it should display data based on those dates selected by user.</p>
  
  <p>Unfortunately now when I select the dates data still the same  <a href="https://meed.audiencevideo.com/admin/dashboard.php" rel="nofollow noreferrer">live demo</a></p>
  
  <p>What am I doing wrong in my codes?.</p>