Hi,
i am trying to create an simle dashboard using plotly and dash. The application is almost complete but the table slider shown on the dashboard does not work.
For the above image when I try to go from page 1 to next page using the arrow keys I am unable to do so as the arrow keys are displayed but disabled
PFA my code:
import pandas as pd #(version 1.0.0)
import plotly #(version 4.5.4) pip install plotly==4.5.4
import plotly.express as px
import dash #(version 1.9.1) pip install dash==1.9.1
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
#---------------------------------------------------------------
#Taken from https://www.ecdc.europa.eu/en/geographical-distribution-2019-ncov-cases
df = pd.read_excel("C:/Users/Administrator/Desktop/Zerodha/ohlcv.xlsx")
dff = df.groupby(['Symbol'], as_index=False)[['Open','High','Low','Close','Last']].sum()
print (dff[:5])
#---------------------------------------------------------------
app.layout = html.Div([
html.Div([
dash_table.DataTable(
id='datatable_id',
data=dff.to_dict('records'),
columns=[
{"name": i, "id": i, "deletable": False, "selectable": False} for i in dff.columns
],
editable=False,
filter_action="native",
sort_action="native",
sort_mode="multi",
row_selectable="multi",
row_deletable=False,
selected_rows=[],
page_action="native",
page_current= 0,
page_size= 6,
# page_action='none',
# style_cell={
# 'whiteSpace': 'normal'
# },
# fixed_rows={ 'headers': True, 'data': 0 },
# virtualization=False,
style_cell_conditional=[
{'if': {'column_id': 'Symbol'},
'width': '40%', 'textAlign': 'left'},
{'if': {'column_id': 'Open'},
'width': '30%', 'textAlign': 'left'},
{'if': {'column_id': 'High'},
'width': '10%', 'textAlign': 'left'},
{'if': {'column_id': 'Low'},
'width': '30%', 'textAlign': 'left'},
{'if': {'column_id': 'Close'},
'width': '10%', 'textAlign': 'left'},
{'if': {'column_id': 'Last'},
'width': '10%', 'textAlign': 'left'},
],
),
],className='row'),
html.Div([
html.Div([
dcc.Dropdown(id='linedropdown',
options=[
{'label': 'Open', 'value': 'Open'},
{'label': 'High', 'value': 'High'},
{'label': 'Low', 'value': 'Low'},
{'label': 'Close', 'value': 'Close'},
{'label': 'Last', 'value': 'Last'}
],
value='Close',
multi=False,
clearable=False
),
],className='six columns'),
html.Div([
dcc.Dropdown(id='piedropdown',
options=[
{'label': 'Open', 'value': 'Open'},
{'label': 'High', 'value': 'High'},
{'label': 'Low', 'value': 'Low'},
{'label': 'Close', 'value':'Close'},
{'label': 'Last', 'value': 'Last'},
],
value='Close',
multi=False,
clearable=False
),
],className='six columns'),
],className='row'),
html.Div([
html.Div([
dcc.Graph(id='linechart'),
],className='six columns'),
html.Div([
dcc.Graph(id='piechart'),
],className='six columns'),
],className='row'),
])
#------------------------------------------------------------------
@app.callback(
[Output('piechart', 'figure'),
Output('linechart', 'figure')],
[Input('datatable_id', 'selected_rows'),
Input('piedropdown', 'value'),
Input('linedropdown', 'value')]
)
def update_data(chosen_rows,piedropval,linedropval):
if len(chosen_rows)==0:
df_filterd = dff[dff['Symbol'].isin(['APLAPOLLO','AUBANK','AARTIDRUGS'])]
else:
print(chosen_rows)
df_filterd = dff[dff.index.isin(chosen_rows)]
pie_chart=px.pie(
data_frame=df_filterd,
names='Symbol',
values=piedropval,
hole=.3,
labels={'Symbol'}
)
#extract list of chosen countries
list_chosen_countries=df_filterd['Symbol'].tolist()
#filter original df according to chosen countries
#because original df has all the complete dates
df_line = df[df['Symbol'].isin(list_chosen_countries)]
line_chart = px.line(
data_frame=df_line,
x='Date',
y=linedropval,
color='Symbol',
labels={'Symbol', 'Date'},
)
line_chart.update_layout(uirevision='foo')
return (pie_chart,line_chart)
#------------------------------------------------------------------
if __name__ == '__main__':
app.run_server(debug=False)
All the other components such as dropdown and charts work as expected as shown:
