//controller.php

public function reportWithChart(){

 $chartVisitor = Visitor::select(DB::raw("COUNT(*) as count"), DB::raw("DATE_FORMAT(created_at, '%M') as month_name"))

            ->where('created_at', '>=', Carbon::now()->subMonths(9))

            ->groupBy(DB::raw("month_name"))

            ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')

            ->pluck('count', 'month_name');

​

        $chartUsers = User::select(DB::raw("COUNT(*) as count"), DB::raw("DATE_FORMAT(created_at, '%M') as month_name"))

            ->where('created_at', '>=', Carbon::now()->subMonths(9))

            ->groupBy(DB::raw("month_name"))

            ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')

            ->pluck('count', 'month_name');

​

        $visitorData = [];

        $userData = [];

        $months = [];

        for ($i = 6; $i >= 0; $i--) {

            $month = Carbon::now()->subMonths($i);

            $monthName = $month->format('F');

            $months[] = $monthName;

​

            // Add the visitor count for this month

            if (isset($chartVisitor[$monthName])) {

                $visitorData[] = $chartVisitor[$monthName];

            } else {

                $visitorData[] = 0;

            }

​

            // Add the user count for this month

            if (isset($chartUsers[$monthName])) {

                $userData[] = $chartUsers[$monthName];

            } else {

                $userData[] = 0;

            }

        }

​

        // Convert the data to JSON format for Chart.js

        $visitorData = json_encode($visitorData);

        $userData = json_encode($userData);

        $months = json_encode($months);

    return view('dashboard', [

            'months' => $months,

            'visitorData' => $visitorData,

            'userData' => $userData,

        ]);

}

​

//html.blade.php

<div class="card-body bg-secondary">

<h5 class="text-primary text-center mb-5">Monthly Visitors & Customers From SMT Website</h5>

<div class="w-100" style="height: 350px">

<canvas id="myChart" style="width: 100%;height: 100%"></canvas>

</div>

</div>

​

@push('script')

  <script>

    var ctx = document.getElementById('myChart').getContext('2d');

    var myChart = new Chart(ctx, {

        type: 'line',

        data: {

            labels: <?php echo $months; ?>,

            datasets: [{

                    label: 'Visitors',

                    data: <?php echo $visitorData; ?>,

                    backgroundColor: 'rgb(245 204 122)',

                    borderColor: 'rgb(245 204 122)',

                    borderWidth: 1

                },

                {

                    label: 'Users',

                    data: <?php echo $userData; ?>,

                    backgroundColor: 'rgb(85 216 95)',

                    borderColor: 'rgb(85 216 95)',

                    borderWidth: 1

                }

            ]

        },

        options: {

            scales: {

                y: {

                    beginAtZero: true,

                    ticks: {

                        precision: 0,

                        stepSize: 1

                    }

                }

            }

        }

    });

</script>

@endpush

​