Tutorial Codeigniter 3 Membuat Grafik Dengan Chart Js

Create Chart-JS With CodeIgniter 3

Tutorial CodeIgniter kali ini kita akan membuat Chart Js dengan PHP Codeigniter 3. Silahkan Ikuti langkah-langkah tutorial dibawah ini.

1. Controller
Langkah 1. Buat file controller dengan nama c_chart.php Selanjutnya Kopi file controller dibawah ini :

  
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class C_chart extends CI_Controller {

  public function index()
  {
    $data['title'] = "chart mahasiswa";
    $this->load->view('chart/v_chart', $data);
  }

  public function getData()
  {
    $respon->cols[] = array(
      "label" => "Angkatan",
      "type"  => "string"
    );

    $respon->cols[] = array(
      "label" => "Jumlah",
      "type"  => "number"
    );

    $this->load->model('m_chart');
    $data = $this->m_chart->m_datachart();

    foreach ($data as $row) 
    {
      $respon->rows[]['c'] = array(
        array(
          "v"=>$row->name_angkatan
        ),
        array(
          "v"=>(int)$row->jumlah
        )
      );
    }
    echo json_encode($respon);
  }

}

/* End of file c_chart.php */
/* Location: ./application/controllers/c_chart.php */

2. File Model
Langkah 2. Silahkan buat File Model dengan nama file M_chart.php selanjutnya kopi kode model dibawah ini :

  
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class M_chart extends CI_Model {

  public function m_datachart()
  {
    $query = "SELECT b.name_angkatan, count(a.angkatan_id) as jumlah from tb_mahasiswa a
    left join tb_angkatan b ON a.angkatan_id=b.id group by a.angkatan_id order by b.name_angkatan asc";
    return $this->db->query($query)->result();
  }

}

/* End of file m_chart.php */
/* Location: ./application/models/m_chart.php */

3. File View
Langkah 3. Selanjutnya Anda buat sebuah folder chart dan buat file didalamnya dengan nama file v_chart.php Jadi setelah dibuat folder dan file akan seperti ini struktur foldernya chart/v_chart.php Dan anda tinggal pastekan kode berikut :

  
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?php echo $title; ?></title>
  <link rel="stylesheet" href="">
  <style>
    body{
      margin-top:200px;
    }
  </style>
</head>
<body>
  
  <div id="chart_div"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
  google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var jsonData = $.ajax({
    url: "<?php echo site_url('c_chart/getData') ?>",
    dataType: "json",
    async:false
  }).responseText;

      var data = new google.visualization.DataTable(jsonData);
      var options = {
        title: 'Statistik Mahasiswa Perangkatan',
        focusTarget: 'category',
        hAxis: {
          title: 'Angkatan',
          format: 'h:mm a',
          viewWindow: {
            min: [7, 30, 0],
            max: [17, 30, 0]
          },
          textStyle: {
            fontSize: 14,
            color: '#053061',
            bold: true,
            italic: false
          },
          titleTextStyle: {
            fontSize: 18,
            color: '#053061',
            bold: true,
            italic: false
          }
        },
        vAxis: {
          title: 'Rating (scale of 1-10)',
          textStyle: {
            fontSize: 18,
            color: '#67001f',
            bold: false,
            italic: false
          },
          titleTextStyle: {
            fontSize: 18,
            color: '#67001f',
            bold: true,
            italic: false
          }
        }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</body>
</html>