Membuat Grafik Di codeigniter

Baca Juga

 

Sekarang saya akan membuat postingan membuat chart statistik visitor dengan menggunakan framework Codeigniter dan library highcharts, pastinya para developer web sering mendapatkan  project untuk membuat grafik untuk membuat laporan tahunan, bulanan atau harian agar bisa mentracking data, setelah saya cari kemana-mana ternyata ada yang mudah nih, yang pasti ada kemauan dan selalu usaha pasti ada jalan keluar. 

Pertama yang pasti siapkan framework codeigniter yang sudah di atur confignya, dan download library highcharts, jangan lupa databasenya, kalo sudah siap yuk kita mulai:

• Codeigniter

• library highcharts

untuk memudahkan saya akan kasih contoh table database nya, disini saya membuat database dengan nama grafik dengan tabel tbcounter;

CREATE TABLE IF NOT EXISTS `tbcounter` (
  `ip` varchar(2050) NOT NULL,
  `date` date NOT NULL,
  `hits` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `tbcounter` (`ip`, `date`, `hits`) VALUES
('10.88.25.1', '2016-01-16', 11),
('10.88.25.2', '2016-01-16', 3),
('10.88.25.3', '2016-01-17', 4),
('10.88.25.4', '2016-01-16', 11),
('10.88.25.5', '2016-02-16', 3),
('10.88.25.6', '2016-02-17', 4),
('10.88.25.10', '2016-02-23', 2),
('10.88.25.15', '2016-02-23', 1),
('10.88.25.13', '2016-03-16', 11),
('10.88.25.1', '2016-03-16', 3),
('10.88.25.5', '2016-03-17', 4),
('10.88.25.8', '2016-03-16', 11),
('10.88.25.10', '2016-03-16', 3),
('10.88.25.19', '2016-03-17', 4),
('10.88.25.27', '2016-04-23', 2),
('10.88.25.50', '2016-04-23', 1),
('10.88.25.6', '2016-04-16', 3),
('10.88.25.9', '2016-05-17', 4),
('10.88.25.11', '2016-05-23', 2),
('10.88.25.12', '2016-05-23', 1),
('10.88.25.16', '2016-05-16', 11),
('10.88.25.20', '2016-05-16', 3),
('10.88.25.32', '2016-06-17', 4),
('10.88.25.1', '2016-06-16', 11),
('10.88.25.35', '2016-06-16', 3),
('10.88.25.36', '2016-07-17', 4),
('10.88.25.26', '2016-07-23', 2),
('10.88.25.6', '2016-07-16', 3),
('10.88.25.9', '2016-08-17', 4),
('10.88.25.11', '2016-08-23', 2),
('10.88.25.12', '2016-08-23', 1),
('10.88.25.16', '2016-08-16', 11),
('10.88.25.20', '2016-08-6', 3),
('10.88.25.32', '2016-09-17', 4),
('10.88.25.1', '2016-09-16', 11),
('10.88.25.35', '2016-09-16', 3),
('10.88.25.36', '2016-09-17', 4),
('10.88.25.26', '2016-09-23', 2),
('10.88.25.16', '2016-10-16', 11),
('10.88.25.20', '2016-10-16', 3),
('10.88.25.32', '2016-10-17', 4),
('10.88.25.1', '2016-10-16', 11),
('10.88.25.35', '2016-11-16', 3),
('10.88.25.36', '2016-11-17', 4),
('10.88.25.26', '2016-11-23', 2),
('10.88.25.15', '2016-11-23', 1),
('10.88.25.13', '2016-12-16', 11),
('10.88.25.1', '2016-12-16', 3),
('10.88.25.5', '2016-12-17', 4),
('10.88.25.8', '2016-12-16', 11),
('10.88.25.10', '2016-12-16', 3),
('10.88.25.19', '2016-12-17', 4),
('10.88.25.27', '2016-12-23', 2),
('10.88.25.50', '2016-12-23', 1),
('10.88.25.6', '2016-12-16', 3),
('10.88.25.9', '2016-12-17', 4),
('10.88.25.11', '2016-12-23', 2),
('10.88.25.12', '2016-12-23', 1),
('10.88.25.20', '2016-12-25', 1);

kita buat control dengan nama control_grafik.php

class control_grafik extends CI_Controller {
 public function index() {  
   
   foreach($this->model_grafik->statistik_pengunjung()->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('view_grafik', $data); 
 }

selanjutnya kita buat model dengan nama model_grafik.php

class Model_grafik extends CI_Model{
   function statistik_pengunjung()
 {
  
  $sql= $this->db->query("
  
  select
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=1)AND (YEAR(date)=2016))),0) AS `Januari`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=2)AND (YEAR(date)=2016))),0) AS `Februari`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=3)AND (YEAR(date)=2016))),0) AS `Maret`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=4)AND (YEAR(date)=2016))),0) AS `April`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=5)AND (YEAR(date)=2016))),0) AS `Mei`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=6)AND (YEAR(date)=2016))),0) AS `Juni`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=7)AND (YEAR(date)=2016))),0) AS `Juli`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=8)AND (YEAR(date)=2016))),0) AS `Agustus`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=9)AND (YEAR(date)=2016))),0) AS `September`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=10)AND (YEAR(date)=2016))),0) AS `Oktober`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=11)AND (YEAR(date)=2016))),0) AS `November`,
  ifnull((SELECT count(ip) FROM (tbcounter)WHERE((Month(date)=12)AND (YEAR(date)=2016))),0) AS `Desember`
 from tbcounter GROUP BY YEAR(date) 
  
  ");
  
  return $sql;
  
 } 
}

dan yang terakhir kita membuat view dengan nama view_grafik.php

<style>
 #chart{
   z-index:-10;} 
</style>
<body>
 <div id="chart">
</div>
<script src="&lt;?php echo base_url();?&gt;asset/highcharts/jquery.min.js" type="text/javascript"></script>
<script src="&lt;?php echo base_url();?&gt;asset/highcharts/highcharts.js" type="text/javascript"></script>
<script src="&lt;?php echo base_url();?&gt;asset/highcharts/modules/exporting.js" type="text/javascript"></script>
<script src="&lt;?php echo base_url();?&gt;asset/highcharts/modules/offline-exporting.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
 new Highcharts.Chart({
  chart: {
   renderTo: 'chart',
   type: 'line',
  },
  title: {
   text: 'Grafik Statistik pengunjung',
   x: -20
  },
  subtitle: {
   text: 'Count visitor',
   x: -20
  },
  xAxis: {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
                    'Jul', 'Ags', 'Sep', 'Okt', 'Nov', 'Des']
  },
  yAxis: {
   title: {
    text: 'Total pengunjung'
   }
  },
  series: [{
   name: 'Data dalam Bulan',
   data: <?php echo json_encode($grafik); ?>
  }]
 });
}); 
</script>
</body>

Nah setelah tahap diatas selesai silahkan tinggal running dilocalhost...hasilnya akan seperti dibawah ini...Tarataratatttaaaaaa...!!!!

selain itu tampilan juga bisa dieksport ke format .png dan .svg. untuk mempercantik bisa menambahkan themes dengan menambakan script

selain grafik model line basic anda juga bisa mengeksplor lagi grafik dengan model yang lain untuk lebih lanjut kunjungi highcharts.com, sekian postingan hari ini semoga bermanfaat untuk semuanya..

Demo

Semoga bermanfaat.