resto-dhepot/resources/views/pages/admin/dashboard/chartjs.blade.php

@push('scripts')
    <script src="{{ asset('assets/plugins/chart.js/Chart.min.js') }}"></script>
    <!-- ChartJS -->

    <script>
        $(function() {
            'use strict'


            $.ajax({
                url: "{{ route('dashboard.getChartDounat') }}",
                type: "GET",
                cache: false,
                async: false,
                success: function(response) {
                    var data = response.data;
                    chartPaket(data.menuPaket);
                    chartIrit(data.menuIrit);
                },
                error: function(response) {
                    console.log(response);
                }
            })


        })

        function chartPaket(params) {
            //-------------
            // - PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChartPaket').get(0).getContext('2d')
            var data = params;

            var color = ['#f56954', '#00a65a', '#f39c12', '#00c0ef',
                '#3c8dbc', '#d2d6de'
            ]
            var menuPaketLegend = $('#menuPaketLegend');
            $.each(data.labels, function(index, value) {
                menuPaketLegend.append('<li><i class="far fa-circle" style="color:' +
                    color[index] + '"></i> ' + value + ' : ' + data.data[
                        index] + '</li>');
            });
            var pieData = {
                labels: data.labels,
                datasets: [{
                    data: data.data,
                    backgroundColor: color
                    // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef',
                    //     '#3c8dbc', '#d2d6de', '#605ca8', '#ff851b', '#00a65a',
                    //     '#f39c12'
                    // ]
                }]
            }
            var pieOptions = {
                legend: {
                    display: false
                }
            }
            // Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            // eslint-disable-next-line no-unused-vars
            var pieChart = new Chart(pieChartCanvas, {
                type: 'pie',
                data: pieData,
                options: pieOptions
            })
        }

        function chartIrit(params) {
            //-------------
            // - PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChartIrit').get(0).getContext('2d')
            var data = params;

            var color = ['#605ca8', '#ff851b', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc'];
            var menuIritLegend = $('#menuIritLegend');
            $.each(data.labels, function(index, value) {
                menuIritLegend.append('<li><i class="far fa-circle" style="color:' +
                    color[index] + '"></i> ' + value + ' : ' + data.data[
                        index] + '</li>');
            });
            var pieData = {
                labels: data.labels,
                datasets: [{
                    data: data.data,
                    backgroundColor: color
                    // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef',
                    //     '#3c8dbc', '#d2d6de', '#605ca8', '#ff851b', '#00a65a',
                    //     '#f39c12'
                    // ]
                }]
            }
            var pieOptions = {
                legend: {
                    display: false
                }
            }
            // Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            // eslint-disable-next-line no-unused-vars
            var pieChart = new Chart(pieChartCanvas, {
                type: 'pie',
                data: pieData,
                options: pieOptions
            })
        }
    </script>

    <script>
        $(function() {
            'use strict'


            $.ajax({
                url: "{{ route('dashboard.getChartDounatSatuan') }}",
                type: "GET",
                cache: false,
                async: false,
                success: function(response) {
                    var data = response.data;
                    chartNasi(data.menuNasi);
                    chartSambal(data.menuSambal);
                    chartLauk(data.menuLauk);
                },
                error: function(response) {
                    console.log(response);
                }
            })


        })

        function chartNasi(params) {
            //-------------
            // - PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChartNasi').get(0).getContext('2d')
            var data = params;

            var color = ['#f56954', '#00a65a', '#f39c12', '#00c0ef',
                '#3c8dbc', '#d2d6de'
            ]
            var menuNasiLegend = $('#menuNasiLegend');
            $.each(data.labels, function(index, value) {
                menuNasiLegend.append('<li><i class="far fa-circle" style="color:' +
                    color[index] + '"></i> ' + value + ' : ' + data.data[
                        index] + '</li>');
            });
            var pieData = {
                labels: data.labels,
                datasets: [{
                    data: data.data,
                    backgroundColor: color
                    // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef',
                    //     '#3c8dbc', '#d2d6de', '#605ca8', '#ff851b', '#00a65a',
                    //     '#f39c12'
                    // ]
                }]
            }
            var pieOptions = {
                legend: {
                    display: false
                }
            }
            // Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            // eslint-disable-next-line no-unused-vars
            var pieChart = new Chart(pieChartCanvas, {
                type: 'doughnut',
                data: pieData,
                options: pieOptions
            })
        }

        function chartSambal(params) {
            //-------------
            // - PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChartSambal').get(0).getContext('2d')
            var data = params;

            var color = ['#605ca8', '#ff851b', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc'];
            var menuSambalLegend = $('#menuSambalLegend');
            $.each(data.labels, function(index, value) {
                menuSambalLegend.append('<li><i class="far fa-circle" style="color:' +
                    color[index] + '"></i> ' + value + ' : ' + data.data[
                        index] + '</li>');
            });
            var pieData = {
                labels: data.labels,
                datasets: [{
                    data: data.data,
                    backgroundColor: color
                    // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef',
                    //     '#3c8dbc', '#d2d6de', '#605ca8', '#ff851b', '#00a65a',
                    //     '#f39c12'
                    // ]
                }]
            }
            var pieOptions = {
                legend: {
                    display: false
                }
            }
            // Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            // eslint-disable-next-line no-unused-vars
            var pieChart = new Chart(pieChartCanvas, {
                type: 'doughnut',
                data: pieData,
                options: pieOptions
            })
        }

        function chartLauk(params) {
            //-------------
            // - PIE CHART -
            //-------------
            // Get context with jQuery - using jQuery's .get() method.
            var pieChartCanvas = $('#pieChartLauk').get(0).getContext('2d')
            var data = params;

            var color = ['#605ca8', '#ff851b', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de', '#f56954', '#4b0082',
                '#ff0000'
            ];
            var menuLaukLegend1 = $('#menuLaukLegend1');
            var menuLaukLegend2 = $('#menuLaukLegend2');
            $.each(data.labels, function(index, value) {
                if (index > 4) {
                    menuLaukLegend2.append('<li><i class="far fa-circle" style="color:' +
                        color[index] + '"></i> ' + value + ' : ' + data.data[
                            index] + '</li>');
                } else {
                    menuLaukLegend1.append('<li><i class="far fa-circle" style="color:' +
                        color[index] + '"></i> ' + value + ' : ' + data.data[
                            index] + '</li>');
                }
            });
            var pieData = {
                labels: data.labels,
                datasets: [{
                    data: data.data,
                    backgroundColor: color
                    // backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef',
                    //     '#3c8dbc', '#d2d6de', '#605ca8', '#ff851b', '#00a65a',
                    //     '#f39c12'
                    // ]
                }]
            }
            var pieOptions = {
                legend: {
                    display: false
                }
            }
            // Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            // eslint-disable-next-line no-unused-vars
            var pieChart = new Chart(pieChartCanvas, {
                type: 'doughnut',
                data: pieData,
                options: pieOptions
            })
        }
    </script>
@endpush