@extends('app')
@section('page_title') Sentiment Analysis @stop
@push('styles')
    <link rel="stylesheet" type="text/css" href="{{asset('UI/sentiments/theme-assets/css/core/menu/menu-types/vertical-menu.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('UI/sentiments/theme-assets/css/core/colors/palette-gradient.css')}}">
    <style>
        .mycard{
            box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,.1), 0 0.9375rem 1.40625rem rgba(90,97,105,.1), 0 0.25rem 0.53125rem rgba(90,97,105,.12), 0 0.125rem 0.1875rem rgba(90,97,105,.1);
            padding: 2em;
        }

    </style>
@endpush
@section('page_content')
    <div class="page-content" style="padding-bottom: 5px;">
        @if(session('success'))
            <div class="alert alert-success">
                <ul>
                    <li>{{ session('success') }}</li>
                </ul>
            </div>
        @endif

        <div style="background-color: white;padding: 0.5em">
        <div style="margin-top: 2em">
            <p>Sentiments Dashboard</p>
            <button class="btn btn-success" style="float: right; margin-top: -3em" data-toggle="modal" data-target="#exampleModal">Pages</button>
        </div>
        <hr style="margin: 5px auto 15px auto;"/>
            <section id="chartjs-bar-charts">
                <!-- Column Chart -->
                <div class="row">
                    <div class="col-lg-12" style="margin-bottom: 4em">
                        <div class="card mycard">
                            <div class="card-header">
                                <p>Activity Dashboard</p>
                                <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                <div class="heading-elements">
                                    <ul class="list-inline mb-0">
                                        <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                        <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                        <li><a data-action="close"><i class="ft-x"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-content collapse show">
                                <div class="card-body chartjs">
                                    <div class="height-250">
                                        <canvas id="line-chart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

Age Dist Section
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="general-tab" data-toggle="tab" href="#general" role="tab" aria-controls="general" aria-selected="true" aria-expanded="true">Summary Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="age-tab" data-toggle="tab" href="#agesection" role="tab" aria-controls="age" aria-selected="false">Age Distribution</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">

                    <div class="tab-pane fade active in" id="general" role="tabpanel" aria-labelledby="general-tab">

                        <div class="row mycard">
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-header">
                                        <p>Gender Stats For <font id="gender_month"></font></p>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">
                                            <ul class="list-inline mb-0">
                                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <div class="height-250">
                                                <canvas id="bar-chart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                                <div class="card mycard" style="margin-top: -2em">
                                    <div class="card-header">
                                        <p>Sentiments</p>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">
                                            <ul class="list-inline mb-0">
                                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <div class="height-250">
                                                <canvas id="s_pie-chart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                                <div class="card">
                                    <div class="card-header">
                                        <p>Content Type</p>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">
                                            <ul class="list-inline mb-0">
                                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <div class="height-250">
                                                <canvas id="b-chart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>


                    <div class="tab-pane fade" id="agesection" role="tabpanel" aria-labelledby="age-tab">

                        <div class="row mycard">
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-header">
                                        <p>Male Age Stats</p>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">
                                            <ul class="list-inline mb-0">
                                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <div class="height-250">
                                                <canvas id="male_age_line-chart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                                <div class="card mycard" style="margin-top: -2em">
                                    <div class="card-header">
                                        <p>Female Age Stats</p>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">
                                            <ul class="list-inline mb-0">
                                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <div class="height-250">
                                                <canvas id="female_age_line-chart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                                <div class="card">
                                    <div class="card-header">
                                        <p>Unknown Age Stats</p>
                                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                        <div class="heading-elements">
                                            <ul class="list-inline mb-0">
                                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                                <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                                <li><a data-action="close"><i class="ft-x"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-content collapse show">
                                        <div class="card-body">
                                            <div class="height-250">
                                                <canvas id="unknown_age_line-chart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>

            </section>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel" style="font-family:'MTNBrighterSans-Regular' !important;">My Facebook Pages</h5>
                </div>
                <div class="modal-body">
                    <ul class="list-group" id="fbpages">

                    </ul>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>
@stop
@push('scripts')
    <script src="{{asset('UI/sentiments/theme-assets/vendors/js/charts/chart.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('UI/sentiments/theme-assets/js/scripts/charts/chartjs/bar/column.js')}}" type="text/javascript"></script>
    <script src="{{asset('UI/sentiments/theme-assets/js/scripts/charts/chartjs/pie-doughnut/doughnut-simple.js')}}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" type="text/javascript"></script>
{{--    Activity--}}
    <script>
        $(document).ready(function(){

            // Consume End point for user details
            var facebook_access_token = '{!!  $facebook_access_token !!}';
            console.log(facebook_access_token);

            var mydata = {
                'user_access_token': facebook_access_token,
            };

            var url = 'https://social-api.snwolley.com/api/user/details';


            $.post(url,mydata,function (data) {

                console.log(data);
                $.each(data,function(i,item) {
                    // console.log(i+' =>'+item.access_token);
                    if(i == 0){
                        localStorage.setItem('selected_access_token', item.access_token);
                        localStorage.setItem('selected_page_id',item.id);
                    }

                    $('#fbpages').append('<li style="cursor: pointer" onclick="change_fb_id('+item.id+')" class="list-group-item d-flex justify-content-between align-items-center">'+item.name+'<span class="badge badge-primary badge-pill"><i class="fa fa-facebook"></i></span></li>')

                });
            });


            // Consume Activities Endpoint

            var activitylabeldata = [];
            var activitymaindata = [];

            var activitydata = {
                'page_access_token': localStorage.getItem('selected_access_token').toString(),
                'page_id': localStorage.getItem('selected_page_id').toString()
            };

            var activityurl = 'http://social-api.snwolley.com/api/get/activities';

            $.post(activityurl,activitydata,function (data) {

                console.log(data);
                $.each(data.day,function(i,item) {
                    activitylabeldata.push(moment(item.end_time).format('MMMM D'));
                    activitymaindata.push(item.value);
                });

                localStorage.setItem("activity_label", JSON.stringify(activitylabeldata));
                localStorage.setItem("activity_main_data", JSON.stringify(activitymaindata));
            });


            //Get the context of the Chart canvas element we want to select
            var ctx = $("#line-chart");

            // Chart Options
            var chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                        offset: true,
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Days'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Activity Values'
                        }
                    }]
                },
            };

            // Chart Data
            var chartData = {
                // labels: ["January", "February", "March", "April", "May", "June", "July"],
                // labels: localStorage.getItem('activity_label'),
                labels: JSON.parse(localStorage.getItem('activity_label')),
                datasets: [{
                    label: "My Page Activities",
                    // data: [65, 59, 80, 101, 56, 55],
                    data: JSON.parse(localStorage.getItem('activity_main_data')),
                    fill: false,
                    borderDash: [5, 5],
                    borderColor: "#212121",
                    pointBorderColor: "#212121",
                    pointBackgroundColor: "#ffc107",
                    pointBorderWidth: 2,
                    pointHoverBorderWidth: 2,
                    pointRadius: 4,
                }
                ]
            };

            var config = {
                type: 'line',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var lineChart = new Chart(ctx, config);
        });
        function change_fb_id(id) {
            localStorage.setItem('selected_page_id',id);
            {{--window.location.replace('https://www.mtnmessenger.com/{!! Route::current()->uri()!!}');--}}
            window.location.reload();
        }
    </script>

{{--    Gender / Age--}}
    <script>
        $(window).on("load", function(){

            // Consume Gender Endpoint

            var male_data = [];
            var female_data = [];
            var binary_data = [];


            var genderdata = {
                'page_access_token': localStorage.getItem('selected_access_token').toString(),
                'page_id': localStorage.getItem('selected_page_id').toString()
            };

            var genderurl = 'http://social-api.snwolley.com/api/user/gender_age/details';

            $.post(genderurl,genderdata,function (data) {

                console.log(data);


                $.each(data.day,function(i,item) {
                    var isLastElement = i == data.day.length - 1;
                    if (isLastElement) {
                    //    Display Gender Stats
                        $('#gender_month').append(moment(item.end_time).format('MMMM D'));


                    //    Sum up all Male values
                       var total_men = item.value['M.55-64'] + item.value['M.35-44'] + item.value['M.35-44'] + item.value['M.25-34'] + item.value['M.13-17'] + item.value['M.65+'] + item.value['M.45-54'];
                       localStorage.setItem('total_men',total_men);

                   //   Sum up all Women values
                        var total_women = item.value['F.45-54'] + item.value['F.25-34'] + item.value['F.13-17'] + item.value['F.65+'] + item.value['F.55-64'] + item.value['F.35-44'] + item.value['F.18-24'];
                        localStorage.setItem('total_women', total_women);

                    //  Sum up all Binary values
                        var total_binary = item.value['U.35-44'] + item.value['U.65+'] + item.value['U.18-24'] + item.value['U.25-34'];
                        localStorage.setItem('total_binary', total_binary);

                    //    Plotting the age distribution - section
                        male_data = [item.value['M.55-64'], item.value['M.35-44'], item.value['M.35-44'], item.value['M.25-34'], item.value['M.13-17'], item.value['M.65+'], item.value['M.45-54']];
                        female_data = [item.value['F.45-54'], item.value['F.25-34'], item.value['F.13-17'], item.value['F.65+'], item.value['F.55-64'], item.value['F.35-44'], item.value['F.18-24']];
                        binary_data = [item.value['U.35-44'], item.value['U.65+'], item.value['U.18-24'], item.value['U.25-34']];

                        localStorage.setItem('male_data_dist',JSON.stringify(male_data));
                        localStorage.setItem('female_data_dist',JSON.stringify(female_data));
                        localStorage.setItem('unknown_data_dist',JSON.stringify(binary_data));
                    }

                });

            });


            //Get the context of the Chart canvas element we want to select
            var ctx = $("#bar-chart");

            // Chart Options
            var chartOptions = {
                // Elements options apply to all of the options unless overridden in a dataset
                // In this case, we are setting the border of each horizontal bar to be 2px wide and green
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgb(0, 0, 0)',
                        borderSkipped: 'left'
                    }
                },
                responsive: true,
                maintainAspectRatio: false,
                responsiveAnimationDuration:500,
                legend: {
                    position: 'top',
                },
                scales: {
                    xAxes: [{ stacked: true }],
                    yAxes: [{ stacked: true }]
                },
                title: {
                    display: false,
                    text: 'Chart.js Horizontal Bar Chart'
                }
            };

            // Chart Data
            var chartData = {
                labels: ["Male", "Female", 'Unknown'],
                datasets: [
                    {
                    label: "Male",
                    data: $.makeArray(localStorage.getItem('total_men')),
                    backgroundColor: "#0d47a1",
                    hoverBackgroundColor: "#0d47a1",
                    borderColor: "transparent"
                },
                    {
                    label: "Female",
                    data: $.makeArray(localStorage.getItem('total_women')),
                    backgroundColor: "rgba(255, 193, 5, 0.78)",
                    hoverBackgroundColor: "rgba(255, 193, 5, 0.78)",
                    borderColor: "transparent"
                },
                    {
                        label: "Unknown",
                        data: $.makeArray(localStorage.getItem('total_binary')),
                        backgroundColor: "rgba(62, 39, 35, 0.73)",
                        hoverBackgroundColor: "rgba(62, 39, 35, 0.73)",
                        borderColor: "transparent"
                    },

                ]
            };

            var config = {
                type: 'bar',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var lineChart = new Chart(ctx, config);
        });
    </script>

{{--   Sentiments--}}
    <script>
        $(window).on("load", function(){

            //Get the context of the Chart canvas element we want to select
            var ctx = $("#s_pie-chart");

            // Chart Options
            var chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                responsiveAnimationDuration:500,
            };

            // Chart Data
            var chartData = {
                labels: ["Positive", "Negative", "Neutral"],
                datasets: [{
                    label: "My First dataset",
                    data: [65, 35, 24],
                    backgroundColor: ['rgba(218, 27, 97, 0.63)', 'rgba(255, 193, 5, 0.78)', 'rgba(0, 0, 0, 0.51)'],
                }]
            };

            var config = {
                type: 'polarArea',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var doughnutSimpleChart = new Chart(ctx, config);

        });
    </script>

{{--    Content Type--}}
    <script>
        $(window).on("load", function(){

            //Get the context of the Chart canvas element we want to select
            var ctx = $("#b-chart");

            // Chart Options
            var chartOptions = {
                // Elements options apply to all of the options unless overridden in a dataset
                // In this case, we are setting the border of each horizontal bar to be 2px wide and green
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgb(0, 0, 0)',
                        borderSkipped: 'left'
                    }
                },
                responsive: true,
                maintainAspectRatio: false,
                responsiveAnimationDuration:500,
                legend: {
                    position: 'top',
                },
                scales: {
                    xAxes: [{ stacked: true }],
                    yAxes: [{ stacked: true }]
                },
                title: {
                    display: false,
                    text: 'Chart.js Horizontal Bar Chart'
                }
            };

            // Chart Data
            var chartData = {
                labels: ["Facebook", "Youtube"],
                datasets: [
                    {
                        label: "Youtube",
                        data: [15],
                        backgroundColor: "#CC0000",
                        hoverBackgroundColor: "#CC0000",
                        borderColor: "transparent"
                    },
                    {
                        label: "Facebook",
                        data: [28],
                        backgroundColor: "#1a237e",
                        hoverBackgroundColor: "#1a237e",
                        borderColor: "transparent"
                    }
                ]
            };

            var config = {
                type: 'bar',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var lineChart = new Chart(ctx, config);
        });
    </script>

{{--    ***********************************************************************--}}

{{--    Male Graph--}}
    <script>
        $(document).ready(function(){

            //Get the context of the Chart canvas element we want to select
            var ctx = $("#male_age_line-chart");

            // Chart Options
            var chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                        offset: true,
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Age Values'
                        }
                    }]
                },
            };

            // Chart Data
            var chartData = {
                labels: ["M.55-64", "M.35-44", "M.18-24", "M.25-34", "M.13-17", "M.65+", "M.45-54"],
                datasets: [{
                    label: "Male Age Distribution",
                    // data: [65, 59, 80, 101, 56, 55],
                    // data: localStorage.getItem(''),
                    data: JSON.parse(localStorage.getItem('male_data_dist')),
                    fill: false,
                    borderDash: [5, 5],
                    borderColor: "#212121",
                    pointBorderColor: "#212121",
                    pointBackgroundColor: "#ffc107",
                    pointBorderWidth: 2,
                    pointHoverBorderWidth: 2,
                    pointRadius: 4,
                }
                ]
            };

            var config = {
                type: 'line',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var lineChart = new Chart(ctx, config);
        });
    </script>


{{--    Female Graph--}}
    <script>
        $(document).ready(function(){

            //Get the context of the Chart canvas element we want to select
            var ctx = $("#female_age_line-chart");

            // Chart Options
            var chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                        offset: true,
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Age Values'
                        }
                    }]
                },
            };

            // Chart Data
            var chartData = {
                labels: ["F.45-54", "F.25-34", "F.13-17", "F.65+", "F.55-64", "F.35-44", "F.18-24"],
                datasets: [{
                    label: "Female Age Distribution",
                    data: JSON.parse(localStorage.getItem('female_data_dist')),
                    fill: false,
                    borderDash: [5, 5],
                    borderColor: "#212121",
                    pointBorderColor: "#212121",
                    pointBackgroundColor: "#ad1457",
                    pointBorderWidth: 2,
                    pointHoverBorderWidth: 2,
                    pointRadius: 4,
                }
                ]
            };

            var config = {
                type: 'line',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var lineChart = new Chart(ctx, config);
        });
    </script>

{{--    Unknown Graph--}}
    <script>
        $(document).ready(function(){

            //Get the context of the Chart canvas element we want to select
            var ctx = $("#unknown_age_line-chart");

            // Chart Options
            var chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                        offset: true,
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                    }],
                    yAxes: [{
                        display: true,
                        gridLines: {
                            color: "#f3f3f3",
                            drawTicks: false,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Age Values'
                        }
                    }]
                },
            };

            // Chart Data
            var chartData = {
                labels: ["U.35-44", "U.65+", "U.18-24", "U.25-34"],
                datasets: [{
                    label: "Unknown Age Distribution",
                    data: JSON.parse(localStorage.getItem('unknown_data_dist')),
                    fill: false,
                    borderDash: [5, 5],
                    borderColor: "#212121",
                    pointBorderColor: "#212121",
                    pointBackgroundColor: "#4a148c",
                    pointBorderWidth: 2,
                    pointHoverBorderWidth: 2,
                    pointRadius: 4,
                }
                ]
            };

            var config = {
                type: 'line',

                // Chart Options
                options : chartOptions,

                data : chartData
            };

            // Create the chart
            var lineChart = new Chart(ctx, config);
        });
    </script>

@endpush