K A N G A M E T

Loading

MEMBUAT GRAFIK LINGKARAN DARI DATABASE MENGGUNAKAN CODEIGNITER

Membuat Grafik Lingkaran pada CodeIgniter

Selamat Datang di Blog ini . Postingan saya sebelumnya mengenai Menampilkan data berdasarkan kategori menggunakan Dropdown pada CodeIgniter selanjutnya tutorial kali ini kita akan belajar membuat dan menampilkan grafik lingkaran yang menggunakan data dari database pada Frameworks Codeigniter menggunakan PHP.

Baca : Fungsi Hapus Data Menggunakan CodeIgniter

Menampilkan grafik pada CodeIgniter memakai memakai data menurut database MysQL bertujuan buat menciptakan statistik data . Tentunya buat memudahkan anda pada mengetahui perbandingan data dari beberapa kategori , karena kita akan menampilkan data dalam bentuk bundar umumnya kita menggunakan perbandingan persentase %

Kata Kunci : Membuat diagram grafik lingkaran dengan codeigniter , menampilkan grafik lingkaran dari database menggunakan codeigniter , membuat diagram lingkaran menggunakan codeigniter dengan php , menampilkan grafik highcart pada codeigniter , membuat diagram grafik menggunakan codeigniter , menampilkan statistik grafik lingkaran dari database menggunakan codeigniter

Oke , langsung saja kita praktekkan bagaimana cara menampilkan Grafik Lingkaran menggunakan data dari database pada frameworks codeigniter memakai skenareo menjadi berikut :

1. Kita akan menggunakan database aps dan tabel aps . Disini kita akan menampilkan data anak putus sekolah berdasarkan alasanya , dari 21 data anak putus sekolah masing-masing memiliki alasan yang berbeda yakni ( Kemiskinan, Bekerja, DO Sekolah, Kasus Pidana, Pribadi )

Membuat Grafik Lingkaran pada CodeIgniter

Alasan

2. Saya asumsikan anda sudah bisa mecah template kedalam Codeigniter ya jika anda menggunakan admin template biasanya sudah ada grafiknya ( lingkaran , batang dll ) dengan data yang masih di inputkan secara manual pada template .

Jika anda menggunakan template bootstrap biasanya untuk menampilkan grafik anda harus menggunakan JS Charts tambahan javascript ( anda bisa mencarinya di google ) saya anggap grafik lingkaran sudah tampil pada template anda.

Download Chart Grafik JS

Saya menggunakan admin template dari Gentela , jika anda mau bisa menDownloadnya pada link berikut ini https://github.com/puikinsh/gentelella

3. Langsung saja jika grafik sudah terinstall langsung menuju step ke 4 , jika anda baru mendownload JS Charts yang saya berikan diatas silahkan di copy-paste ke folder js template anda

kemudian dalam tampilan grafik bulat silahkan diload JS Chartsnya supaya tampil , silahkan menuju

C:xampphtdocsciapplicationviewstampil_grafik.Php

tampil_grafik.Php

// tampilkan grafik lingkaran echart_pie

<h2 align=”center”  class=”style1″ style=”background:#0099FF”><strong>Diagram Penyebab Alasan APS</strong></h2>

<div id=”echart_pie” style=”height:400px;”></div>

// load JS charts

<!– Chart.js –>

<script src=”<?php echo base_url(); ?>JS/Chart.js/dist/Chart.min.js”></script>

<script src=”<?php echo base_url(); ?>JS/echarts/dist/echarts.min.js”></script>

// Desain Grafik

var echartPie = echarts.init(document.getElementById(‘echart_pie’), theme);

echartPie.setOption({

tooltip: {

trigger: ‘item’,

formatter: “{a} <br/>{b} : {c} ({d}%)”

},

legend: {

x: ‘center’,

y: ‘bottom’,

// kategorinya samakan dengan isi database

data: [‘Kemiskinan’, ‘Bekerja’, ‘DO Sekolah’, ‘Kasus Pidana’, ‘Pribadi’]

},

toolbox: {

show: true,

feature: {

magicType: {

show: true,

type: [‘pie’, ‘funnel’],

option: {

funnel: {

x: ‘25%’,

width: ‘50%’,

funnelAlign: ‘left’,

max: 1548

}

}

},

restore: {

show: true,

title: “Restore”

},

saveAsImage: {

show: true,

title: “Save Image”

}

}

},

calculable: true,

series: [{

type: ‘pie’,

radius: ‘55%’,

center: [‘50%’, ‘48%’],

data:

[{

// isinya samakan dengan nama variabel di controller

value: <?php echo $kemiskinan; ?>,

name: ‘Kemiskinan’

}, {

value: <?php echo $bekerja; ?>,

name: ‘Bekerja’

}, {

value: <?php echo $keluar; ?>,

name: ‘DO Sekolah’

}, {

value: <?php echo $kasuspidana; ?>,

name: ‘Kasus Pidana’

}, {

value:<?php echo $pribadi; ?>,

name: ‘Pribadi’

}]

}]

});

var dataStyle = {

normal: {

label: {

show: false

},

labelLine: {

show: false

}

}

};

5. Silahkan menuju Controller C:xampphtdocsciapplicationcontrollersanak.php

public function aps()

{

$data[‘kemiskinan’] = $this->anak_m->kemiskinan();

$data[‘bekerja’] = $this->anak_m->bekerja();

$data[‘pribadi’] = $this->anak_m->pribadi();

$data[‘kasuspidana’] = $this->anak_m->kasuspidana();

$data[‘keluar’] = $this->anak_m>keluar();

$this->load->view(‘tampil_grafik’, $data);

} }

Keterangan :

public function aps()

jika anda bisa memecah template pasti sudah tau untuk memanggil halaman tampil grafik

$data[‘kemiskinan’] = $this->anak_m->kemiskinan();

nama variabel kemiskinan , proses penghitung grafik ada di model anak_m dengan fungsi kemiskinan

$this->load->view(‘tampil_grafik’, $data);

lokasi view grafik

6. Menuju model anak_m, disanaa kita akan memasukkan prosesnya

C:xampphtdocsciapplicationmodelsanak_m

 //diagrammm grafik penyebab aps

function kemiskinan(){

$this->db->where(“alasan =”,”Kemiskinan“);

return $this->db->count_all_results(“aps”);

}

function bekerja(){

$this->db->where(“alasan =”,”Bekerja”);

return $this->db->count_all_results(“aps”);

}

function keluar(){

$this->db->where(“alasan =”,”DO Sekolah”);

return $this->db->count_all_results(“aps”);

}

function kasuspidana(){

$this->db->where(“alasan =”,”Kasus Pidana”);

return $this->db->count_all_results(“aps”);

}

function pribadi(){

$this->db->where(“alasan =”,”Pribadi”);

return $this->db->count_all_results(“aps”);

}

Keterangan:

  function kemiskinan(){

membuat fungsi kemiskinan

  $this->db->where(“alasan =”,”Kemiskinan”);

cari data berdasarkan kolom alasan dengan isi data Kemiskinan / besar kecilnya huruf harus sesuai isi database anda

   return $this->db->count_all_results(“aps”);

hitung semua hasil yang ditemui

7. Selesai selanjutnya anda tinggal memanggil variabel pada view tampilan grafik . Lihat langkah ke dua ( dibaca 2 )

<?php echo $kemiskinan; ?>

8. Test hasilnya jika berhasil nanti akan tampil grafik lingkaranya

Membuat Grafik Lingkaran pada CodeIgniter

Demikian postingan mengenai Cara menampilkan grafik lingkaran dengan data dari database pada codeigniter semoga bermanfaat jika ada yang ingin ditanyakan silahkan saja sekian dan terimakasih . Kunjungi tutorial codeigniter lainya pada label Web makasih

No Comments

Leave a Comment