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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s