Cara Membuat grafik Chart pie di Codeigniter

Baca Juga

Sebelum nya saya sudah membuat tutorial  Cara membuat Grafik pada Codeigniter, sekarang saya akan membuat tutorial baru yang berhubungan dengan grafik yakni Cara Membuat grafik Chart pie pada codeigniter. Grafik chart pie ini sangant cocok digunakan untuk statistik data atau persentase data secara visual jadi bisa lebih jelas jumlah data yang didapat. Namun pada tutorial ini saya menggunakan plugin jquery jqwidgets namun metode nya sama mengambil data dari JSON, untuk lebih jelasnya mari kita mulai.

Bahan yang dibutuhkan
           - Framework Codeigniter
           - Plugins  Jqwidgets

1. Buatlah sebuah database lalu buat sebuah tabel ex tb_survey

CREATE TABLE `tb_survey` (
  `id` int(11) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `lulusan` varchar(50) NOT NULL,
  `framework_favorit` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Masukan data yang akan diproses

INSERT INTO `tb_survey` (`id`, `nama`, `lulusan`, `framework_favorit`) VALUES
(1, 'Udin', 'SMK', 'Codeigniter'),
(2, 'Rizki', 'SMK', 'Codeigniter'),
(3, 'Beni', 'S1', 'Laravel'),
(4, 'Toto', 'S1', 'Laravel'),
(5, 'Susi', 'S2', 'Codeigniter'),
(6, 'Irfan', 'SMK', 'Yii'),
(7, 'Cori', 'S1', 'Codeigniter'),
(8, 'Willy', 'S1', 'Zend'),
(9, 'Ubed', 'S1', 'Laravel'),
(10, 'Jajat', 'SMK', 'Codeigniter'),
(11, 'Sherly', 'S1', 'Yii'),
(12, 'Anisa', 'SMK', 'Yii'),
(13, 'Budi', 'S2', 'Zend'),
(14, 'Eva', 'SMK', 'Laravel'),
(15, 'Hamdan', 'S2', 'Codeigniter'),
(16, 'Linda', 'SMK', 'Codeigniter'),
(17, 'Winda', 'SMK', 'Codeigniter');

3. Buatlah sebuah Controllers dan ketikan script berikut

function survey_framework() {    
 foreach($this->Models_anda->hasil_survey()->result_array() as $row)
    { 
  $data[] = array(
   'hasil' => $row['hasil'],
   'total' => $row['total']
          );    
  } 
  echo json_encode($data);  
   }

4. Buatlah sebuah Models dan ketikan script berikut, Jangan lupa untuk load models.

function hasil_survey() {
      $sql = "SELECT framework_favorit AS hasil, COUNT(*) total FROM tb_survey GROUP BY hasil ";
      return $this->db->query($sql);
  }

5. Dan yang terakhir buatlah sebuah Views dan ketikan script berikut.

<div id="chartContainer" style="float: left; height: 400px; width: 100%;">
<script src="&lt;?php echo base_url(); ?&gt;assets/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="&lt;?php echo base_url(); ?&gt;assets/jqwidgets/jqxcore.js" type="text/javascript"></script>
<script src="&lt;?php echo base_url(); ?&gt;assets/jqwidgets/jqxdraw.js" type="text/javascript"></script>
<script src="&lt;?php echo base_url(); ?&gt;assets/jqwidgets/jqxchart.core.js" type="text/javascript"></script>
<script src="&lt;?php echo base_url(); ?&gt;assets/jqwidgets/jqxdata.js" type="text/javascript"></script>        
<script type="text/javascript">
$(document).ready(function () {
// memanggil data array dengan JSON
var source =
     {
         datatype: "json",
         datafields: [
                { name: 'hasil' },
                { name: 'total' }
         ],
         url: '<?php echo base_url() ?>index.php/controller_anda/survey_framework'
     };
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
// pengaturan jqxChart
    var settings = {
        title: "Survey Framework terbaik",
        description: "",
        enableAnimations: true,
        showLegend: true,
        showBorderLine: true,
        legendLayout: { left: 10, top: 160, width: 300, height: 200, flow: 'vertical' },
        padding: { left: 5, top: 5, right: 5, bottom: 5 },
        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
        source: dataAdapter,
        colorScheme: 'scheme03',
        seriesGroups:
           [
            {
              type: 'pie',
              showLabels: true,
              series:
                [
                  { 
                     dataField: 'total',
                     displayText: 'hasil',
                     labelRadius: 170,
                     initialAngle: 15,
                     radius: 145,
                     centerOffset: 0,
                     formatFunction: function (value) {
                                        if (isNaN(value))
                                            return value;
                                            return parseFloat(value);
                                        },
                  }
                ]
             }
           ]
         };
       // Menampilkan Chart
      $('#chartContainer').jqxChart(settings);
   });
</script>    
</div> 

Jika sudah buka browser anda masukan link project chart anda jika benar maka hasilnya akan tampil seperti gambar dibawah ini.

Demo

Semoga bermanfaat