Keranjang Coding : product


?>

Menambahkan Fitur Filter data di Grafik





Oke sobat, ini merupakan part 2 dari membuat grafik di codeigniter menggunakan Amchart, bagi sobat yang belum mengikuti part sebelumnya, silahkan untuk mempelajari part 1 nya dahulu disini, karena pada tutorial kali ini kita akan melanjutkan applikasi yang telah kita buat sebelumnya

Dan kali ini kita akan mencoba membuat sebuah tambahan fitur filtering data pada grafik yang telah kita buat di part sebelumnya. Berikut adalah tampilan hasil tutorial pada part kali ini.

Gimana sobat koding sekalian ? Penasaran gimana filter itu bekerja ? Silahkan simak pembahasan berikut ini ya.

Pertama sekali kita membutuhkan library select2, library ini berfungsi untuk mempermudah kita untuk menselect atau memilih data filter yang kita inginkan, select2 ini akan terasa berguna sekali ketika data filter kita sudah banyak, misalnya pada satu kasus grafik data kependudukan, dapat melakukan filter data berdasarkan provinsi atau kabupaten/kota, dengan menggunakan select2 ini kita tidak perlu capek-capek untuk scroll filternya, kita cukup mengetik di bagian atasnya dari select2 ini saja. oke untuk mendapatkan library select2 ini dapat kita download disini. setelah didownload silahkan extract di folder assets kita rename menjadi select2.

Selanjutnya harus mengimport library tersebut di tampilan kita. silahkan buka file index.php dan tambahkan code untuk load cssnya di bagian head :

<link rel="stylesheet" href="<?= base_url() ?>assets/select2/css/select2.min.css">

dan code js nya dibagian footer

<script src="<?= base_url() ?>assets/select2/js/select2.full.min.js"></script>

Selanjutnya kita akan membuat selectbox untuk filteringnya. disini kita akan menggunakan created_by yang ada di database sebagai filternya. dari code sebelumnya seperti ini

<div class="box-body">
     <div class="init-loading grafik" style="height:600px;width:100%;"></div>
</div>

silahkan tambahkan seperti berikut ini.

<div class="box-body">
     <div class="form-group">
         <label for="">Filter Nama</label>
         <select class="filter_nama" style="width: 150px;">
              <option value=""></option>
              <?php foreach ($nama as $nm) : ?>
                 <option value="<?= $nm->created_by; ?>"><?= $nm->created_by; ?></option>
              <?php endforeach; ?>
         </select>
     </div>
     <div class="init-loading grafik" style="height:600px;width:100%;"></div>
</div>

Untuk saat ini, kita belum bisa menjalankan code diatas karena looping untuk variabel nama yang kita buat masih belum komplit, kita harus menambahkan beberapa script di controllersnya. Nah, sekarang buka file Controllersnya Grafik.php dan kita fokus di function index ubah code yang sebelumnya seperti ini:

public function index()
    {
        $data = [
            'title' => 'Grafik Data',   // Sebagai Title dari halaman
        ];
        $this->load->view('index', $data);
    }

menjadi seperti dibawah ini.

public function index()
    {
        $data = [
            'title' => 'Grafik Data',   // Sebagai Title dari halaman
            'nama' => $this->Grafik_model->get_nama()
        ];
        $this->load->view('index', $data);
    }

Untuk selanjutnya silahkan buka file Grafik_model.php. Tambahkan function get_nama di model, tulis code berikut.

public function get_nama()
    {
        $this->db->select('distinct(created_by)');
        return $this->db->get('tbl_contoh')->result();
    }

Dapat dilihat hasilnya pada tampilan view kita seperti berikut.

Nah selanjutnya kita akan membuat filter selectnya menggunakan select2, Silahkan buka file index.php, fokus kita pada bagian script jsnya. Silahkan tambahkan code berikut di dalam function ready function:

var filtering = {}
$(document).ready(function() {
    $('.filter_nama').select2({
        placeholder: "Pilih Nama",
        allowClear: true,
        theme: "classic"
    });
    filter();
    init();
})

perhatikan code diatas, pada baris pertama adalah deklarasi filtering yang akan kita kirim menggunakan ajax request nantinya. Perhatikan pada bagian ini :

$('.filter_nama').select2({ 
    placeholder: "Pilih Nama", 
    allowClear: true, 
    theme: "classic" 
});

ini merupakan config dari select2 yang kita gunakan. function filter() 

filter();

function yang berjalan secara otomatis nilai default dari filter adalah "", Selanjutnya kita perlu membuat function filter() tersebut. Tambahkan code dibawah ini :

function filter() {
    $('.filter_nama').change(function() {
        filtering['filter_nama'] = $(this).val();
        init()
    })
}

Nah pada code diatas, setiap kali filter dipilih dan berubah, maka akan menjalankan function init(), dan akan ngeload data grafik.

Selanjutnya kita perlu menambahkan beberapa baris di function grafik(), yang sebelumnya seperti ini:

function grafik() {
   $.ajax({
      url: "<?php echo base_url() ?>grafik/data_grafik",
      dataType: "json",
      success: function(data) {
          barChart(data, "grafik");
      }
  })
}

ubah code nya menjadi seperti ini :

function grafik() {
    $.ajax({
       type: "post",
       url: "<?php echo base_url() ?>grafik/data_grafik",
       data: filtering,
       dataType: "json",
       success: function(data) {
           barChart(data, "grafik");
       }
    })
}

Penjelasan dari kode diatas, type data yang kita kirimkan pada ajax adalah post, data filtering adalah sebagai filter data yang kita pilih.

Untuk selanjutnya kita kembali ke file controllers Grafik.php, Kita perlu menambahkan filternya, kali ini kita coba tampung filter yang kita dapat didalam class private. silahkan tambahkan code berikut :

private function filter()
    {
        $filter_nama = $this->input->post('filter_nama');
        if ($filter_nama != '') {
            $filter_nama = ['created_by' => $filter_nama];
        } else {
            $filter_nama = [];
        }
        return ['filter' => $filter_nama];
    }

untuk mengambil data yang dikembalikan di private function ini, silahkan tambahkan code ini difunction data_grafik.

$fd = $this->filter();
$filtering = $fd['filter'];

setelah itu kita perlu menambahkan parameter di function data_grafik(), ubah codenya seperti berikut.

$grafik = $this->Grafik_model->data_grafik($filtering);

Selanjutnya buka file model Grafik_model.php, dan jangan lupa tambahkan parameternya di function data_grafik:

public function data_grafik($filter)

tambahkan code berikut :

$this->db->where($filter);

dan hasilnya seperti ini :

public function data_grafik($filter)
    {
        $this->db->select('count(*) as data, kategori');
        $this->db->from('tbl_contoh');
        $this->db->where($filter);
        $this->db->group_by('kategori');
        return $this->db->get()->result();
    }

Setelah kode tersebut kita ubah, silahkan sobat lihat hasil tampilannya. Keren bukan ??

Oia, untuk menambahkan animasi pada chart kita yang pada part sebelumnya saya kelupaan, silahkan tambahkan code berikut di function barChart() nya ya:

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_kelly);

Hasilnya :

Sekian dulu untuk tutorial kali ini, terimakasih untuk sobat-sobat koding sekalian yang telah mengikuti tutorial ini. Salam Koding ^^

Silahkan download Sourcode nya disini

Untuk part selanjutnya kita akan coba membuat tutorial stacked chart, Nantikan ya.

Tags : Codeigniter Javascript Amchart PHP

Sekilas Tentang Penulis


Heru Late Nugraha,ST
Software Engineer | Fullstack Developer | Founder of Matadeveloper.com



Prev Post
Insert Data Ke Tabel Dengan Store Proced
Next Post
Tutorial Membuat Code Editor Online Sepe