Using Google Chart & CodeIgniter 3

Seorang programmer dalam membuat sebuah sistem, biasanya mendapat tugas untuk membuat sebuah grafik laporan keuangan misalnya. Dan setelah mendapat tugas kebanyakan progammer pemula seperti saya kesulitan untuk menjawab persoalan tersebut dikarenakan plugin chart saat ini kebanyakan sudah berbayar. Nah.. dari persoalan tersebut ada sebuah ide membuat chart yang sederhana yang saya buat dengan Mbah Google yang gratis atau free.

Yuk ikuti langkah berikut:

1. Sebagai contoh buat table

CREATE TABLE IF NOT EXISTS `tbl_pemasukkan` (
  `no_pemasukkan` int(5) NOT NULL,
  `tgl_pemasukkan` datetime NOT NULL,
  `diterima_dari` varchar(20) NOT NULL,
  `jumlah_terima` int(10) NOT NULL,
  `kode_pemasukkan` int(2) NOT NULL,
  `keterangan` varchar(50) NOT NULL,
  `id_transaksi` varchar(25) NOT NULL,
  `id_dp` varchar(11) NOT NULL,
  `deletepemasukkan` enum('N','Y') NOT NULL DEFAULT 'N'
 ) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;

INSERT INTO `tbl_pemasukkan` (`no_pemasukkan`, `tgl_pemasukkan`, `diterima_dari`, `jumlah_terima`, `kode_pemasukkan`, `keterangan`, `id_transaksi`, `id_dp`, `deletepemasukkan`) VALUES
 (1, '2016-01-03 14:19:35', 'AJAT SUDRAJAT', 350000, 2, 'PEMBAYARAN 1', '183720160103021935', '1', 'N'),
 (2, '2016-01-03 14:58:23', 'AJAT SUDRAJAT', 50000, 2, 'PEMBAYARAN 2', '183720160103021935', '2', 'N'),
 (3, '2016-01-03 16:04:05', 'AJAT SUDRAJAT', 400000, 2, 'PEMBAYARAN 3', '183720160103021935', '3', 'N'),
 (4, '2016-01-03 16:59:48', 'OKTO ALHAMDA PUTRA', 600000, 2, 'PEMBAYARAN 1', '183720160103045948', '4', 'N'),
 (5, '2016-01-03 17:25:24', 'OKTO ALHAMDA PUTRA', 50000, 2, 'PEMBAYARAN 1', '183720160103052524', '5', 'N');

2. Buatlah sebuah model pada CodeIgniter

function ambilData(){
 
  $this->db->select('no_pemasukkan');
  $this->db->select('jumlah_terima');
  $this->db->from('tbl_pemasukkan'); 
  $query = $this->db->get();

  return $query->result();

 }

3. Buatlah sebuah kontroller pada CodeIgniter

public function index()
  {
  $this->load->database();
  $this->load->model('m_welcome'); 
  $datagrafik = $this->m_welcome->ambilData();
  $data = array ( 
  'datagrafik' => $datagrafik, 
  ); 

 $this->load->view('welcome_message', $data);
  }

4. Copy script berikut di https://developers.google.com/chart/interactive/docs/gallery/linechart , kemudian paste di view CodeIgniter

<html>
 <head>
  type="text/javascript" src="https://www.google.com/jsapi">
  type="text/javascript">
  google.load('visualization', '1.1', {packages: ['line']});
  google.setOnLoadCallback(drawChart);

 function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

 data.addRows([
  [1,  37.8, 80.8, 41.8],
  [2,  30.9, 69.5, 32.4],
  [3,  25.4,   57, 25.7],
  [4,  11.7, 18.8, 10.5],
  [5,  11.9, 17.6, 10.4],
  [6,   8.8, 13.6,  7.7],
  [7,   7.6, 12.3,  9.6],
  [8,  12.3, 29.2, 10.6],
  [9,  16.9, 42.9, 14.8],
  [10, 12.8, 30.9, 11.6],
  [11,  5.3,  7.9,  4.7],
  [12,  6.6,  8.4,  5.2],
  [13,  4.8,  6.3,  3.6],
  [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
   chart: {
    title: 'Box Office Earnings in First Two Weeks of Opening',
    subtitle: 'in millions of dollars (USD)'
   },
   width: 900,
   height: 500
 };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
 }
 
 </head>
 <body>
 
<id="linechart_material">
 
 </body>
 </html>

 5.  Pada bagian data.AddRows ubah menjadi:

data.addRows(
  <?php
   foreach($datagrafik as $value){
    $resulta[]=array($value->no_pemasukkan, $value->jumlah_terima );
   }
   echo $a=json_encode($resulta, JSON_NUMERIC_CHECK);
 ?>
  );

6. Result, done 😀

chart

Terimakasih
Sumber: https://developers.google.com/chart/interactive/docs/gallery/linechart ;
Sumber: http://php.net/manual/en/function.json-encode.php
Regards,

Okto Alhamda Putra

Advertisements