 |
| Membuat Grafik atau Chart dengan Codeigniter |
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, 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');Buka application/config/config.php dan atur menjadi seperti berikut:
$autoload['helper'] = array('url');
$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 Code
EmoticonEmoticon