Keranjang Coding : product


?>

Membuat Chart Jumlah User Di Laravel 6 Dengan Chart.js





Selamat datang di Matadeveloper,Dalam kesempatan kali ini saya ingin menjelaskan bagaimana cara membuat chart js di laravel, banyak fungsi yang bisa kita ambil dari ini, bisa sebagai monitoring, mempercantik dashboard kita, dan yang pasti data yang ada bisa terpantau statistiknya.

Chart.js adalah salah satu library yang digunakan untuk membuat grafik.

Dalam laravel sendiri hampir sama pemanggilannya seperti framework lainnya dalam penggunaan Chart JS sendiri, dari mengambil data ke database dan menampilkan nya ke view dalam bentuk script chart sendiri. Dan sebelum lanjut penggunaan chart JS yang pasti anda telah menginstal laravel di komputer anda.

Periapan pertama dalam membuat chart JS di laravel, pertama tama kita download dulu library chart js di website resminya https://www.chartjs.org/.

didalamnya terdapat banyak jenis chart yang bisa anda buat dengan menggunakan Chart.js, anda melihat contoh grafiknya di menu sample : https://www.chartjs.org/samples/latest/

https://matadeveloper.com/uploads/artikels/chart_1585388545.PNG

Kita persiapkan dulu library Chart.js, silahkan mengakses alamat :

https://github.com/chartjs/Chart.js/releases

akan terdapat library chart.js dengan versi yang paling baru, saat tutorial ini dibuat chart.js ada diversi 2.8.0.

Untuk mempermudah anda dalam download library Chart.js, kita sudah siapkan link downloadnya, untuk download library chart.js : Klik Disini

Buat Folder Project

Berikutnya silahkan letakkan file nya di folder projectnya.

Karena dalam kasus ini saya menggunakan php artisan di dalam folder, sehingga kita akan simpan file project di drive E:\Matadeveloper\mata\public\backend\js

Dalam contoh ini saya letak folder didalam public untuk menyimpan asset library, saya letakkan dalam folder backend/js, saya namakana filenya dengan chart.js tampilan nya sebagai berikut :

https://matadeveloper.com/uploads/artikels/folder_1585388651.PNG

Setelah selesai mari kita siapkan database artikel kita. Disini saya menggunakan database mysql, berikut field yang sudah saya buat pada tabel f_tblusers: disini saya membuat field database dengan tambahan tools tambahan sebagai media penghubung dengan database yakni Navicat, untuk field database mungkin bisa disesuaikan ataupun di custom sesuai kebutuhan sistem yang anda gunakan,

https://matadeveloper.com/uploads/artikels/database_1585388809.PNG

Untuk mempermudah anda dalam membuat database, tabel, serta record didalam tabel, anda bisa menggunakan perintah SQL dibawah ini :

/*
 Navicat Premium Data Transfer
 Source Server         : localhost_3307
 Source Server Type    : MySQL
 Source Server Version : 100140
 Source Host           : localhost:3307
 Source Schema         : matadeveloper
 Target Server Type    : MySQL
 Target Server Version : 100140
 File Encoding         : 65001
 Date: 11/03/2020 15:34:12
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for f_tblusers
-- ----------------------------
DROP TABLE IF EXISTS `f_tblusers `;
CREATE TABLE ` Table_user `  (
  `UserID` int(11) UNSIGNED NOT NULL AUTO_INCREMENT,
  `Fullname` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `Password` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `Email` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `Email_verifikasi` bit(1) NULL DEFAULT b'0',
  `Email_verifikasi_at` datetime(0) NULL DEFAULT NULL,
  `NoTelp` varchar(30) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `NoTelp_access` int(1) NULL DEFAULT 1,
  `Whatsapp` varchar(30) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Whatsapp_access` int(1) NULL DEFAULT 1,
  `PekerjaanID` int(3) NULL DEFAULT NULL,
  `PekerjaanID_access` int(1) NULL DEFAULT 1,
  `Tgl_lahir` date NULL DEFAULT NULL,
  `Tgl_lahir_access` int(1) NULL DEFAULT 1,
  `Jeniskelamin` varchar(20) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Tempat_lahir` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `Tentangsaya` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `NamaRekening` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Alamat_access` int(1) NULL DEFAULT 1,
  `Alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL,
  `Bank` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `NoRekening` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Website` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `AksesID` int(2) NULL DEFAULT 1,
  `Join` datetime(0) NULL DEFAULT NULL,
  `created_at` timestamp(0) NULL DEFAULT NULL,
  `updated_at` timestamp(0) NULL DEFAULT NULL,
  `Photos` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Host` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `OS` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Visitor` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Devices` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `Browser` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `created_profil` datetime(0) NULL DEFAULT NULL,
  `updated_profil` datetime(0) NULL DEFAULT NULL,
  `Remember_token` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  `ActiveMember` date NULL DEFAULT NULL,
  `Status` int(5) NULL DEFAULT NULL,
  `StatusExp` int(5) NULL DEFAULT 0,
  `Hitedit` int(2) NULL DEFAULT 0,
  `Rate` decimal(2, 1) NULL DEFAULT 0.0,
  PRIMARY KEY (`UserID`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 31 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact;
SET FOREIGN_KEY_CHECKS = 1;

Setelah selesai membuat field database, masuk ke dalam project kita, masukkan link chart js di dalam tag header <header> </header>.

<script src="/backend/js/chart.js"></script>

Selanjutnya itu kita buat dulu controller di project laravel kita, disini saya buat controller saya buat dengan nama dashboard, kita gunakan php artisan untuk membuat dashboard controller,

php artisan make:controller dashboard

setelah kita buat controller, masuk ke dalam controller dan panggil data pada database kita di f_tblusers, Perhatikan script di bawah ini :

<?php
namespace App\Http\Controllers\admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Session;
use App\b_tblusers;

class Dashboard extends Controller
{
    public function __construct(){
        $this->middleware(function ($request, $next){
        if(!Session::get('Login')){
            return redirect('/admin/login')->with('alert','Login Terlebih Dahulu');
        }
        return $next($request);
        });
        // $login = Session::get('Login');
    }

    public function index(){
        $title         = 'Dashboard';
        $member        = collect(DB::SELECT("SELECT count(UserID) as jumlah from f_tblusers"))->first();
        $sourcecode    = collect(DB::SELECT("SELECT count(ProjectID) as jumlah from b_tblproject_hdrs"))->first();
        $artikel       = collect(DB::SELECT("SELECT count(ArtikelID) as jumlah from b_tblartikels"))->first();
        $subscribe     = collect(DB::SELECT("SELECT count(SubscriberID) as jumlah from f_tblsubcribers"))->first();
        $pembayaran    = collect(DB::SELECT("SELECT count(TransID) as jumlah from b_tblpembayaran"))->first();
        $label         = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
        for($bulan=1;$bulan < 13;$bulan++){
        $chartuser     = collect(DB::SELECT("SELECT count(UserID) AS jumlah from f_tblusers where month(created_at)='$bulan'"))->first();
        $jumlah_user[] = $chartuser->jumlah;
        }
        return view('admin/dashboard',compact('title','member','sourcecode','artikel','subscribe','pembayaran','jumlah_user','label'));
    }
}

Penjelasan pada bagian ini :

$label = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];

kita mendeklarkan bulan dalam bentuk array yang kita kirim ke view.

Selanjutnya bada bagian yang ini kita melooping sebanyak 12 kali untuk mendapatkan nilai masing masing bulan nya.

for($bulan=1;$bulan < 13;$bulan++){
   $chartuser     = collect(DB::SELECT("SELECT count(UserID) AS jumlah from f_tblusers where month(created_at)='$bulan'"))->first();
   $jumlah_user[] = $chartuser->jumlah;
}

Lalu kita kirimkan data yang kita deklarkan dari controller menuju ke view dengan menggunakan compact unntuk menggabungkan varibel yang kita deklar di controller menuju ke view, disini saya tujukan ke halaman home dashboard yang saya buat.

return view('admin/dashboard',compact('title','member','sourcecode','artikel','subscribe','pembayaran','jumlah_user','label'));

selanjutnya kita menuju ke view letakkan bagian ini di halaman home dashboard nya. Pada halaman home pada view kita gunakan canvas sebagai wadah untuk menampung grafik kita.

<div class="row">
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title" align="center">Statistik User</h4>
                 <canvas id="mataChart" class="chartjs" width="undefined" height="undefined"></canvas>
            </div>
          </div>
        </div>                
    </div>
</div>

Selanjutnya kita panggil id pada canvas menggunakan javascript untuk chart dengan id matachart, perhatikan script berikut dan sesuaikan pada project anda.

<script type="text/javascript">
    var ctx = document.getElementById("mataChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($label); ?>,
        datasets: [{
        label: 'Statistik User',
        backgroundColor: '#ADD8E6',
        borderColor: '#93C3D2',
        data: <?php echo json_encode($jumlah_user); ?>
        }],
        options: {
    animation: {
        onProgress: function(animation) {
            progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
        }
      }
    }
   },
 });
</script>

Kita deklarasikan nama bulan pada data label, dan untuk nilai hasil count bulan yang merister itu kita letakkan pada data dalam bentuk json_encode.

Untuk hasil dari yang sudah dibuat seperti gambar dibawah ini :

https://matadeveloper.com/uploads/artikels/laravelchart_1585389397.PNG

Mungkin itu saja pembahasan menganai cara menampilkan  data user perbulan menggunakan laravel 6, semoga bermanfaat dan jangan lupa selalu stay toon di matadeveloper untuk mendapatkan artikel menarik. Kalau ada yang tidak jelas silahkan comment di kolom komentar untuk kita bahas bersama. Sampai jumpa !!!

 

Tags : laravel php mysql

Sekilas Tentang Penulis


Kharisma Maulana Pasaribu,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Menambahkan Fitur Filter data di Grafik
Next Post
Mengenal Macam Macam Format Text Pada Ht