Dash UI has a dropdown, dynamic tabs, and a graph. Tabs are generated based on dropdown value selection and upon tabs selection graph is rendered. If the user selects a different value from the dropdown, tabs are changed but the graph still shows the previously rendered info, where I want to clear the graph. In the first callback, I am trying to hide the graph by setting style{‘display’: ‘none’} and in the second callback I am trying to unhide the graph, style{‘display’: ‘block’} and update the graph. I know dash doesn’t support multi-output, is there any other way?
import dash
from dash.dependencies import Input, Output,State
import dash_core_components as dcc
import dash_html_components as html
import dash_table
app = dash.Dash(__name__,external_stylesheets=external_stylesheets)
app.layout = html.Div([
html.Div([
dcc.Dropdown(id='my-dropdown', className='dropcs',options=[{'label':name, 'value':name} for name in titles]
, multi=False, placeholder='Select Title...' )
],
),
html.Div(id='output-container',style={'margin':'auto','margin-left':'auto','width':'auto'}),#tabs
#graph
html.Div([
html.Br(),
dcc.Graph(id='graph', figure={'layout':{'xaxis':{'showgrid':False,'zeroline':False,'showticklabels':False},'yaxis':{'showgrid':False,'zeroline':False,'showticklabels':False}}})
],id='graph-2',style= {'display': 'block'}),
])
])
app.config['suppress_callback_exceptions'] = True
@app.callback([Output('output-container', 'children'),# updating the tabs
Output('graph-2', 'style')],# trying to hide the graph
[Input('my-dropdown', 'value')])# dropdown selection
def update_output(value):
return tabs,{'display': 'none'}
@app.callback([Output('graph-2', 'children'),# update graph
Output('graph-2', 'style')],# to show the graph
[Input('tabs-example', 'value')])# upon tab selection update graph
def render_content(value):
return graph,{'display': 'block'}
if __name__ == '__main__':
app.run_server()