Menampilkan data dari database MySQL ke grafik di Laravel menggunakan Chart.js

Berikut adalah artikel tutorial tentang cara menampilkan data dari database MySQL ke grafik di Laravel menggunakan Chart.js, salah satu library grafik berbasis JavaScript yang populer. Di tutorial ini, kita akan menggunakan data dari MySQL untuk ditampilkan dalam bentuk grafik (chart) di frontend Laravel.

Menampilkan Data dari MySQL ke Grafik di Laravel Menggunakan Chart.js

Dalam pengembangan aplikasi, kita sering membutuhkan tampilan data dalam bentuk grafik agar lebih mudah dipahami. Laravel membuat proses ini sangat sederhana, terutama dengan menggunakan library seperti Chart.js yang mudah diintegrasikan.

Berikut adalah langkah-langkah lengkap untuk menampilkan data dari MySQL ke dalam grafik di Laravel menggunakan Chart.js.

Langkah 1: Install Laravel dan Setup Database

Sebelum ke step berikutnya, ada baiknya mengikuti tutorial sebeumnya tentang Belajar CRUD lengkap dengan fitur upload gambar di Laravel 10. Jika Anda belum memiliki proyek Laravel, Anda bisa membuatnya dengan perintah berikut:

composer create-project --prefer-dist laravel/laravel laravel-chart

Konfigurasi koneksi database MySQL di file .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=root
DB_PASSWORD=

Jalankan perintah berikut untuk membuat database jika belum ada:

php artisan migrate

Langkah 2: Buat Model dan Migration

Kita akan membuat tabel sales untuk menyimpan data penjualan. Buat model dan migration dengan perintah berikut:

php artisan make:model Sale -m

Ini akan menghasilkan file migration di database/migrations. Edit file migration tersebut untuk mendefinisikan tabel sales:

public function up()
{
    Schema::create('sales', function (Blueprint $table) {
        $table->id();
        $table->string('product_name');
        $table->integer('quantity');
        $table->timestamps();
    });
}

Jalankan migrasi untuk membuat tabel:

php artisan migrate

Langkah 3: Isi Data ke Database

Anda bisa memasukkan data penjualan secara manual atau menggunakan seeder untuk mengisi data ke tabel sales. Buat seeder dengan perintah:

php artisan make:seeder SalesTableSeeder

Isi data dummy di SalesTableSeeder.php:

use App\Models\Sale;
use Illuminate\Database\Seeder;

class SalesTableSeeder extends Seeder
{
    public function run()
    {
        Sale::create(['product_name' => 'Product A', 'quantity' => 120]);
        Sale::create(['product_name' => 'Product B', 'quantity' => 90]);
        Sale::create(['product_name' => 'Product C', 'quantity' => 75]);
        Sale::create(['product_name' => 'Product D', 'quantity' => 60]);
        Sale::create(['product_name' => 'Product E', 'quantity' => 150]);
    }
}

Jalankan seeder untuk mengisi data:

php artisan db:seed --class=SalesTableSeeder

Jika berhasil, maka data akan masuk di database sebagai berikut:

Langkah 4: Buat Controller untuk Menampilkan Data

Sekarang kita buat controller yang akan mengambil data dari database dan mengirimkannya ke view untuk ditampilkan dalam bentuk grafik.

Buat controller dengan perintah:

php artisan make:controller ChartController

Edit file ChartController.php untuk mengambil data penjualan dari database dan mengirimkannya ke view:

namespace App\Http\Controllers;

use App\Models\Sale;
use Illuminate\Http\Request;

class ChartController extends Controller
{
    public function index()
    {
        // Mengambil semua data dari tabel sales
        $sales = Sale::all();
        
        // Menyiapkan data untuk Chart.js
        $labels = $sales->pluck('product_name'); // Label berupa nama produk
        $quantities = $sales->pluck('quantity'); // Data berupa quantity

        return view('chart', compact('labels', 'quantities'));
    }
}

Langkah 5: Buat Route untuk Menampilkan Grafik

Tambahkan route di routes/web.php:

use App\Http\Controllers\ChartController;

Route::get('/chart', [ChartController::class, 'index'])->name('chart.index');

Langkah 6: Install Chart.js

Kita akan menggunakan Chart.js untuk menampilkan grafik. Tambahkan link Chart.js di view Anda menggunakan CDN. Anda bisa menambahkan script ini di view yang akan kita buat di langkah selanjutnya.

Langkah 7: Buat View untuk Menampilkan Grafik

Sekarang, kita buat file view di resources/views/chart.blade.php. File ini akan menampilkan grafik menggunakan data yang kita kirim dari controller. 
 

@extends('layout')

@section('title', 'Sales Chart')

@section('content')
<div class="container mt-5">
    <h2 class="mb-4">Sales Data</h2>

    <!-- Canvas untuk Chart.js -->
    <canvas id="salesChart" width="400" height="200"></canvas>
</div>

<!-- Script Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    var ctx = document.getElementById('salesChart').getContext('2d');

    // Data yang dikirim dari controller
    var labels = {!! json_encode($labels) !!};
    var data = {!! json_encode($quantities) !!};

    // Membuat grafik bar
    var salesChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels, // Nama produk
            datasets: [{
                label: 'Quantity Sold',
                data: data, // Jumlah yang terjual
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endsection

Tambahkan layout.blade.php di folder views dan isi code berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'CRUD Posts')</title>

    <!-- Tambahkan Bootstrap CSS atau styling lainnya -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="{{ route('posts.index') }}">My Blog</a>
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('chart.index') }}">Chart</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mt-5">
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @yield('content')
    </div>

    <!-- Tambahkan Bootstrap JS atau script lainnya -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Langkah 8: Testing

Jalankan server Laravel:

php artisan serve

Buka browser dan akses URL:

http://localhost:8000/chart

Sekarang, Anda akan melihat data penjualan dari database MySQL ditampilkan dalam bentuk grafik bar menggunakan Chart.js. 
Jika anda sudah melakukan step by step dengan benar, maka akan menghasilkan result berikut: