Breaking News: Grepper is joining You.com. Read the official announcement!

chart js with laravel

WinMaw answered on May 5, 2023 Popularity 3/10 Helpfulness 4/10

answer chart js with laravel

chart js with laravel

Comment

//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

Popularity 3/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css laravel

Link to this answer
Share Copy Link

Contributed on May 05 2023

WinMaw

0 Answers Avg Quality 2/10

chart js with laravel

Contents

More Related Answers

chart js with laravel

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.