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

Question

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

Answer 1

You need to pass date in your request I'm assuming you are passing it with AJAX here. Since I don't know how you are doing as in your views therefore I'm just adding references for AJAX requests here

NOTE Make sure about Get and Post methods.

Then you will get your date in $request object which you can use like this:

<?php

public function graph(Request $request) {
    $statistics = DiraStatistics::where('dateField',$request->date)->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'));
}
?>

I hope it will work for you!