如何使用highcharts基于日期选择查看图形

<form id="form-project" role="form" action="{{action('AltHr\Chatbot\TrackerController@graph')}}" autocomplete="off" method="POST">
  {{csrf_field()}}
  <div class="form-group form-group-default required" >
      <label>Date</label>
      <input type="date" class="form-control" name="date" required>
  </div>
  <button class="btn alt-btn-black btn-xs alt-btn pull-right" type="submit">Select</button>
</form>

Route::get('graph','Chatbot\TrackerController@graph');

I would like to find out if there is a way that i can show the chart based on selected dates as i have a dates column in my database. If there is, how should i do it? I am using highcharts to generate the pie chart.
Below are the function i did in controller and the javascript to generate the chart in the html tag.

HTML and JS in blader file

<script type="text/javascript">

    $(document).ready(function () {

    // Build the chart
    Highcharts.chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },  
            title: {
                text: 'Pie Chart'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            series: [
                {
                    name: 'Percentage',
                    colorByPoint: true,
                    data: [{
                        name: 'Questions Asked',
                        y: "{!! $question_asked_sum !!}",
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Low Confidence',
                        y: "{!! $low_confidence_sum !!}"
                    }, {
                        name: 'No Answer',
                        y: "{!! $no_answer_sum !!}"
                    }, {
                        name: 'Missing Intent',
                        y: "{!! $missing_intent_sum !!}"
                    }]
                }
            ]
        });
    });


</script>


<div class="panel-body">
    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>

Function in controller

<?php

public function graph() {
    $statistics = DiraStatistics::all();

    $question_asked_sum = $statistics->sum('question_asked');
    $low_confidence_sum = $statistics->sum('low_confidence');
    $no_answer_sum = $statistics->sum('no_answer');
    $missing_intent_sum = $statistics->sum('missing_intent');


    return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
?>

</div>