How to Make Chart js in Laravel 8

chart js laravel

How to Make Chart js in Laravel 8 – Brillian Solution. Hello guys, selamat datang kembali di postingan saya tentang Laravel. Kali ini saya akan membahas bagaimana cara sederhana membuat chart menggunakan chart.js di Laravel Framework versi 8.

Chart.js adalah sebuah visualisasi (grafik) yang biasanya digunakan untuk menyampaikan suatu informasi tertentu dalam tampilan visual grafik. Fitur chart (grafik) ini sering digunakan pada sebuah aplikasi yang menyajikan data dalam bentuk grafik agar informasi lebih mudah dibaca oleh pengguna.

Pada artikel kali ini, kita akan membahas tentang chart menggunakan chart.js.

Tidak usah banyak lebar langsung saja kita implementasikan ke dalam Laravel Framework.

Langkah-langkah How to Make Chart js in Laravel 8

Download Chart.js

How to Make Chart js in Laravel 8

Download dahulu Chart.js nya disini

Letakan pada folder public laravel.

How to Make Chart js in Laravel 8

Tambahkan Script Chart.js

Tambahkan pada file blade view laravel. Dalam kasus ini saya menggunakan home.blade.php

<script src="{{asset('admin/vendor/chart.js/Chart.js')}}"></script>
<script>
    // import Chart from 'chart.js/auto';
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {!! $data['chart'] !!});
</script>

tuliskan kode blok seperti kode diatas.

Buat Controller

Buatlah sebuah controller untuk menampung kode chart.js.

public function index(){


return view('home',compact('data'));
}

public function createChart(){
// code
}

public function createDataset($param1, $param2){
// code
}

Pada fungsi index tambahkan kode berikut untuk menampung variabel chart.js

public function index(){
$data['chart'] = json_encode($this->createChart());
return view('home',compact('data'));
}

Buat Fungsi

fungsi createChart() dan fungsi createDateset() dapat disesuaikan dengan keinginan Anda. Pada intinya adalah menampung array-array yang dibutuhkan oleh chart.js

Fungsi createChart()

public function createChart(){
        $tbl_sub_kegiatan = TblSubKegiatan::select('id')->get();
        $datasets = [];
        foreach($tbl_sub_kegiatan as $sub){
            $dataset = $this->createDataset($sub->id,2022);
            $datasets[] = $dataset;
        }
        // dd($datasets);
        $labels = [
            'Januari','Febuari','Maret','April','Mei','Juni','July','Agustus','September','Oktober','November','Desember'
        ];
        return [
            'type'=>'line',
            'data'=>[
                'labels'=>$labels,
                'datasets'=>$datasets
            ]
        ];
    }

Fungsi createDataset

  public function createDataset($tbl_sub_kegiatan_id,$year){
        $year_month = [
            '2022-01','2022-02','2022-03','2022-04','2022-05','2002-06','2022-07','2022-08','2022-09','2022-10','2022-11','2022-12'
        ];
        $label = TblSubKegiatan::findOrFail($tbl_sub_kegiatan_id);
        $data = [];
        foreach($year_month as $y){
            $result = EntrySpj::where('tbl_sub_kegiatan_id',$tbl_sub_kegiatan_id)->where('tanggal','like',$y.'%')->sum('nominal');
            $data[] = $result;
        }

        $randomColor ='rgb('. rand(1,255). ',' .rand(1,255). ','. rand(1,255) .')';
        
        return [
            'label'=> $label->kode_sub. ' - '.$label->nama_sub_kegiatan,
            'data'=>$data,
            'fill'=>false,
            'borderColor' => $randomColor,
            'tension' => 0.1
        ];
    }

Pada kedua fungsi diatas, saya sudah membuatnya sesuai dengan kebutuhan saya. Dimana saya membutuhkan beberapa dataset dengan jumlah (sum) pada setiap datanya.

Buat View

Masuk ke view laravelnya. Saya membuat sebuah view bernama home.blade.php

<div class="row">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-header">
                        <h6>Grafik Pengeluaran tahun : 2022</h6>
                    </div>
                    <div class="table-responsive">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

Tambahkan kode <canvas id=”myChart”></canvas> untuk merender chart.js

Hasil

How to Make Chart js in Laravel 8

Hasilnya adalah seperti gambar diatas. Pada gambar diatas adalah contoh penggunaan Line chart menggunakan chart.js dengan laravel framework 8.

Jika ada pertanyaan silahkan comment di kolom komentar.

Related Keyword

  • laravel chart js
  • chart js laravel
  • chart js laravel 7
  • chart js laravel 8
  • How to Make Chart js in Laravel 6
  • How to Make Chart js in Laravel 7
  • How to Make Chart js in Laravel 8
  • How to Make Chart js in Laravel 9

brillian

Leave a Reply

%d bloggers like this: