I want to make a stock market prediction application with Plotly JupyterDash, but I have a problem with the input dropdown. I get an error like below:
Can someone help me with this error problem? Thankyou for your help
from jupyter_dash import JupyterDash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import dash_table as dt
from dash.exceptions import PreventUpdate
import pandas as pd
import numpy as np
import plotly.graph_objs as go
import plotly.express as px
from dash.dependencies import Input, Output
import random
import time
import math
import os
import datetime
from datetime import timedelta
import tensorflow as tf
from tensorflow.keras.models import *
from tensorflow.keras.layers import *
from tensorflow.keras.callbacks import *
print('Tensorflow version: {}'.format(tf.__version__))
import warnings
warnings.filterwarnings('ignore')
from sklearn import preprocessing
from sklearn.model_selection import train_test_split
from sklearn.metrics import mean_squared_error, mean_absolute_error, r2_score
from math import sqrt
app = JupyterDash(__name__,external_scripts=external_scripts)
server = app.server
df = pd.read_csv("Dataset-Stock-Market/Dataset-Stock-Market-Bank-Company.csv")
app.layout = html.Div([
dcc.Tabs(id="tabs", style = tabs_styles,
children=[
dcc.Tab(label='Stock Prices',
style = tab_style, selected_style = tab_selected_style,
children=[
html.Div(
className="create_container",
children=[
html.H3("Dataset Introduction", style={'textAlign': 'center', 'marginTop': 10}),
dt.DataTable(id='table',
columns=[{"name": i, "id": i} for i in df.columns],
sort_action="native",
sort_mode="multi",
style_cell={'textAlign': 'right',
'minWidth': '100px',
'maxWidth': '100px',
'overflow': 'hidden',
'backgroundColor': '#010915',
'color': '#FEFEFE',
'border-bottom': '0.01rem solid #313841',
},
style_as_list_view=True,
style_header={
'backgroundColor': '#010915',
'fontWeight': 'bold',
'font': 'Lato, sans-serif',
'color': 'orange',
'border': '#010915',
},
style_data={'textOverflow': 'hidden', 'color': 'white'},
fixed_rows={'headers': True},
data=df.to_dict("rows"),
page_size=10
),
]
),
html.Div(
className="create_container",
children=[
html.H3("Stocks High vs Lows", style={'textAlign': 'center', 'marginTop': 20}),
dcc.Dropdown(id='dropdown-highlow',
options=[{'label': 'BCA', 'value': 'BCA'},{'label': 'BRI', 'value': 'BRI'},{'label': 'BNI', 'value': 'BNI'},{'label': 'MANDIRI', 'value': 'MANDIRI'}],
multi=True,
value=['BCA'],
style={"display": "block", "margin-left": "auto", "margin-right": "auto", "width": "80%"}
),
dcc.Graph(id='highlow'),
]
),
html.Div(
className="create_container",
children=[
html.H3("Stocks Open vs Close", style={'textAlign': 'center', 'marginTop': 20}),
dcc.Dropdown(id='dropdown-openclose',
options=[{'label': 'BCA', 'value': 'BCA'},{'label': 'BRI', 'value': 'BRI'},{'label': 'BNI', 'value': 'BNI'},{'label': 'MANDIRI', 'value': 'MANDIRI'}],
multi=True,
value=['BCA'],
style={"display": "block", "margin-left": "auto", "margin-right": "auto", "width": "80%"}
),
dcc.Graph(id='openclose'),
]
),
html.Div(
className="create_container",
children=[
html.H3("Volume Stocks Market", style={'textAlign': 'center', 'marginTop': 20}),
dcc.Dropdown(id='dropdown-volume',
options=[{'label': 'BCA', 'value': 'BCA'},{'label': 'BRI', 'value': 'BRI'},{'label': 'BNI', 'value': 'BNI'},{'label': 'MANDIRI', 'value': 'MANDIRI'}],
multi=True,
value=['BCA'],
style={"display": "block", "margin-left": "auto", "margin-right": "auto", "width": "80%"}
),
dcc.Graph(id='volume'),
]
),
]),
dcc.Tab(label='Machine Learning',
style = tab_style, selected_style = tab_selected_style,
children=[
html.Div(
children=[
html.H3("Stock Market Prediction Using Deep Learning", style={'textAlign': 'center', 'marginTop': 20}),
html.Div([
html.P('Select Forecast Time', className = 'fix_label', style = {'color': 'black', 'margin-top': '30px'}),
dcc.Slider(id = 'slider-forecast-time',
included = True,
updatemode='drag',
tooltip={'always_visible': True},
min = 20,
max = 101,
step = 1,
value = 40,
marks = {str(yr): str(yr) for yr in range(20, 101, 20)},
className = 'dcc_compon'),
html.P('Select Target', className = 'fix_label', style = {'color': 'black', 'margin-top': '30px'}),
dcc.RadioItems(id = 'radio-target',
options=[{'label': "High", 'value': "High"}, {'label': "Low", 'value': "Low"},{'label': "Open", 'value': "Open"}, {'label': "Close", 'value': "Close"}],
style = {'color': 'black'}, className = 'dcc_compon'),
html.P('Select Dataset', className = 'fix_label', style = {'color': 'black', 'margin-top': '30px'}),
dcc.Dropdown(id = 'select-dataset',
multi = False,
clearable = True,
disabled = False,
style = {'display': True},
options=[{'label': 'BCA', 'value': 'BCA'},{'label': 'BRI', 'value': 'BRI'},{'label': 'BNI', 'value': 'BNI'},{'label': 'MANDIRI', 'value': 'MANDIRI'}],
placeholder = 'Select Dataset'),
],
className = "create_container four columns"
),
html.Div([
dcc.Graph(id='traintest'),
dcc.Graph(id='result-forecast', style = {'margin-top': '30px'})
],
className = "create_container seven columns"
),
]
)
])
]),
])
@app.callback(Output('highlow', 'figure'),
[Input('dropdown-highlow', 'value')])
def update_graph(selected_dropdown):
dropdown = {"BCA": "BCA","BRI": "BRI","BNI": "BNI","MANDIRI": "MANDIRI"}
trace1 = []
trace2 = []
for stock in selected_dropdown:
trace1.append(go.Scatter(x=df[df["Stock"] == stock]["Date"],y=df[df["Stock"] == stock]["High"],mode='lines',
opacity=0.7,name=f'High {dropdown[stock]}',textposition='bottom center'))
trace2.append(go.Scatter(x=df[df["Stock"] == stock]["Date"],y=df[df["Stock"] == stock]["Low"],mode='lines',
opacity=0.6,name=f'Low {dropdown[stock]}',textposition='bottom center'))
traces = [trace1, trace2]
data = [val for sublist in traces for val in sublist]
figure = {'data': data,
'layout': go.Layout(colorway=["#5E0DAC", '#FF4F00', '#375CB1', '#FF7400', '#FFF400', '#FF0056'],
height=600,title=f"High and Low Prices for {', '.join(str(dropdown[i]) for i in selected_dropdown)} Over Time",
xaxis={"title":"Date",
'rangeselector': {'buttons': list([{'count': 1, 'label': '1M', 'step': 'month', 'stepmode': 'backward'},
{'count': 6, 'label': '6M', 'step': 'month', 'stepmode': 'backward'},
{'step': 'all'}])},
'rangeslider': {'visible': True}, 'type': 'date'},yaxis={"title":"Price (USD)"}, paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)')}
return figure