javascript - chartjs bar chart filter using datetimepicker

I'm stuck at filtering the bar chart using datetime filter. The chart will render based on the datetime that I selected and will display out the bar chart. But it keeps showing the default query.

I got two conditions at my data.php..

if($_POST["is_date_search"]!="yes")
{
    $sql .='';    // use today datetime
}

if($_POST["is_date_search"]=="yes")
{
    $sql .='';    // use $_POST['datetimepicker'] datetime
}
Copy code

It keeps showing me the query inside the !='yes' condition after I trigger the search button.

This is my code:

<input data-date-format="YYYY-MM-DD HH:mm:ss" type='text' class="form-control input-sm datetimepicker" id="datetimepicker" name="datetimepicker" />
<input type="button" name="search" id="search" value="Search" class="btn btn-info" />

<div id="portlet4" class="panel-collapse collapse in">
    <div class="portlet-body">
        <div id="chart-container">
            <canvas id="mycanvasStack"></canvas>
        </div>
    </div>
</div>
Copy code

here the script

<script type="text/javascript" language="javascript" >
$(document).ready(function(){
    
    $('#datetimepicker').datetimepicker({
        format:'yyyy-mm-dd HH:mm:ss'
    });
    fetch_data('no');
    
    function fetch_data(is_date_search,datetimepicker='')
    {
        
    $.ajax({
        url: "data.php",
        async: false,
        dataType: 'json',
        type: "GET",
        data:{
            is_date_search:is_date_search, datetimepicker:datetimepicker
        },
        success: function(data) {
        console.log(data);
            var qty100 = [];
            var labelData = [];
            var process = [];
            
        for(var i in data) 
        {
            opername.push("PartGroup"+ data[i].opername);
            qty100.push(data[i].qty100);
            labelData.push(data[i].process);
            
        }

        $("mycanvasStack").remove();
        $("div.chart-container").append('<canvas id="mycanvasStack" class="animated fadeIn" height="150"></canvas>');

        var ctx = $("#mycanvasStack");

        var barGraph = new Chart(ctx, {
        type: 'bar',
        data:
        {
            labels: labelData,
            datasets: [{
                label: '0730-0930',
                data: qty100,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 2
            }]
        }
      });
      
        barGraph.render(); 
        barGraph.destroy();
        
        barGraph = new Chart(ctx, {
        type: 'bar',
        data:
        {
            labels: labelData,
            datasets: [{
                label: '07301-0930',
                data: qty100,
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 2
                
            }]
        }
      });
    barGraph.render(); 
    },
    error: function(data) {
        console.log(data);
    }   
    
  });
}
    
    $('#search').click(function(){
        var start_date = $('.datetimepicker').val();
        if(start_date !='')
        {
            fetch_data('yes', start_date);
        }
    });
    
});
</script>
Copy code