Membuat grafik atau chart menggunakan codeigniter

Membuat grafik atau chart menggunakan codeigniter

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

Share:




LAINNYA UNTUK ANDA


Komentar (35)

Judin, 28 July 2017 13:51 - Reply

Ilmu yang Agan berikan besar manfaatnya bagi saya...semoga Agan bertambah dan rizkinya

M Fikri, 18 January 2018 06:09 - Reply

Terima kasih atas responnya gan!

Faz, 01 October 2017 23:57 - Reply

sangat memtu......gan kalau mau nampilin mnjd 4 grafik dan 4 tabel gmn gan...??

M Fikri, 18 January 2018 06:10 - Reply

Tinggal bikin satu gan!
1 grafik = 1 table
Total 4 Grafik.

M. Rizki Eka Saputra, 20 December 2017 14:28 - Reply

Makasih gan :)

M Fikri, 18 January 2018 06:10 - Reply

Ya, sama-sama gan,
Terima kasih atas responnya gan!

Iqbal Mahatma Putra, 13 March 2018 08:21 - Reply

Terima kasih banyak gan! Sangat membantu sekali terutama fresh graduate seperti saya

M Fikri, 01 August 2018 17:18 - Reply

Sama-sama mas. :)

setiawan, 02 July 2018 15:46 - Reply

bagaimana jika mau ubah ke diagram pie ya mas?

M Fikri, 01 August 2018 17:18 - Reply

Tinggal ganti Line menjadi Pie mas.!

Rendi, 11 July 2018 13:14 - Reply

Sangat bermanfaat dan setelah saya coba, saya langusng bisa mengaplikasikannya, cuma mau tanya, kalau untuk merubah chartnya menjadi diagram batang gimana yah mas ? terima kasih

M Fikri, 02 August 2018 07:46 - Reply

Tinggal ganti kode ini gan:
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);

NAUFAL, 30 July 2018 15:44 - Reply

sangat bermanfaat kang nuhuunnnn

M Fikri, 01 August 2018 17:15 - Reply

Terima kasih kang.

Ayidhae, 30 July 2018 20:37 - Reply

Kak Cara nampilin grafik batang gimana ya?

M Fikri, 01 August 2018 17:15 - Reply

Tinggal ganti line menjadi bar.

Fitri, 04 August 2018 17:58 - Reply

Sangat membantu, terimakasih mas.

M Fikri, 05 August 2018 06:29 - Reply

Ya, sama-sama Fitri

randika, 07 August 2018 18:26 - Reply

bang, kalau cara ubah jadi diagram batang gimana ya? apakah ada tutorialnya lagi

M Fikri, 06 September 2018 04:45 - Reply

Tinggal ganti kode ini gan:
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);

Awlita Pramayany, 10 August 2018 01:23 - Reply

kalau mau get data yg pake api gimana ka?

reza alvaero, 03 September 2018 11:50 - Reply

kalo saya upload di hosting kok ga muncul ya? tapi kalo di localhost dia mau

M Fikri, 06 September 2018 04:45 - Reply

Coba cek datanya gan!
biasanya kalo datanya kosong, maka akan muncul pesan error.
Agar errornya tidak tampil saat datanya kosong bisa mengunakan perintah: error_reporting(0);

Wulan Dilla Akpa, 05 September 2018 17:51 - Reply

bang gimana ya kalo mau ubah jadi diagram batang gitu?

M Fikri, 06 September 2018 04:46 - Reply

Tinggal ganti kode ini:
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(lineChartData);

Diofani, 10 September 2018 10:59 - Reply

Trimakasih gan sangat membantu saya, oya gan kalo sya mau menambahkan judul misalkan nama barang di bawah nya gimna yaa ?

M Fikri, 07 October 2018 06:41 - Reply

Cek dokumentasi-nya disini gan:
http://www.chartjs.org/docs/latest/configuration/title.html

Rifki Oktafiandri, 15 September 2018 14:25 - Reply

Terima Kasih atas Ilmunya. Sangat Bermanfaat

M Fikri, 07 October 2018 06:40 - Reply

Sama-sama mas.

Anwar, 28 September 2018 14:52 - Reply

Keren gan tutorial nya, oya gan waktu saya mau ubah jadi pie chart kok chart nya malah ilang ya? var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Pie(lineChartData); mohon pencerahan mastah ^_^

M Fikri, 07 October 2018 06:40 - Reply

Check aja dokumentasinya disini mas:
http://www.chartjs.org/docs/latest/charts/doughnut.html

markRonald, 08 October 2018 10:44 - Reply

I want to display total 3 graphs.There is just one graph.How can i add 2 more graphs.

alfan, 13 November 2018 16:24 - Reply

terimakasih sudah berbagi ilmu gan,, penjelasan lengkap, mudah dimengerti, semoga tidak berhenti berbagi ilmu nya gan,, sehat dan sukses terus,,!!

M Fikri, 21 November 2018 11:10 - Reply

Sama-sama gan,
terima kasih kembali

abu qilabah, 13 February 2019 09:13 - Reply

ijin download..

Leave a Comment