How to Make Chart js in Laravel 8
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.
Contents
Langkah-langkah How to Make Chart js in Laravel 8
Download Chart.js
Download dahulu Chart.js nya disini
Letakan pada folder public laravel.
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
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
