Menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts

16 September 2018 | Tags: , , ,


Pada artikel ini saya akan membahas cara menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts. Pembaca yang terbiasa main SAHAM atau FOREX mungkin sudah tidak asing lagi dengan istilah CandleStick. Sebelum memutuskan untuk melakukan transaksi di bursa, Candlestick biasanya dijadikan salah satu rujukan untuk proses BUY atau SELL oleh TRADER.
Cara menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts

Setiap Candlestick mengandung informasi harga pembukaan (Open), harga tertinggi (High), harga terendah (Low), dan harga penutupan (Close) atau biasa dikenal dengan istilah OHLC. Anatomi dari Candlestick bisa dilihat seperti gambar berikut ini:

Gambar Candlestick: Cara menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts

PRASYARAT
Sebelum memulai materi ini, saya mengasumsikan anda sudah menguasai:

  1. CodeIgniter (Menggunakan database MySQL)
  2. Cara menggunakan Echarts, jika belum silahkan buka artikel Cara Membuat Grafik Dengan CodeIgniter dan Echarts
  3. Cara menyajikan candlestick sederhana dengan Echarts. Anda bisa melihat contohnya di: https://ecomfe.github.io/echarts-examples/public/editor.html?c=candlestick-simple
    Perhatikan data pada xAxis untuk menyusun tanggal, dan data pada yAxis untuk menyusun candlestick. Nantinya kita akan membuat data tersebut dari database MySql.

Langkah-Langkah cara menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts

Pada materi ini grafik Candlestick datanya kita simpan pada MySQL bukan mengambil langsung dari bursa efek.

Langkah 1- Buat database

Buat database dengan nama: saham (nama lain juga bisa). Selanjutnya kita akan membuat 2 (dua) buah table dengan nama:

  1. tbl_stock untuk menyimpan Emiten (perusahaan yang menerbitkan saham)
  2. tbl_history untuk menyimpan histori harga saham pada periode tertentu (pada contoh ini harian)

Struktur dan data table tbl_stock

CREATE TABLE `tbl_stock` (
  `id` char(4) NOT NULL,
  `nama` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

insert  into `tbl_stock`(`id`,`nama`) values ('ANTM','PT Aneka Tambang Tbk'),('BBRI','PT Bank Rakyat Indonesia (Persero) Tbk'),('BBTN','PT Bank Tabungan Negara (Persero) Tbk'),('TLKM','PT Telekomunikasi Indonesia Tbk ');

Struktur dan data table tbl_history

CREATE TABLE `tbl_history` (
  `stock_id` char(4) DEFAULT NULL,
  `tanggal` date DEFAULT NULL,
  `open` int(10) DEFAULT NULL,
  `high` int(10) DEFAULT NULL,
  `low` int(10) DEFAULT NULL,
  `close` int(10) DEFAULT NULL,
  UNIQUE KEY `UNIK` (`stock_id`,`tanggal`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

insert  into `tbl_history`(`stock_id`,`tanggal`,`open`,`high`,`low`,`close`) values ('TLKM','2018-08-01',3570,3600,3500,3550),('TLKM','2018-08-02',3550,3590,3450,3500),('TLKM','2018-08-03',3480,3490,3430,3460),('TLKM','2018-08-06',3480,3670,3480,3650),('TLKM','2018-08-07',3650,3670,3570,3580),('TLKM','2018-08-08',3600,3600,3520,3550),('TLKM','2018-08-09',3520,3550,3490,3490),('TLKM','2018-08-10',3510,3540,3480,3500),('TLKM','2018-08-13',3440,3450,3360,3370),('TLKM','2018-08-14',3360,3440,3330,3350),('TLKM','2018-08-15',3350,3450,3310,3430),('TLKM','2018-08-16',3390,3430,3350,3350),('TLKM','2018-08-17',3350,3350,3350,3350),('TLKM','2018-08-20',3420,3450,3370,3390),('TLKM','2018-08-21',3400,3440,3350,3350),('TLKM','2018-08-22',3350,3350,3350,3350),('TLKM','2018-08-23',3390,3390,3290,3300),('TLKM','2018-08-24',3290,3340,3270,3290),('TLKM','2018-08-27',3330,3480,3310,3460),('TLKM','2018-08-28',3480,3600,3480,3580),('TLKM','2018-08-29',3560,3610,3520,3580),('TLKM','2018-08-30',3580,3590,3510,3510),('ANTM','2018-08-01',925,945,920,940),('ANTM','2018-08-02',925,940,910,915),('ANTM','2018-08-03',920,925,890,900),('ANTM','2018-08-06',905,940,905,935),('ANTM','2018-08-07',945,955,920,925),('ANTM','2018-08-08',935,940,915,920),('ANTM','2018-08-09',925,930,905,910),('ANTM','2018-08-10',915,915,895,895),('ANTM','2018-08-13',890,890,850,855),('ANTM','2018-08-14',850,865,825,845),('ANTM','2018-08-15',835,865,830,865),('ANTM','2018-08-16',845,845,825,830),('ANTM','2018-08-17',830,830,830,830),('ANTM','2018-08-20',845,860,835,855),('ANTM','2018-08-21',860,865,835,835),('ANTM','2018-08-22',835,835,835,835),('ANTM','2018-08-23',845,880,840,870),('ANTM','2018-08-24',870,880,855,875),('ANTM','2018-08-27',890,915,885,895),('ANTM','2018-08-28',905,910,875,880),('ANTM','2018-08-29',890,890,860,875),('ANTM','2018-08-30',895,895,860,865),('BBRI','2018-08-01',3070,3200,3050,3190),('BBRI','2018-08-02',3200,3260,3190,3250),('BBRI','2018-08-03',3270,3350,3230,3330),('BBRI','2018-08-06',3350,3420,3340,3410),('BBRI','2018-08-07',3350,3400,3330,3350),('BBRI','2018-08-08',3400,3400,3310,3330),('BBRI','2018-08-09',3330,3350,3300,3330),('BBRI','2018-08-10',3350,3470,3350,3390),('BBRI','2018-08-13',3300,3320,3130,3140),('BBRI','2018-08-14',3090,3150,3040,3130),('BBRI','2018-08-15',3150,3220,3020,3210),('BBRI','2018-08-16',3180,3180,3050,3050),('BBRI','2018-08-17',3050,3050,3050,3050),('BBRI','2018-08-20',3080,3190,3080,3180),('BBRI','2018-08-21',3130,3180,3120,3150),('BBRI','2018-08-22',3150,3150,3150,3150),('BBRI','2018-08-23',3180,3270,3130,3270),('BBRI','2018-08-24',3270,3290,3230,3270),('BBRI','2018-08-27',3320,3380,3290,3380),('BBRI','2018-08-28',3330,3380,3300,3330),('BBRI','2018-08-29',3260,3300,3250,3290),('BBRI','2018-08-30',3290,3310,3190,3190),('BBTN','2018-08-01',2370,2470,2370,2460),('BBTN','2018-08-02',2460,2480,2410,2410),('BBTN','2018-08-03',2420,2480,2420,2450),('BBTN','2018-08-06',2480,2660,2470,2660),('BBTN','2018-08-07',2660,2690,2610,2660),('BBTN','2018-08-08',2660,2670,2560,2620),('BBTN','2018-08-09',2650,2840,2610,2760),('BBTN','2018-08-10',2800,2880,2790,2810),('BBTN','2018-08-13',2760,2760,2610,2630),('BBTN','2018-08-14',2620,2660,2510,2530),('BBTN','2018-08-15',2550,2620,2410,2580),('BBTN','2018-08-16',2530,2550,2430,2490),('BBTN','2018-08-17',2490,2490,2490,2490),('BBTN','2018-08-20',2490,2560,2490,2510),('BBTN','2018-08-21',2520,2590,2460,2560),('BBTN','2018-08-22',2560,2560,2560,2560),('BBTN','2018-08-23',2580,2640,2560,2640),('BBTN','2018-08-24',2630,2660,2600,2630),('BBTN','2018-08-27',2660,2830,2660,2770),('BBTN','2018-08-28',2800,2840,2780,2810),('BBTN','2018-08-29',2810,2880,2770,2860),('BBTN','2018-08-30',2870,2920,2830,2860);

Langkah 2- Buat Controller Saham

Buat Controller pada folder application/controllers dengan nama Saham.php
Kemudian ketikkan perintah berikut:

application/controllers/Saham.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Saham extends CI_Controller {
	function __construct() 
		{
			parent::__construct();
			$this->load->model('Saham_model');
		}
	public function index()
		{
			$id=$data['id']=$this->uri->segment(3);
			$data['detail']=$this->Saham_model->getStockID($id)->row_array();
			$data['record_stock']=$this->Saham_model->getStockAll();
			$data['record']=$this->Saham_model->getSahamHistory($id)->result();
			$this->load->view('history',$data);
		}
	public function cari()
		{
			$id=$this->input->post('id');
			redirect("saham/index/$id");
		}	
}

Langkah 3- Buat Model Saham_model

Buat Model pada folder application/models dengan nama Saham_model.php
Kemudian ketikkan perintah berikut:

application/models/Saham_model.php

<?php
	class Saham_model extends CI_Model{
		public $jumlah_baris;
		public function getStockAll()
			{
				 return $this->db->get("tbl_stock")->result();
			}	
		public function getStockID($id)
			{
				 return $this->db->get_where("tbl_stock", array('id' => $id));	
			}		
		public function getSahamHistory($id)
			{
				$this->db->select('*');
				$this->db->from('tbl_history');
				$this->db->where('stock_id',$id);
				$this->db->order_by('tanggal');		
				return $this->db->get();
			}	
	}
?>

Langkah 4- Buat View history

Buat View pada folder application/views dengan nama history.php
Kemudian ketikkan perintah berikut:

application/views/history.php

<html>
<head>
<title>Menampilkan CandleStick</title>
<link rel="stylesheet" href="<?php echo base_url()?>assets/bs413/bootstrap.min.css">
<script src="<?php echo base_url()?>assets/echarts.min.js"></script>
</head>
<body>
 <main role="main" class="container">

        <h2>Menampilkan CandleStick</h2><hr />
        <form  action="<?php echo base_url()?>index.php/saham/cari" method="post">
	<div class="form-group row">
            <div class="col-sm-12">
            	
                <select class="form-control" name="id" id="id">
                 <option value="0">---Pilih Stock---</option>
                 <?php
                 	foreach($record_stock as $rs)
						{
				 ?>
                 <option value="<?php echo $rs->id;?>" <?php if($id==$rs->id) { ?> selected="selected" <?php }?>><?php echo $rs->id;?>-<?php echo $rs->nama;?></option>
                 <?php
						}
				 ?>
               </select>
               
            </div>
        </div> 
        
 
  <button type="submit" class="btn btn-success"> Tampilkan</button>
</form>


<?php
if($id!="")
	{			
?>
<div class="form-group row">
	<div class="col-sm-1">KODE</div>
    <div class="col-sm-11">: <?php echo $detail['id'];?></div>
</div>
<div class="form-group row">
	<div class="col-sm-1">NAMA</div>
    <div class="col-sm-11">: <?php echo $detail['nama'];?></div>
</div>
<?php
		$jum=count($record);
		$no=1;	
		$data_tanggal="";
		$data_history="";
		foreach($record as $r)
			{
				$data_tanggal.="'".$r->tanggal."'";
				$data_history.="[".$r->open.",".$r->close.",".$r->low.",".$r->high."]";
				if($no<$jum)
					{
						$data_tanggal.=",";
						$data_history.=",";
					}
				$no++;	
			}
?>
 <div id="graph" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('graph'));
		var upColor = '#00da3c';
		var upBorderColor = '#008F28';
		var downColor = '#ec0000';
		var downBorderColor = '#8A0000';
        var option = {
						xAxis: {
									data: [<?php echo $data_tanggal;?>]
								},
						 tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross'
							}
						},
						yAxis: {
								 scale: true,
									splitArea: {
										show: true
									}
							},
						series: [{
							type: 'k',
							data: [<?php echo $data_history;?>],
							 itemStyle: {
								normal: {
									color: upColor,
									color0: downColor,
									borderColor: upBorderColor,
									borderColor0: downBorderColor
								}
							},
							
						}]
					};


        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>
<?php
	}
?>
</main>
<script src="<?php echo base_url()?>assets/bs413/jquery-3.3.1.slim.min.js"></script>
<script src="<?php echo base_url()?>assets/bs413/bootstrap.min.js"></script>
</body>
</html>

Langkah 5- Jalankan Aplikasi

Berikutnya jalankan program dengan mengakses alamat: http://localhost/nama_folder/index.php/saham
Maka di browser muncul daftar pilihan saham. Pilih salah satu saham, kemudikan klik tombol tampilkan. Maka akan tersaji candlestick dari saham bersangkutan.

Download Source Code menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts

Klik tombol Facebook / Twitter / Google + untuk Download


Komentar via Facebook tentang Menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts

Komentar tentang Menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts

Silahkan tulis saran, komentar dan pertanyaan dibawah!

Your email address will not be published. Required fields are marked *