如何在高图表中创建日期范围过滤？

Question

任何人都可以为高图表编码范围日期过滤。我不知道如何编码它。我的图表从数据库中获取数据，我希望用户可以选择查看图表的日期。

所以这里是我的代码：

?php  

    foreach($chart as $result){
        $project[] = $result->project_name; 
        $value[] = (float) $result->count; 
        
    }
    ?>
<script>
$(function () {
    $('#project').highcharts({
        chart: {
            type: 'column',
            margin: 75,
            options3d: {
                enabled: false,
                alpha: 10,
                beta: 25,
                depth: 70
            }
        },
        title: {
            text: 'CHART',
            style: {
                    fontSize: '18px',
                    fontFamily: 'Verdana, sans-serif'
            }
        },
        subtitle: {
           text: 'Project',
           style: {
                    fontSize: '15px',
                    fontFamily: 'Verdana, sans-serif'
            }
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories:  <?php echo json_encode($project);?>
        },
        exporting: { 
            enabled: false 
        },
        yAxis: {
            title: {
                text: 'Total'
            },
        },
        tooltip: {
             formatter: function() {
                 return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,0) + '</b>, in '+ this.series.name;
             }
          },
        series: [{
            name: 'Report Data',
            data: <?php echo json_encode($value);?>,
            shadow : true,
            dataLabels: {
                enabled: true,
                color: '#045396',
                align: 'center',
                formatter: function() {
                     return Highcharts.numberFormat(this.y, 0);
                }, // one decimal
                y: 0, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
});
</script>

<div class="form-inline">
                    
    <a>FROM</a>
    <div class="form-group">
                            
        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
            <input type="text" name="start_date" class="form-control" readonly id="start_date" size="8">
            <span class="input-group-btn">
            <button class="btn default" type="button">
                <i class="fa fa-calendar"></i>
            </button>
            </span>
        </div>
    </div>
        TO
    <div class="form-group">

        <div class="input-group date date-picker" data-date-format="dd-mm-yyyy">
            <input type="text" name="end_date" class="form-control" readonly id="end_date" size="8">
            <span class="input-group-btn">
            <button class="btn default" type="button">
            <i class="fa fa-calendar"></i>
            </button>
            </span>
        </div>
    </div>
        <button class="btn btn-primary blue" id="btn-search">Submit</button>
                        
</div>
                    
<div class="row">
    <div class="col-md-12">
    <!-- BEGIN CHART PORTLET-->
    <div class="portlet light bordered">

        <div class="portlet-title">
            <div class="caption">
                <i class="icon-bar-chart font-green-haze"></i>
                <span class="caption-subject bold uppercase font-green-haze"><?php echo isset($breadcrumb) ? $breadcrumb : ''; ?></span>
                <span class="caption-helper">column and line mix</span>
            </div>
                                                            
        </div>
        <div class="portlet-body">
                            
            <div id="project"> </div>
        </div>
    </div>
    <!-- END CHART PORTLET-->
    </div>
</div>                                   

如何在高图表中创建日期范围过滤？