Visualisasi data berbasis grafik tentu sangat berguna untuk mendapatkan gambaran secara menyeluruh arah pergerakan data. Namun membuat grafik yang interaktif membutuhkan skill yang bagus. Banyak postingan yang dibahas disini seperti Matplotlib, Ggplot. Namun semuanya itu tidaklah interaktif.
Interaktif yaitu adanya interaksi antar user dengan objek melalui event seperti klik mouse, drag dan yang lainnya. Namun kalian tidak usah kuatir, kita bisa menggunakan Plotly JavaScript untuk Visualisasi Grafik yang Dinamis berbasis web. Plotly tersedia dibanyak bahasa seperti Python dan R.
Nah kali ini, kita akan mengembangkan aplikasi sebelumnya Function Map pada Java Script untuk Looping Array JSON yang menampilkan data dalam bentuk tabel. Kita akan perluas lagi Plotly JavaScript untuk Visualisasi Grafik yang Dinamis agar nampak pergerakan harga saham tersebut. Berikut beberapa library yang diperlukan
- jquery untuk mengurusi ajax
- bootstrap untuk thema
- bootstrap table untuk table
- plotly untuk charting
Library JS
Langkah pertama yaitu menambahkan library java script plotly terlebih dahulu pada tag <head> </head>
<!-- plotly --> <script src='https://cdn.plot.ly/plotly-latest.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/ccxt@1.17.229/build/ccxt.browser.js'></script>
Component Grafik
serta menambahkan grafik pada tag <body> </body>
<h3>Grafik</h3> <div id="graph" style="height: 700px; fluid-width: 900px;"></div>
seperti dibawah ini
<html lang="en">
<head>
<!-- sisipkan jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<!-- Menyisipkan table
https://bootstrap-table.com
-->
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<!-- Menyisipkan Bootstrap -->
<link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />
<!-- plotly -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/ccxt@1.17.229/build/ccxt.browser.js'></script>
</head>
<body>
<h3>Harga Saham</h3>
<table id="table1" data-toggle="table" data-height="460" data-toolbar=".toolbar" data-sortable="true">
<thead>
<tr>
<th data-field="date">Date</th>
<th data-field="stockcode">Stock Code</th>
<th data-field="open">Open</th>
<th data-field="high">High</th>
<th data-field="low">Low</th>
<th data-field="close">Close</th>
<th data-field="volume" data-sortable="false" data-align="right">Volume</th>
<th data-field="value" data-sortable="false" data-align="right">Value</th>
<th data-field="frequency" data-sortable="false" data-align="right">Frequency</th>
</tr>
</thead>
</table>
<h3>Grafik</h3>
<div id="graph" style="height: 700px; fluid-width: 900px;"></div>
</body>
</html>
AJAX dan API untuk Stock
Pada pembahasan sebelumnya kita telah memanggil API berbasis AJAX, sekalian kita akan loading data tersebut dalam bentuk plot. Berikut kode yang digunakan dengan memanfaatkan lagi map function untuk memanggil JSON
let trace1 = {
name: 'Close ',
x: data.map(c=>c.ohlcv.date),
close: data.map(c=>c.ohlcv.close),
high : data.map(c=>c.ohlcv.high),
open : data.map(c=>c.ohlcv.open),
low : data.map(c=>c.ohlcv.low),
type: 'ohlc',
line: {
color: 'rgba(0, 0, 0, 0.7)'
}
};
var layout = {
title: 'emiten '+data.map(c=>c.ohlcv.stockcode).slice(0,1)[0],
showlegend: true,
legend: {
x: 0.05,
y: 1.35
},
yaxis: {
fixedrange: true
},
xaxis : {
fixedrange: false,
rangeslider: {
visible: false
}
}
};
var config = {
modeBarButtonsToRemove: ['select2d', 'lasso2d',
'hoverCompareCartesian', 'hoverClosestCartesian',
'autoScale2d', 'sendDataToCloud'],
displaylogo: false,
editable: false,
showTips: true,
scrollZoom: false,
autosize: true
};
Plotly.newPlot('graph', [trace1], layout,config);
Kode lengkapnya yaitu
<html lang="en">
<head>
<!-- sisipkan jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<!-- Menyisipkan table
https://bootstrap-table.com
-->
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<!-- Menyisipkan Bootstrap -->
<link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />
<!-- plotly -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/ccxt@1.17.229/build/ccxt.browser.js'></script>
</head>
<body>
<h3>Harga Saham</h3>
<table id="table1" data-toggle="table" data-height="460" data-toolbar=".toolbar" data-sortable="true">
<thead>
<tr>
<th data-field="date">Date</th>
<th data-field="stockcode">Stock Code</th>
<th data-field="open">Open</th>
<th data-field="high">High</th>
<th data-field="low">Low</th>
<th data-field="close">Close</th>
<th data-field="volume" data-sortable="false" data-align="right">Volume</th>
<th data-field="value" data-sortable="false" data-align="right">Value</th>
<th data-field="frequency" data-sortable="false" data-align="right">Frequency</th>
</tr>
</thead>
</table>
<h3>Grafik</h3>
<div id="graph" style="height: 700px; fluid-width: 900px;"></div>
</body>
<script>
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
$(document).ready(function() {
let start = '20200101';
let end = '20231201'
let url = 'https://softscients.com/stocks/index.php/idx/getStock2/BBRI-'+start+'-'+end;
$.getJSON(url,function (response) {
let data = response[0];
let ohc = data.map(function (a, index, array) {
let final = {
'date': formatDate(a.ohlcv.date),
'stockname':a.ohlcv.stockname,
'close':a.ohlcv.close.toLocaleString(2),
'open':a.ohlcv.open.toLocaleString(2),
'high':a.ohlcv.high.toLocaleString(2),
'low':a.ohlcv.low.toLocaleString(2),
'volume':a.ohlcv.volume.toLocaleString(2),
'value':a.ohlcv.value.toLocaleString(2),
'frequency':a.ohlcv.frequency.toLocaleString(2),
'stockcode': a.ohlcv.stockcode
};
return final;
});
$('#table1').bootstrapTable("destroy");
$('#table1').bootstrapTable({
data: ohc,
sortStable: true,
pagination : true,
search : true
});
let trace1 = {
name: 'Close ',
x: data.map(c=>c.ohlcv.date),
close: data.map(c=>c.ohlcv.close),
high : data.map(c=>c.ohlcv.high),
open : data.map(c=>c.ohlcv.open),
low : data.map(c=>c.ohlcv.low),
type: 'ohlc',
line: {
color: 'rgba(0, 0, 0, 0.7)'
}
};
var layout = {
title: 'emiten '+data.map(c=>c.ohlcv.stockcode).slice(0,1)[0],
showlegend: true,
legend: {
x: 0.05,
y: 1.35
},
yaxis: {
fixedrange: true
},
xaxis : {
fixedrange: false,
rangeslider: {
visible: false
}
}
};
var config = {
modeBarButtonsToRemove: ['select2d', 'lasso2d',
'hoverCompareCartesian', 'hoverClosestCartesian',
'autoScale2d', 'sendDataToCloud'],
displaylogo: false,
editable: false,
showTips: true,
scrollZoom: false,
autosize: true
};
Plotly.newPlot('graph', [trace1], layout,config);
});
});
</script>
</html>
Berikut tampilan grafik menggunakan plotly java script yang sangat interakif berbasis web app.
Plotly JavaScript untuk Visualisasi Grafik yang Dinamis bisa kalian lihat penggunaanya di https://softscients.com/stocks