Cara Menggunakan Google Chart Pie di Laravel

Pada postingan kali ini saya akan memberikan contoh untuk Cara Menggunakan Google Chart Pie di Laravel. Untuk studi kasus kita kali ini, kita akan membuat table pengunjung dengan kolom klik dan tampilan.

Tutorial ini dapat digunakan pada versi Laravel 6, Laravel 7, Laravel 8 dan Laravel 9.

Gambar 1. Tampilan Google Chart Pie

Langkah 1. Buat Migrasi (Create Migration)

Pada langkah ini kita perlu membuat atau menambahkan tabel baru pada aplikasi kita yang sudah ada. Jika anda belum memiliki aplikasi laravel silahkan cek Cara Membuat CRUD dengan Laravel. Kita akan membuat table baru dengan nama "visitors" menggunakan perintah dibawah ini :

php artisan make:migration create_visitors_table

Jika sudah menjalankan perintah di atas maka anda akan mendapatkan satu file baru pada database/migrations buka file dengan nama "visitors" dan tambahkan kode seperti dibawah ini :

<?php
  
use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('visitors', function (Blueprint $table) {
            $table->id();
            $table->integer('click');
            $table->integer('viewer');
            $table->date('visit_date');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('visitor');
    }
};

Langkah 2. Buat Model (Create Model)

Selanjutnya kita akan membuat Model dengan menggunakan perintah dibawah ini :

php artisan make:model Visitor

Jika sudah menjalankan maka anda akan mendapatkan satu file baru pada app/Models/Visitor.php

<?php
  
namespace AppModels;
  
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
  
class Visitor extends Model
{
    use HasFactory;
}

Langkah 3. Menambahkan Rute (Add Route)

Pada langkah ini kita akan menambahkan route untuk menghasilkan tampilan. Jadi mari kita buka route/web.php dan tambahkan route seperti dibawah ini :

<?php
  
use IlluminateSupportFacadesRoute;
  
use AppHttpControllersGoogleController;
  
/*
|--------------------------------------------------------------------------
| 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('google-chart', [GoogleController::class, 'googleLineChart']);

Langkah 4. Menambahkan Controller

Disini kita perlu untuk menambahkan controller untuk mengelola data kita, silahkan isi data contoh (dummy) padasemua  kolom table "visitors" anda untuk kita uj dan jalankan aplikasi kita.

Silahkan jalankan perintah di bawah ini untuk menghasilkan file baru dengan nama GoogleChartController.php :

php artisan make:controller GoogleChartController

Jika sudah maka anda akan mendapatkan satu file baru pada app/Http/Controllers dengan nama GoogleChartController.php. Silahkan isi seperti kode dibawah ini :

<?php
    
namespace AppHttpControllers;
    
use IlluminateHttpRequest;
use AppModelsVisitor;
use DB;
  
class GoogleController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function googleLineChart()
    {
        $visitors = Visitor::select(
                            DB::raw('SUM(click) as total_click'), 
                            DB::raw('SUM(viewer) as total_viewer')
                        )
                        ->orderBy(DB::raw("YEAR(created_at)"))
                        ->groupBy(DB::raw("YEAR(created_at)"))
                        ->get();
  
        $result[] = ['Clicks','Viewers'];
        foreach ($visitors as $key => $value) {
            $result[++$key] = ["Clicks", (int)$value->total_click];
            $result[++$key] = ["Views", (int)$value->total_viewer];
        }
    
        return view('googleChart', compact('result'));
    }
}

Langkah 5. Buat File Blade

Ini merupakan langkah terakhir kita, Untuk mendapatkan tampilan seperti contoh Gambar 1 di atas. Kita akan membuat satu file dengan nama googleChart.blade.php pada resources/view.File inilah yang akan menampilkan Google Chart yang kita buat.

Jika sudah membuatnya silahkan isi file tersebut dengan kode dibawah ini :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>SarjanaIT.com - Cara Menggunakan Google  Chart Pie di Laravel</title>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
  
        var data = google.visualization.arrayToDataTable({{ Js::from($result) }});
  
        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };
  
        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>

  </head>
  <body>
    <div class="container mt-5">
      <div class="row justify-content-center p-3 shadow">
      <h2 class="text-center">SarjanaIT.com <br> Cara Menggunakan Google  Chart Pie di Laravel</h2>
      <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

  </body>
</html>

Selesai.

Silahkan jalankan aplikasi anda dengan jalankan perintah php artisan serve kemudian buka browser yang anda gunakan dalan jalankan url http://localhost:8000/google-chart.

Baca Juga : Cara Menggunakan Google Chart Bar di Laravel

Saya harap punya anda berhasil juga, jika masih error atau terdapat kendala silahkan bertanya pada kolom komentar dibawah ini, terimkasih.