Membuat Grafik Sebaran Covid-19 dengan Laravel Charts

Assalamualaikum Warohmatulloh Wabarokatuh, melanjutkan tulisan sebelumnya yang ditulis oleh @rap92 (Rio Aditya) yang berjudul “Menampilkan Data Sebaran Covid-19 Dengan Laravel 7 Dan API Kawal Corona“; Di sini saya akan melanjutkan untuk menambahkan grafik dengan Laravel Charts agar data yang ditampilkan lebih informatif dan lebih mudah dipantau.

Dalam pembuatan projek ini saya akan menggunakan Laravel 7 & Laravel Chart, tentunya tetap memanfaatkan fitur HTTP Client dari Laravel 7. Oke saya anggap kawan kawan sudah meginstal Laravel atau sudah mengikuti tulisan sebelumnya.

Maka berikutnya kita instal dulu package Laravel Chart menggunakan composer.

composer require consoletvs/charts:6.*

Membuat Class Laravel Chart

Setelah proses instalasi Laravel Charts sudah selesai, kita bisa membuat sebuah Class Chart dengan menggunakan perintah Artisan.

php artisan make:chart {Name} {Library?}

Pada perintah di atas {Name} bisa kita isi dengan nama Class yang akan dibuat, sedangkan {Library} bisa diisi dengan library chart yang disediakan oleh Laravel Chart, atau kosongkan jika ingin menggunakan library default (chart.js), jadi bisa jalankan perintah ini.

php artisan make:chart CovidChart

Maka akan terbuat file baru app/Charts/CovidChart.php, yang isinya seperti ini.

<?php

namespace App\Charts;

use ConsoleTVs\Charts\Classes\Chartjs\Chart;

class CovidChart extends Chart
{
    /**
     * Initializes the chart.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }
}

Membuat Controller

Biarkan file tersebut seperti itu saja, sekarang kita buat sebuah controller, kalau kawan kawan sudah mengikuti tulisan sebelumnya, boleh lewati langkah ini dan gunakan controller yang sudah ada.

php artisan make:controller CovidController

Jika controller sudah terbuat kawan kawan bisa masuk ke app/Http/Controllers/CovidController.php dan tambahkan sebuah method baru dengan nama chart() misalnya.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CovidController extends Controller
{
    public function chart()
    {
        # code...
    }
}

Mengambil Data dari API Kawal Corona

Kemudian tambahkan kode untuk mengambil data dari api kawalcorona dan buat menjadi sebuah collection ke dalam method chart(), kenapa dijadikan collection? nanti kawan kawan juga tahu 😛 , dan tambahkan dd() untuk variabel $suspects untuk mengecek reponse dari API.

$suspects = collect(Http::get('https://api.kawalcorona.com/indonesia/provinsi')->json());
dd($suspects);

Dan jangan lupa untuk import namespace untuk Http Client di atas deklarasi class.

use Illuminate\Support\Facades\Http;

Kemudian daftarkan sebuah URI di routes/web.php.

Route::get('corona', 'CovidController@chart');

Setelah itu jalankan php artisan serve dan buka browser lalu akses URL yang sudah kita daftarkan tadi, harusnya di http://localhost:8000/corona, kurang lebih seperti ini datanya.

Mengolah Data dari Response

Jika sudah hapus kode dd($suspects); kemudian tambahkan kode di bawah ini di bawah kode yang tadi.

$labels = $suspects->flatten(1)->pluck('Provinsi');
$data   = $suspects->flatten(1)->pluck('Kasus_Posi');

Oke saya jelaskan kenapa tadi kita menjadikan datanya sebagai collection, karena kita akan menggunakan method yang ada pada collection Laravel yang bisa memudahkan proses ini, method yang kita gunakan adalah flatten() dan pluck().

Mari dibahas kegunaan method dari collection yang akan kita gunakan, karena saya nggak suka kalo kawan kawan cuma jadi tukang copas 😛 tapi nggak paham maksudnya.

• flatten() sesuai artinya digunakan untuk meratakan, pada penggunaan kasus ini kita akan meratakan array agar key ‘attributes’ hilang, maka digunakan flatten(1) karena kita akan meratakan hanya 1 level.
• pluck() jika diterjemahkan artinya memetik, kurang lebih memang fungsinya untuk memetik, nah tapi bukan memetik buah ya, tapi digunakan memetik value berdasarkan key yang sudah ditentukan, contoh pluck('Provinsi') maka akan mengambil semua value dari key Provinsi dan membuat sebuah array / collection sebagai hasilnya.

Mungkin nanti jelasnya akan saya dalam video tentang dua method tersebut, sekarang kita lanjutkan kodenya, lanjutkan kodenya di bawahnya ya.

$chart = new CovidChart;
$chart->labels($labels);
$chart->dataset('Kasus Positif', 'pie', $data);

Serta import namespace dari CovidChart di atas deklarasi class.

use App\Charts\CovidChart;

Penjelasannya kode di atas seperti ini :

• pertama kita membuat sebuah object dalam variabel $chart dari class CovidChart.
• Kemudian kita buat label dengan method labels() dengan data yang berasal dari variabel $labels.
• Terakhir kita buat dataset dengan method dataset()
  • Parameter pertama adalah sebagai judul,
  • Parameter keudua adalah pilihan tipe dari chart yang akan ditampilkan beberapa tipe yang bisa digunakan antara lain : line, pie, doughnut.
  • Parameter ketiga adalah data yang kita tampilkan didapatkan dari data kasus positif corona di variabel $data.

Setelah itu kita buat return untuk menampilkan view.

return view('corona', [
    'chart' => $chart,
]);

Membuat File View

Karena kita belum memiliki file view maka kita buat terlebih dulu di folder resources/views dengan nama corona.blade.php dan isi dengan kode di bawah ini.

<!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>Corona</title>
</head>
<body>
    <h1>Peta Sebaran Covid-19 di Indonesia</h1>
    {!! $chart->container() !!}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
    {!! $chart->script() !!}
</body>
</html>

Untuk bagian CDN kawan kawan sesuaikan dengan library chart yang digunakan ya, karena di sini saya gunakan default maka saya gunakan CDN Chart.js. Kemudian kita coba akses kembali http://localhost:8000/corona, dan akan tampil seperti gambar di bawah ini.

Seperti yang terlihat di atas, grafik yang kita buat tidak memiliki warna, untungnya package Laravel Charts menyediakan method yang mudah untuk memberikan warna pada grafiknya. Dengan menggunakan method backgroundColor($colors) dimana untuk variabel $colors merupakan sebuah array sesuai banyaknya data. Dan di sini saya kembali menggunakan method pada collection di Laravel yaitu map() untuk membuat warnanya, dan secara acak, jadi ketika halaman di refresh maka warna akan berubah.

$colors = $labels->map(function($item) {
    return $rand_color = '#' . substr(md5(mt_rand()), 0, 6);
});

Kemudian pada dataset yang kita miliki tambahkan method backgroundColor().

$chart->dataset('Kasus Positif', 'pie', $data)->backgroundColor($colors);

Akses lagi halaman http://localhost:8000/corona maka akan tampil seperti ini.

File Controller & Hasil

Dan untuk yang kesulitan dengan file controllernya ini adalah kode lengkap dari file app/Http/Controllers/CovidController.php.

<?php

namespace App\Http\Controllers;

use App\Charts\CovidChart;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class CovidController extends Controller
{
    public function chart()
    {
        $suspects = collect(Http::get('https://api.kawalcorona.com/indonesia/provinsi')->json());
        
        $labels = $suspects->flatten(1)->pluck('Provinsi');
        $data   = $suspects->flatten(1)->pluck('Kasus_Posi');
        $colors = $labels->map(function($item) {
            return $rand_color = '#' . substr(md5(mt_rand()), 0, 6);
        });

        $chart = new CovidChart;
        $chart->labels($labels);
        $chart->dataset('Kasus Positif', 'pie', $data)->backgroundColor($colors);

        return view('corona', [
            'chart' => $chart,
        ]);
    }
}

Dan untuk yang ingin penjelasan lebih rinci silakan simak video dibawah ini.

Wassalamualaikum Warohmatulloh Wabarokatuh.

* Ikon chart oleh Freepik dari www.flaticon.com