Pada tutorial kali ini, saya akan membagikan tutorial singkat bagaimana sih caranya membuat grafik dengan menggunakan library Highcharts di Laravel 6/7. Saya akan berikan langkah demi langkah yang sederhana untuk membuatnya. Ini sangtlah mudah sekali untuk diimplementasikannya. Oh ya, dengan Highchart ini temen-temen bisa menggunakan aneka jenis chart, diantaranya: Line Charts, Bar Charts, Pie Charts, Area Charts, dll. 

Untuk melihat beberapa fitur yang dapat temen-temen implementasikan lebih lengkapnya, silahkan lihat websiter resminya disini: HighCharts.

Kapan pun jika temen-temen membutuhkan implementasi dari grafik untuk di project Laravel Anda, kalian bisa menggunakan Highcharts ini dengan mudah. Karena kami telah menyiapkanya di Serambi Laravel ini. Silahkan ikuti tutorial dibawah ini. Let’s go…

Preview:

Tampilan grafik dengan Highcharts

1. Membuat Route

Langkah pertama kita yakni membuat route. Dan nantinya kita akan gunakan route ini untuk menampilkan grafik Highcharts kita. Okeh, kita buat dulu routenya dengan sintak dibawah ini.

routes/web.php

Route::get('chart', 'ChartController@index');

2. Membuat Controller

Selanjutnya kita buat controller baru, kita beri nama ChartController. Okeh, silahkan isikan kode progam dibawah ini pada controller Anda.

app/Http/Controllers/ChartController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\User;
  
class ChartController extends Controller
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function index()
    {
        $users = User::select(\DB::raw("COUNT(*) as count"))
                    ->whereYear('created_at', date('Y'))
                    ->groupBy(\DB::raw("Month(created_at)"))
                    ->pluck('count');
          
        return view('chart', compact('users'));
    }
}

3. Membuat File Blade

Untuk menampilkan grafik Highcharts kita memerlukan satu halaman khusus. Oleh karenanya kita akan membuat satu file blade. Selanjutnya masukannya sintak bawah ini pada file blade Anda.

resources/views/chart.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Cara Membuat Grafik dengan Highcharts di Laravel 6/7</title>
</head>
   
<body>
<h1 class="text-center">Cara Membuat Grafik dengan Highcharts di Laravel 6/7</h1>
<div id="container"></div>
</body>
  
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var users =  <?php echo json_encode($users) ?>;
   
    Highcharts.chart('container', {
        title: {
            text: 'Pengguna Baru, 2020'
        },
        subtitle: {
            text: 'Source: serambilaravel.com'
        },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Jumlah Pengguna Mendafatar'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                allowPointSelect: true
            }
        },
        series: [{
            name: 'Pengguna Baru',
            data: users
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 200
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
});
</script>
</html>

4. Membuat Data User

Sebelum menjalankan program ini, pastikan Anda sudah memiliki beberapa data user dimana setiap bulan minimal ada satu user. Atau Anda dapat mengatur data user di http://localhost/phpmyadmin/ (localhost Anda) untuk merubah data pada kolom created_at pada tabel users. Pastikan setiap bulan pada kolom created_at memiliki beberapa data bulan yang berbeda, supaya grafik ini bekerja dengan baik.

Tampilan database dengan created_at berbeda

Jika sudah, maka program Anda siap untuk dijalankan. Gmana mudah bukan?

Semoga artikel singkat ini bermanfaat, salam programmer…

https://blog.abdan.xyz/
Do you like Abdan Zam Zam Ramadhan's articles? Follow on social!
Comments to: Cara Membuat Grafik dengan Highcharts di Laravel 6/7/8

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.