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. Dalam dunia pengembangan web, visualisasi data menjadi semakin penting untuk menyajikan informasi secara efektif kepada pengguna. Salah satu alat yang sangat efektif dalam menciptakan visualisasi grafik yang dinamis adalah Plotly JavaScript.
Plotly JavaScript adalah perpustakaan grafik interaktif open-source yang memungkinkan pengembang untuk membuat visualisasi data yang kaya dan dinamis di aplikasi web. Dengan Plotly, Anda dapat membuat berbagai jenis grafik, termasuk diagram garis, diagram batang, heatmap, dan sebagainya. Kelebihan utama Plotly adalah kemampuannya dalam memberikan pengalaman interaktif kepada pengguna, memungkinkan mereka untuk menjelajahi dan memahami data dengan lebih baik. 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
Keunggulan Plotly JavaScript:
- Interaktivitas Tinggi: Plotly memungkinkan pengguna untuk berinteraksi dengan grafik. Pengguna dapat memperbesar, memperkecil, dan menjelajahi data dengan menyorot area tertentu. Ini memberikan pengalaman yang lebih mendalam dan memungkinkan pengguna untuk mengeksplorasi informasi lebih lanjut.
- Dukungan Multi-platform: Plotly dapat diintegrasikan dengan berbagai platform pengembangan web, termasuk JavaScript, Python, dan R. Ini membuatnya sangat fleksibel dan memungkinkan pengembang untuk menggunakan alat ini di berbagai proyek.
- Pembaruan Real-Time: Dengan Plotly, Anda dapat menyajikan data secara dinamis dan real-time. Grafik dapat diperbarui secara otomatis ketika data berubah, memberikan pengguna akses instan ke informasi terbaru.
- Kustomisasi yang Luas: Plotly memberikan kontrol penuh kepada pengembang untuk menyesuaikan tampilan dan gaya grafik. Dengan menggunakan berbagai opsi konfigurasi, Anda dapat membuat grafik yang sesuai dengan estetika dan tujuan proyek Anda.
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