Membuat Grafik atau chart Menggunakan Codeigniter dan Highchart

Pada kesempatan kali ini kita akan membahas mengenai pembuatan grafik menggunakan codeigniter menggunakan framework php dan highchart sebagai library untuk membuat grafik.

Grafik dengan codeigniter dan highchart

Pembuatan Grafik atau chart ini mencakup laporan bulanan pendapatan dalam periode tahun namun data yang digunakan hanya data dummy atau data contoh saja.

Berikut ini adalah framework codeigniter yang saya gunakan :

Link :

http://www.4shared.com/zip/FY_5PL9oce/CodeIgniter_200.html

Dan library highchart yang digunakan pada library ini sudah include library jquery :

http://www.4shared.com/zip/Wz9L8KOdba/highcharts.html

Pertamatama buat database pada contoh ini 'tutor_grafik'(tanpa quote).
Setelah itu buat table misalkan namanya adalah tabel  ‘pendapatan’(tanpa quote) ,sehingga query sbb :

CREATE TABLE IF NOT EXISTS `pendapatan` (

`id` int(11) NOT NULL AUTO_INCREMENT,
  `tgl` date NOT NULL,
  `jumlah` double NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Setelah itu input beberapa data , berikut ini merupakan data dummy yang diinputkan pada table pendapatan :

INSERT INTO `pendapatan` (`id`, `tgl`, `jumlah`) VALUES
(1, '2014-01-02', 30000),
(2, '2014-02-04', 40000),
(3, '2014-03-06', 25000),
(4, '2014-04-10', 50000),
(5, '2014-06-10', 60000),
(6, '2014-07-11', 40000),
(7, '2014-08-10', 45000),
(8, '2014-09-09', 70000),
(9, '2014-10-10', 60000),
(10, '2014-11-18', 55000),
(11, '2014-05-05', 10000),
(12, '2014-05-13', 35000),
(13, '2014-12-09', 40000),
(14, '2014-12-02', 25000);

Dari data yang input diatas bisa kita liha pada id ke 11 dan 12, 13  dan 14 data tersebut pada bulan yang sama namun nanti kita akan dijumlahkan nilainya berdasarkan bulan.

Setelah persiapan database selesai ,selanjutnya kita akan membuat file pada codeigniter. Pada htdocs jika menggunakan xampp kita buat folder 'tutor' (tanpa quote). Setelah itu pindahkan file didalam codeigniter ke folder tersebut dan pindahkan library highchart yang didownload ke folder asset(buat terlebih dahulu) disimpan diluar setara dengan folder application sehingga tampilanya adalah sbb :

Struktur Folder Codeigniter

Setelah itu kita masuk ke folder config lalu kita rubah setingan file config.php pada base_url yang dirubah adalah :

$config['base_url'] = 'http://localhost/tutor/';

Rubah juga setingan database nya pada file database.php settingan saya adalah sbb :

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'tutor_grafik';
$db['default']['dbdriver'] = 'mysql';
$db['default']['dbprefix'] = '';
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = '';
$db['default']['char_set'] = 'utf8';
$db['default']['dbcollat'] = 'utf8_general_ci';
$db['default']['swap_pre'] = '';
$db['default']['autoinit'] = TRUE;
$db['default']['stricton'] = FALSE;

Setelah selesai setting config yang diperlukan selanjutya kita akan membuat file controller beri nama c_grafik.php pada file controller.

c_grafik :

<?php

class c_grafik extends CI_Controller {
 /**
  * @author : Mahesa p Kannygara
  **/
 function __construct()
 {
  parent::__construct(); 
  $this->load->model('m_chart','',TRUE);
  $this->load->database();
  $this->load->helper('url');
 }
 
 public function index()
 {
  foreach($this->m_chart->laporanTahunan()->result_array() as $row)
  {
   $data['grafik'][]=(float)$row['Januari'];
   $data['grafik'][]=(float)$row['Februari'];
   $data['grafik'][]=(float)$row['Maret'];
   $data['grafik'][]=(float)$row['April'];
   $data['grafik'][]=(float)$row['Mei'];
   $data['grafik'][]=(float)$row['Juni'];
   $data['grafik'][]=(float)$row['Juli'];
   $data['grafik'][]=(float)$row['Agustus'];
   $data['grafik'][]=(float)$row['September'];
   $data['grafik'][]=(float)$row['Oktober'];
   $data['grafik'][]=(float)$row['November'];
   $data['grafik'][]=(float)$row['Desember'];
  }
  $this->load->view('v_grafik',$data);
 }
}

Function index berfungsi untuk memanggil data yang ada di model (nanti kita akan mebuat file modelnya) yang mana nanti akan memberikan nilai bulanan dari januari s/d desember. Mengapa float pada : $data['grafik'][]=(float)$row['Januari'],dst. Karena tipe data yang akan di return nilainya bisa miliaran sehingga float digunakan jika datanya kecil int cocok digunakan.  $data['grafik'][] akan diparsing ke view yang nantinya berupa data nilai yang akan dirubah ke dalam bentuk grafik.

Setalah file controller terbuat langkah selanjutnya adalah membuat model kita beri nama m_chart.
m_chart:

<?php
class m_chart extends Ci_Model{
 
 function laporanTahunan()
 {
  
  $bc = $this->db->query("
  
  select
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=1)AND (YEAR(tgl)=2014))),0) AS `Januari`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=2)AND (YEAR(tgl)=2014))),0) AS `Februari`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=3)AND (YEAR(tgl)=2014))),0) AS `Maret`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=4)AND (YEAR(tgl)=2014))),0) AS `April`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=5)AND (YEAR(tgl)=2014))),0) AS `Mei`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=6)AND (YEAR(tgl)=2014))),0) AS `Juni`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=7)AND (YEAR(tgl)=2014))),0) AS `Juli`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=8)AND (YEAR(tgl)=2014))),0) AS `Agustus`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=9)AND (YEAR(tgl)=2014))),0) AS `September`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=10)AND (YEAR(tgl)=2014))),0) AS `Oktober`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=11)AND (YEAR(tgl)=2014))),0) AS `November`,
  ifnull((SELECT sum(jumlah) FROM (pendapatan)WHERE((Month(tgl)=12)AND (YEAR(tgl)=2014))),0) AS `Desember`
 from pendapatan GROUP BY YEAR(tgl) 
  
  ");
  
  return $bc;
  
 }
 
 
}
?>

Penjelasan mengenai model diatas, query tersebut akan menghasilkan nilai berdasarkan bulan dari januari s/d desember dengan menjumlahkan total nilai tiap bulanya.

Langkah selanjutnya adalah membuat view  kita beri nama v_grafik,
v_grafik.php :

<style>
  #chart
  {
   z-index:-10;
  }
  
</style>

 
 <div id="chart">
</div>

Semua file yang diperlukan sudah dibuat maka selanjutnya kita eksekusi , masukan alamat url : http://localhost/tutor/index.php/c_grafik

maka tampilanya akan seperti berikut :

Grafik Dengan Highchart dan Codeigniter

Berikut dilampirkan file-file dari pembuatan grafik/chart dengan codeigniter dan highchart 
http://www.4shared.com/zip/kYkex_FQba/tutor.html

Silahkan kometar jika ada pertanyaan atau hal yang ingin di diskusikan.