@extends('layouts.layouts')

@section('content')

    <link href="{{ url('/') }}/assets/plugins/morrisjs/morris.css" rel="stylesheet">

    <div class="row">

        <div class="col-lg-6">

            <div class="card">

                <div class="card-body">

                    <h4 class="card-title">Timewise </h4>

                    <div id="morris-line-chart"></div>

                    
                </div>

            </div>

        </div>

        <div class="col-lg-6">

            <div class="card">

                <div class="card-body">

                    <h4 class="card-title">Overall</h4>

                    <div id="morris-donut-chart"></div>

                </div>

            </div>

        </div>

    </div>

    <script src="{{ url('/') }}/assets/plugins/morrisjs/morris.js"></script>

    <script src="{{ url('/') }}/assets/plugins/raphael/raphael-min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            var json_chartdata = []; 

            var line =  new Morris.Line({

                element: 'morris-line-chart',

                data: json_chartdata,

                xkey: 'day',

                parseTime: false,

                ykeys: ['time_taken'],

                labels: ['Time'],

                gridLineColor: '#eef0f2',

                lineColors: ['#28a745'],

                lineWidth: 1,

                resize: true

            });

            var donutChartData = ; 

            var donutChartData1 = ; 

            var donutChartData2 = ; 

            var donutChartData3 = ; 

            var donut= new  Morris.Donut({

                element: 'morris-donut-chart',

                data: [{

                    label: "Correct Count",

                    value: donutChartData,



                }, {

                    label: "Total question",

                    value: donutChartData1,

                }, {

                    label: "Not Answered",

                    value: donutChartData2,

                },

                {

                    label: "Wrong Count",

                    value: donutChartData3,

                }],

                resize: true,

                colors:[ '#0c7323', '#009efb','#2f3d4a','#e60d49']

            }); 

        });

    </script>

@endsection