Menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts
16 September 2018 | Tags: Menampilkan Candlestick dengan CI, Menampilkan Candlestick dengan CodeIgniter, Menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts, Menampilkan Candlestick dengan Echarts
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.
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:
PRASYARAT
Sebelum memulai materi ini, saya mengasumsikan anda sudah menguasai:
- CodeIgniter (Menggunakan database MySQL)
- Cara menggunakan Echarts, jika belum silahkan buka artikel Cara Membuat Grafik Dengan CodeIgniter dan Echarts
- 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:
- tbl_stock untuk menyimpan Emiten (perusahaan yang menerbitkan saham)
- 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 tentang Menampilkan CandleStick dengan CodeIgniter Mysql dan Echarts
Terima kasih buat masukkan ide ini, saya perlu bantuan untuk berdiskusi mengenai chart ini. Apakah saya bisa menghubungi by email atau komunikasi lainnya ? Terima kasih.
Boleh,lewat sweta@komang.myid