Membuat Dashboard Interaktif untuk Analisis Trading Harian

Membuat Dashboard Interaktif –  Aplikasi yang melibatkan interaksi dengan penggunanya lumayan membutuhkan component yang sangat banyak terutama component/library grafis, belum lagi memikirkan event/callbacknya. Untungnya kita akan terbantu dengan library siap pakai seperti RShiny di R/RStudio. Lha bagaimana dengan Python? tenang saja membuat dashboard interaktif berbasis web sangat mudah bila kita menggunakan duet antara Dash dan Plotly.

Dashboard Interaktif

Bila kalian cermati, beberapa postingan disini banyak menggunakan grafik canggih2 dan ribet dalam membahas saham serta interaktif bisa digeser, zoom, dan bahkan save kedalam beberapa format gambar. Sebenarnya itu untuk mempermudah analisis trading saham yang lebih mudah dibaca menggunakan grafik daripada hanya deretan angka-angka saja.

Seperti gambar berikut dengan beberapa overlapping garis dan spot/titik adalah contoh sebuah keputusan buy dan sell yang dibuat otomatis oleh algoritma yang saya buat untuk menguji beberapa keputusan buy dan sell dengan melibatkan indikator tertentu sehingga dapat dibuat robot trading.

Membuat Dashboard Interaktif

Membuat Dashboard Interaktif membutuhkan library utama yaitu dash, oleh sebab itu kalian bisa melakukan install pip install dash

atau bisa berkunjung di https://dash.plotly.com. Sebagai bahan dataset, seperti biasa kita menggunakan data transaksi harian yang bisa diambil disini https://softscients.com/2022/08/27/merge-file-csv-di-pandas/

Dashboard interaktif yang kita buat cukup sederhana dulu yaitu menampilkan data close dan volume untuk 1 emiten. Seperti biasa kita loading library yang diperlukan, oiya saya simpan kode dibawah ini dengan nama run.py agar mudah diingat saja

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import os
import glob

dilanjutkan merge file CSV

joined_files = os.path.join("//dataset", "*.csv")
joined_list = glob.glob(joined_files)
data = pd.concat(map(pd.read_csv, joined_list), ignore_index=True)

pilih emiten yang kita akan gunakan serta urutkan berdasarkan Date nya

emiten = "'BBRI'"
data = data.query("StockCode=="+emiten)
data['Date'] = pd.to_datetime(data['Date'], format='%Y-%m-%d')
data.sort_values(by='Date',ascending=True,inplace =  True)

Lanjut membuat layout Dash nya

app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.H1(children="Emiten : "+emiten,),
        html.P(
            children="Harga Saham Harian",
        ),
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["Date"],
                        "y": data["Close"],
                        "type": "lines",
                    },
                ],
                "layout": {"title": "Close"},
            },
        ),
        dcc.Graph(
            figure={
                "data": [
                    {
                        "x": data["Date"],
                        "y": data["Volume"],
                        "type": "lines",
                    },
                ],
                "layout": {"title": "Volume"},
            },
        ),
    ]
)

Langkah terakhir membuat kode untuk memanggil sebagai aplikasi

if __name__ == "__main__":
    app.run_server(debug=False)

Langkah selanjutnya adalah memanggil script tersebut via terminal

python run.py

nanti kita buka saja browser dengan alamat http://127.0.0.1:8050

Menu Drop Down

Tentu data diatas mempunyai banyak emiten sehingga tidak praktis kalau setiap memilih emiten, harus ketik ulang lagi kode nya kemudian melakukan refresh F5 di browser, oleh sebab itu, kita akan ubah dengan menambahkan menu dropdown dan callback. Kita perbaiki kode nya seperti berikut (saya simpan dengan nama run2.py)

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import os
import glob

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import numpy as np


joined_files = os.path.join("//Volumes//GoogleDrive//My Drive/Portofolio Saham 2022//Cara Narik Data Saham Harian di website IDX//dataset", "*.csv")
joined_list = glob.glob(joined_files)
data = pd.concat(map(pd.read_csv, joined_list), ignore_index=True)

data['Date'] = pd.to_datetime(data['Date'], format='%Y-%m-%d')
data.sort_values(by='Date',ascending=True,inplace =  True)

emitens = np.sort(data['StockCode'].unique())

emiten = dcc.Dropdown(options=emitens,
                            value=emitens[0])

selanjutnya

app = dash.Dash(__name__)
app.layout = html.Div(children=[
    html.H1(children='Harga Saham Harian'),
    emiten,
    dcc.Graph(id='close-graph')
])

jangan lupa buat callback dan update graphnya

@app.callback(
    Output(component_id='close-graph', component_property='figure'),
    Input(component_id=emiten, component_property='value')
)
def update_graph(selected_emiten):
    filter_data = data.query("StockCode=='"+selected_emiten+"'")
    filter_data = filter_data.reset_index()
    line_fig = px.line(filter_data,
                       x='Date', y='Close',
                       title=f'Emiten : {filter_data["StockName"][0]}')
    return line_fig

tambahkan kode buat run scriptnya

if __name__ == "__main__":
    app.run_server(debug=True)

Panggil via terminal dengan perintah

python run2.py

Hasilnya

Untuk membuat banyak grafik ter update dengan sekali klik, langkah nya agak panjang dikit, nanti kita akan bahas tersendiri.