Membuat Grafik Lingkaran pada CodeIgniter

by

helmy

MEMBUAT GRAFIK LINGKARAN DARI DATABASE MENGGUNAKAN CODEIGNITER

Membuat Grafik Lingkaran pada CodeIgniter

Selamat Datang di Blog Orang IT . 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. 
Menampilkan grafik pada CodeIgniter dengan menggunakan data dari database MysQL bertujuan untuk membuat statistik data . Tentunya untuk memudahkan anda dalam mengetahui perbandingan data dari beberapa kategori , karena kita akan menampilkan data dalam bentuk lingkaran biasanya 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 dengan data dari database pada frameworks codeigniter dengan skenareo sebagai 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.

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

lalu pada tampilan grafik lingkaran silahkan diload JS Chartsnya agar 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

Related Post