duanche8554
duanche8554
2017-10-16 06:01

如何使用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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • doupingmao1903 doupingmao1903 4年前

    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!

    点赞 评论 复制链接分享