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:



Komentar (20)

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

Awlita Pramayany, 10 August 2018 01:23 - Reply

kalau mau get data yg pake api gimana ka?

Leave a Comment