$type=carousel$cols=3

Membuat Grafik Lingkaran pada CodeIgniter

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:\xampp\htdocs\ci\application\views\tampil_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:\xampp\htdocs\ci\application\controllers\anak.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:\xampp\htdocs\ci\application\models\anak_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

  Follow Blog Orang IT dan jangan lupa Like Fanspage helmykkediri serta jangan lupa klik iklan yang ada di blog ini untuk perawatan admin

COMMENTS

BLOGGER
Nama

Android,3,Blog,350,Info,214,Islami,44,Software,74,Tutorial,120,Web,18,
ltr
item
BLOG ORANG IT 2017: Membuat Grafik Lingkaran pada CodeIgniter
Membuat Grafik Lingkaran pada CodeIgniter
https://3.bp.blogspot.com/-RIvg1y7u_sM/V7mO65OMSoI/AAAAAAAAD74/WFBljdN35MsDJzn-PO_c2lu5XeM4BWG1gCLcB/s400/Capture.PNG
https://3.bp.blogspot.com/-RIvg1y7u_sM/V7mO65OMSoI/AAAAAAAAD74/WFBljdN35MsDJzn-PO_c2lu5XeM4BWG1gCLcB/s72-c/Capture.PNG
BLOG ORANG IT 2017
http://www.helmykkediri.com/2016/09/membuat-grafik-lingkaran-pada_28.html
http://www.helmykkediri.com/
http://www.helmykkediri.com/
http://www.helmykkediri.com/2016/09/membuat-grafik-lingkaran-pada_28.html
true
7204675838149040268
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy