I'm working on creating an interactive dashboard using dash. There is a default dataframe(say dashtable1) and everytime I click a column of dashtable1 I want the graph to update and everytime I click on a row I want another dash table(dashtable2) to update. I have partially achieved this. The following is the code snippet:
import pandas as pd
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__, external_stylesheets = [dbc.themes.BOOTSTRAP], prevent_initial_callbacks=True)
app.layout = html.Div([dbc.Row(
[dbc.Col(html.Div(id='graph', style = {'height' : 400 , 'width' : 1750}), width = 9),dbc.Col(html.Div(id='action-df'), width = 3)]
@app.callback(
Output(component_id='action-df', component_property='children'),
[Input(component_id='datatable-interactivity', component_property="derived_virtual_data"),
Input(component_id='datatable-interactivity', component_property='derived_virtual_selected_rows'),
Input(component_id='datatable-interactivity', component_property='derived_virtual_selected_row_ids'),
Input(component_id='datatable-interactivity', component_property='selected_rows'),
Input(component_id='datatable-interactivity', component_property='derived_virtual_indices'),
Input(component_id='datatable-interactivity', component_property='derived_virtual_row_ids'),
Input(component_id='datatable-interactivity', component_property='active_cell'),
Input(component_id='datatable-interactivity', component_property='selected_cells')])
def update_df(all_rows_data, slctd_row_indices, slct_rows_names, slctd_rows,
order_of_rows_indices, order_of_rows_names, actv_cell, slctd_cell):
dff = pd.DataFrame(all_rows_data)
dff.dropna(inplace =True)
action-df.iloc[slctd_row_indices[0],:]
return html.Div(children = [html.Div([
dash_table.DataTable( id = 'action-df',
data=action_df.to_dict('records'),
page_size=10,
fixed_rows={'headers': True},
style_cell_conditional=[ # align text columns to left. By default they are aligned to right
{
'if': {'column_id': c},
'textAlign': 'left'
} for c in action_df.columns
],
style_data={ # overflow cells' content into multiple lines
'whiteSpace': 'normal',
'height': 'auto'
},
columns=[{'name': ["Changeable Parameters",i], 'id': i} for i in action_df.columns ],
cell_selectable = True,
style_data_conditional=[{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(88, 237, 217)'
}, {'if': {'row_index': 'even'},
'backgroundColor': 'rgb(143, 255, 240)'}],
style_header={
'backgroundColor': 'rgb(0, 219, 190)',
'fontWeight': 'bold',
'text-align': 'center'},
fill_width = False,
style_cell={
'height': 'auto',
# all three widths are needed
'minWidth': '180px', 'width': '180px', 'maxWidth': '180px',
'whiteSpace': 'normal',
'font_family': "Coda Caption",
'font_size': '18px'
},
style_table={
'overflowY': 'scroll'},
merge_duplicate_headers=True
)
])
)
@app.callback(Output(component_id = 'graph',component_property = 'children'),
[Input(component_id = 'datatable-interactivity', component_property = 'selected_columns' )]
)
def linechart(slctd_columns):
if 'TIMESTAMP' not in slctd_columns:
fig = px.line(df_merged.iloc[:30,:], x="TIMESTAMP", y= slctd_columns)
fig.update_layout(
title="PARAMETER VARIATION OVER THE LAST MONTH",
xaxis_title="TIMESTAMP",
yaxis_title= str(slctd_columns[0]),
font=dict(
family="Coda Caption",
size=18,
color="#121212"
)
)
return dcc.Graph(id = 'graph',
figure = fig)
This code perfectly works out when I select a row/column for the first time, but stops updating after that. I'm new to Dash, so any help would be highly appreciated!