Tutorial Laravel

Pie Line Column Chart Laravel 10 + Bootstrap5 + MySQL

/ by | 1 Komentar pada Pie Line Column Chart Laravel 10 + Bootstrap5 + MySQL

Pie Line Column Chart Laravel 10

Pie Line Column Chart Laravel 10 – Tutorial membuat grafik (chart) pada Laravel 10 dengan Bootstrap 5 dan database MySQL, bentuk grafiknya antara lain Pie Chart, Line Chart, Column Chart. Kasus kali ini menggunakan Nortwind Database.

1. Membuat Project Laravel

Pastikan Anda sudah menginstall composer, kemudian jalankan perintah berikut di command prompt.

composer create-project laravel/laravel laravel-chart

2. Mengatur Database MySQL

Langkah kedua adalah membuat database dengan nama laravel_chart di http://localhost/phpmyadmin jika Anda menginstall XAMPP untuk server MySQL.

Sesuaikan pengaturan koneksi mysql di project laravel pada file .env

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

Sesuaikan DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, dan DB_PASSWORD sesuai server MySQL.

3. Import Database

Pada tutorial ini sudah menyediakan data dalam bentuk sql, silakan Anda impor ke phpmyadmin. Database terdiri dari 5 tabel yaitu categories, cutomers, order_details, orders, dan products. Anda juga bisa membuat data dummy sendiri dengan migrasi, factory, dan faker seperti pada tutorial Crud Laravel 9. Download database laravel_chart.sql.

4. Membuat Model

Buat model Product dan OrderDetail menggunakan perintah berikut.

php artisan make:model Product
php artisan make:model OrderDetail

5. Membuat Controller Dashboard

Gunakan perintah berikut untuk membuat controller.

php artisan make:controller DashboardController

Sesuaikan app/controllers/DashboardController.php sebagai berikut.

<?php

namespace App\Http\Controllers;

use App\Models\OrderDetail;
use App\Models\Product;
use Illuminate\Http\Request;

class DashboardController extends Controller
{
    public function dashboard()
    {
        /** PIE CHART */
        $rows = Product::selectRaw('category_name, COUNT(*) AS total')
            ->join('categories', 'categories.category_id', 'products.category_id')
            ->groupBy('category_name')->get();
        $pie = [];
        foreach ($rows as $row) {
            $pie[] = [
                'name' =>  $row->category_name,
                'y' =>  $row->total,
            ];
        }
        $rows = OrderDetail::selectRaw('MAX(order_date) AS order_date, SUM(quantity) AS total')
            ->join('orders', 'orders.order_id', 'order_details.order_id')
            ->groupByRaw('YEAR(order_date), MONTH(order_date)')->get();

        /** LINE CHART */
        $line = [];
        foreach ($rows as $row) {
            $line['categories'][] = date('M-Y', strtotime($row->order_date));
            $line['data'][] = $row->total * 1;
        }
        $rows = OrderDetail::selectRaw('category_name, YEAR(order_date) AS order_date, SUM(quantity) AS total')
            ->join('orders', 'orders.order_id', 'order_details.order_id')
            ->join('products', 'products.product_id', 'order_details.product_id')
            ->join('categories', 'categories.category_id', 'products.category_id')
            ->groupByRaw('category_name, YEAR(order_date)')->get();

        /** PIE CHART */
        $column = [];
        foreach ($rows as $row) {
            $column['categories'][$row->order_date] = $row->order_date;
            $column['series'][$row->category_name]['name'] = $row->category_name;
            $column['series'][$row->category_name]['data'][$row->order_date] = $row->total * 1;
        }
        foreach ($column['series'] as $key => $val) {
            $column['series'][$key]['data'] = array_values($val['data']);
        }
        $column['categories'] = array_values($column['categories']);
        $column['series'] = array_values($column['series']);
        return view('dashboard', compact('pie', 'line', 'column'));
    }
}
  • Perintah ->selectRaw('...') berfungsi untuk membuat perintah select custom, karena berisi SUM/COUNT/MAX di dalam select.
  • Perintah ->groupRaw('...') berfungsi untuk mengelompokkan (group) data secara custom, karena terdapat YEAR/MONTH pada group.

6. Menambahkan Route dashboard

Tambahkan route untuk crud user di routes/web.php bertipe resource seperti berikut.

<?php

use App\Http\Controllers\DashboardController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('dashboard', [DashboardController::class, 'dashboard']);

7. Membuat View

Buat view untuk menampilkan data dashboard di direktori resources/views/dashboard.blade.php.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <div class="container my-5">
        <h1>Dashboard</h1>
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header">
                        Pie Chart
                    </div>
                    <div class="card-body">
                        <div id="pie_chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-header">
                        Line Chart
                    </div>
                    <div class="card-body">
                        <div id="line_chart"></div>
                    </div>
                </div>
            </div>
        </div>


        <div class="card mb-3">
            <div class="card-header">
                Column Chart
            </div>
            <div class="card-body">
                <div id="column_chart"></div>
            </div>
        </div>

    </div>
    <script>
        Highcharts.chart('column_chart', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Sum of Product Grouped by Year Chart',
            },
            xAxis: {
                categories: <?= json_encode($column['categories']) ?>,
                title: {
                    text: null
                },
                gridLineWidth: 1,
                lineWidth: 0
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Sales',
                },
                labels: {
                    overflow: 'justify'
                },
                gridLineWidth: 0
            },
            plotOptions: {
                bar: {
                    borderRadius: '50%',
                    dataLabels: {
                        enabled: true
                    },
                    groupPadding: 0.1
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 80,
                floating: true,
                borderWidth: 1,
                backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: <?= json_encode($column['series']) ?>
        });
    </script>
    <script>
        Highcharts.chart('line_chart', {

            title: {
                text: 'Sum of Sales Chart',
            },
            yAxis: {
                title: {
                    text: 'Sales'
                }
            },

            xAxis: {
                categories: <?= json_encode($line['categories']) ?>
            },

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },

            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                }
            },

            series: [{
                name: 'Sales',
                data: <?= json_encode($line['data']) ?>
            }],

            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }

        });
    </script>
    <script>
        Highcharts.chart('pie_chart', {
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Product Count by Category Chart'
            },
            plotOptions: {
                series: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: [{
                        enabled: true,
                        distance: 20
                    }, {
                        enabled: true,
                        distance: -40,
                        format: '{point.percentage:.1f}%',
                        style: {
                            fontSize: '1.2em',
                            textOutline: 'none',
                            opacity: 0.7
                        },
                        filter: {
                            operator: '>',
                            property: 'percentage',
                            value: 10
                        }
                    }]
                }
            },
            series: [{
                name: 'Total',
                colorByPoint: true,
                data: <?= json_encode($pie) ?>
            }]
        });
    </script>
</body>

</html>

8. Menjalankan Project Chart

Langkah terakhir adalah menjalankan project. Silahkan gunakan perintah berikut untuk mengaktifkan server laravel.

php artisan serve

Ketikkan alamat sesuai server diikuti dengan /customer di browser (http://127.0.0.1:8000/dashboard). Hasilnya seperti berikut.

Pie Line Column Chart Laravel 10

Itulah tutorial membuat Grafik Laravel 10. Jika ada yang ditanyakan, silahkan berkomentar.

One Comment “Pie Line Column Chart Laravel 10 + Bootstrap5 + MySQL”

  • Dudung Ruswan

    says:

    Terimakasih ilmunya, Semoga berkah. Sudah saya coba dan dengan sedikit mengubah root saja, program berjalan.

Leave a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

To top