Kelasprogrammer.com – Melanjutkan seri belajar CodeIgniter, kali ini kita akan belajar cara membuat grafik di codeigniter. Grafik yang kita buat menggunakan plugin yang disediakan dari chart.js. Sebenarnya sudah saya buat artikel lawas mengenai hal ini pada beberapa hari yang lalu namun versi sebelumnya masih menggunakan PHP native. Nah! kali ini kita akan coba implementasikan kedalam penggunaanya kedalam framework codeigniter.
Sebelum melanjutkan tutorial dibawah WAJIB buat teman-teman untuk membaca dulu artikel mengenai cara membuat grafik di php. Karena saya hanya melanjutkan saja tanpa harus menulis lagi tutorial dari awal. Untuk pembuatan database dan tabelnya serta mendownload plugin chart.js bisa kalian lihat pada postingan tersebut.
Daftar Isi
Konfigurasi Database
Setelah kalian mendownload plugin chart.js sekarang kita konfigurasi dulu ya databasenya untuk itu silahkan lihat pada artikel cara membuat grafik di php karena database yang kita gunakan masih tetap sama.
Konfigurasi Dasar CodeIgniter
Lakukan konfigurasi dasar pada beberapa file didalam folder config seperti pada file autoload.php, config.php, database.php dan routers.php.
Kalian bisa membacanya pada artikel berikut:
Apabila konfigurasi dasar sudah kalian buat, bisa lanjut saja ke langkah selanjutnya
Konfigurasi Pada MVC CodeIgniter
1. Model
<?php
Class Model_mahasiswa extends CI_Model
{
function Jum_mahasiswa_perjurusan()
{
$this->db->group_by('jurusan');
$this->db->select('jurusan');
$this->db->select("count(*) as total");
return $this->db->from('mahasiswa')
->get()
->result();
}
}
?>Pada bagian model disini saya membuat function Jum_mahasiswa_perjurusan() fungsinya untuk mengambil nilai agregat dari jumlah mahasiswa per jurusan. Perintah active record diatas sama saja dengan perintah sql dibawah ini:
SELECT jurusan,COUNT(*) as 'total' FROM mahasiswa GROUP BY jurusan
Dari data tersebut selanjutnya akan kita buatkan dalam bentuk grafik. Sekarang kita lanjut pada bagian view.
2. View
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Grafik dengan CodeIgniter dengan Chart.js</title>
<!-- Load file plugin Chart.js -->
<script src="<?php echo base_url()?>/assets/chart/Chart.js"></script>
</head>
<body>
<br>
<h4>Cara Membuat Grafik dengan CodeIgniter dengan Chart.js</h4>
<canvas id="myChart"></canvas>
<?php
//Inisialisasi nilai variabel awal
$nama_jurusan= "";
$jumlah=null;
foreach ($hasil as $item)
{
$jur=$item->jurusan;
$nama_jurusan .= "'$jur'". ", ";
$jum=$item->total;
$jumlah .= "$jum". ", ";
}
?>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
// The data for our dataset
data: {
labels: [<?php echo $nama_jurusan; ?>],
datasets: [{
label:'Data Jurusan Mahasiswa ',
backgroundColor: ['rgb(255, 99, 132)', 'rgba(56, 86, 255, 0.87)', 'rgb(60, 179, 113)','rgb(175, 238, 239)'],
borderColor: ['rgb(255, 99, 132)'],
data: [<?php echo $jumlah; ?>]
}]
},
// Configuration options go here
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>Dibagian view kita menampilkan grafiknya dengan plugin chart.js. Plugin tersebut saya load di bagian <head>.
<script src="<?php echo base_url()?>/assets/chart/Chart.js"></script>Plugin chart.js saya simpan didalam folder assets/chart/ sesuaikan path nya sesuai dengan direktori yang kalian taru file Chart.js nya.
Plugin akan ditampilkan pada bagian <canvas id=”myChart”></canvas>.
Tag <canvas> merupakan tag yang baru diperkenalkan pada html versi ke 5, fungsinya untuk membuat gambar grafik.
Chart yang kita gunakan disini adalah bar chart, bila ingin mengganti dengan jenis chart lain ganti nilai atribut type. Data jurusan akan ditampilkan menjadi label pada grafik tersebut. Untuk datanya sendiri nilainya di isi pada atribut data.
3. Controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Mahasiswa extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->model('model_mahasiswa');
}
function index()
{
$data['hasil']=$this->model_mahasiswa->Jum_mahasiswa_perjurusan();
$this->load->view('v_mahasiswa',$data);
}
}
?>
Pada bagian controller kita hanya membuat 2 fungsi saja, yang pertama fungsi construct() untuk inisialisasi model mahasiswa.
Fungsi utamanya sendiri adalah fungsi index dengan mengambil data dari function Jum_mahasiswa_perjurusan() dan disimpan pada variabel data dalam bentuk array, data tersebut kemudian di parsing ke view v_mahasiswa.
Hasil Grafik dengan Codeigniter
Bila kalian mengikuti langkah-langkah yang dijabarkan diatas maka hasilnya akan seperti gambar berikut:
Kesimpulan
Membuat grafik di codeigniter sangatlah mudah, yang diperlukan hanyalah plugin dari chart.js yang dapat didownload secara gratis (bersifat open source). Selain itu kita juga bisa membuat jenis/bentuk grafik yang lain dengan mudah. Untuk lebih lengkapnya baca pada situs resmi chart.js. Silahkan komentar dibawah ini apabila kalian ada pertanyaan.
jjjjjjjjjjjjjjjj
aku udah coba semua yang ditutor, tapi kenapa yang muncul di diagram cuma satu jurusan ya? padahal udah sama semua 🙁
untuk databasenya di samakan dengan tutorial di artikel https://kelasprogrammer.com/membuat-grafik-php/
waaahh berhasil, terima kasih