Hello sahabat programmer, gimana kabarnya?. Semoga sehat selalu ya..!

Pada kesempatan kali ini saya ingin share tentang bagaimana membuat chart atau grafik menggunakan framework codeigniter. Grafik atau chart merupakan penyajian informasi dengan cara yang sangat menarik dan mudah dipahami dari pada melihat report (laporan) yang memiliki teks yang kompleks dan terkadang membosankan.

 

Chart atau grafik juga membantu mempermudah dalam memantau progress suatu bisnis. Seperti peningkatan penjualan, trafik pengunjung suatu website, dan lain sebagainya.

 

Untuk membuat chart atau grafik menggunakan codeigniter, kita memerlukan semacam library atau plugin. Disini penulis menggunakan chart.js.

 

Chart.js merupakan library javascript yang sangat banyak digunakan oleh developer web dalam mebuat grafik atau chart. Chart.js sangat mudah digunakan dan mudah di cutomize.

 

Ok, mari kita mulai pembuatannya!

Pada kesempatan kali ini, saya mengangkat studi kasus untuk memantau stok barang berdasarkan merk atau brand.

Sebelum masuk ke proses pembuatan ada beberapa hal yang harus dipersiapkan yaitu codeigniter dan chart.js.

 

Jika anda belum memiliki file codeigniter dan chart.js, silahkan download terlebih dahulu! Hehee..

 

Ok, sekarang kita masuk ke proses coding!

1. Buat database dan tabel dengan mengeksekusi query berikut:

CREATE DATABASE db_chart;
USE db_chart;

CREATE TABLE barang(
barang_id INT PRIMARY KEY AUTO_INCREMENT,
nama_barang VARCHAR(100),
merk VARCHAR(30),
stok INT
)ENGINE=INNODB;

 

2. Insert beberapa data dengan mengeksekusi query berikut:

INSERT INTO barang(nama_barang,merk,stok) VALUES 
('Aqua 1','Aqua',20),
('Aqua 2','Aqua',10),
('Aqua 3','Aqua',30),
('Aqua 4','Aqua',40),
('Aqua 5','Aqua',5),
('Wardah 1','Wardah',10),
('Wardah 2','Wardah',20),
('Wardah 3','Wardah',10),
('Wardah 4','Wardah',50),
('Inez 1','Inez',10),
('Inez 2','Inez',30),
('VIva 1','Viva',30),
('Coca-Cola 1','Coca-cola',10),
('Coca-Cola 2','Coca-cola',10),
('Coca-Cola 3','Coca-cola',30);

3. Instalasi codeigniter

Extract codeigniter ke folder webserver anda. Extract ke folder www jika anda menggunakan wampserver, extract ke folder htdocs jika anda menggunakan xampp.

Setelah di-extract, rename (ganti nama) menjadi ci_chart. Kemudian lakukan konfigurasi berikut:

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_chart/';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_chart',
        'dbdriver' => 'mysqli',
        'dbprefix' => '',
        'pconnect' => FALSE,
        'db_debug' => (ENVIRONMENT !== 'production'),
        'cache_on' => FALSE,
        'cachedir' => '',
        'char_set' => 'utf8',
        'dbcollat' => 'utf8_general_ci',
        'swap_pre' => '',
        'encrypt' => FALSE,
        'compress' => FALSE,
        'stricton' => FALSE,
        'failover' => array(),
        'save_queries' => TRUE
);

 

4. Buat folder dengan nama assets sejajar dengan folder application dan system. Kemudian extract file chartjs master kedalam folder assets. Sehingga terlihat struktur folder kita seperti berikut:

application

assets

   Chartjs

      Chart.min.js

system

 

5. Buat model dengan nama M_grafik.php dengan kode sebagai berikut:

<?php
class M_grafik extends CI_Model{

        function get_data_stok(){
        $query = $this->db->query("SELECT merk,SUM(stok) AS stok FROM barang GROUP BY merk");
         
        if($query->num_rows() > 0){
            foreach($query->result() as $data){
                $hasil[] = $data;
            }
            return $hasil;
        }
    }

}

 

6. Buat controller dengan nama Grafik.php dengan kode sebagai berikut:

<?php
class Grafik extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('m_grafik');
        }
        function index(){
                $x['data']=$this->m_grafik->get_data_stok();
                $this->load->view('v_grafik',$x);
        }
}

 

7. Buat view dengan nama v_grafik.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
<head>
        <title>Grafik Stok Barang</title>

        <?php
        foreach($data as $data){
            $merk[] = $data->merk;
            $stok[] = (float) $data->stok;
        }
    ?>
</head>
<body>

        <canvas id="canvas" width="1000" height="280"></canvas>

        <!--Load chart js-->
        <script type="text/javascript" src="<?php echo base_url().'assets/chartjs/chart.min.js'?>"></script>
        <script>

            var lineChartData = {
                labels : <?php echo json_encode($merk);?>,
                datasets : [
                    
                    {
                        fillColor: "rgba(60,141,188,0.9)",
                        strokeColor: "rgba(60,141,188,0.8)",
                        pointColor: "#3b8bba",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(152,235,239,1)",
                        data : <?php echo json_encode($stok);?>
                    }

                ]
                
            }

        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
        
        </script>
</body>
</html>

 

8. Kunjungi URL berikut untuk mengecek aplikasi nya berjalan dengan baik.

http://localhost/ci_chart/index.php/grafik

 

Ok, sekian tutorial kali ini. Jika anda merasa tutorial ini bermanfaat untuk anda, silahkan share siapa tau tutorial ini bermaanfaat untuk teman Anda!

Download Source