Hi everyone,
Does anybody knows if I could create two tabs with content that changes dynamically such as datepickerrange inside one of these tabs, or maybe in both of them. I’m struggling and I couldn’t find a thread with a matching situation. I’m not sure even if is possible.
My code looks like this now:
tab_layout_email = [… , dcc.Graph(id=graph1)]
tab_layout_chat= [… , dcc.Graph(id=graph2)]
app.layout = html.Div([
html.H1(‘Dash Tabs component demo’),
dcc.Tabs(id=“tabs-example”, value=‘tab_layout_email’, children=[
dcc.Tab(label=‘E-mail’, value=‘tab_layout_email’),
dcc.Tab(label=‘Chat’, value=‘tab_layout_chat’)
]),
html.Div(id=‘tabs-content-example’)
])
@app.callback(Output(‘tabs-content-example’, ‘children’),
[Input(‘tabs-example’, ‘value’)])
def render_content(tab):
if tab == 'tab_layout_email':
return tab_layout_email
elif tab == 'tab_layout_chat':
return tab_layout_chat
@app.callback([Output(‘graph1’,‘figure’),
Output(‘graph2’,‘figure’)],
[Input(‘submit-button’,‘n_clicks’)],
[State(‘my_date_picker’,‘start_date’),
State(‘my_date_picker’,‘end_date’)
])
def graph_email(n_clicks,start_date,end_date):
start = datetime.strptime(start_date[0:10],'%Y-%m-%d').date()
end = datetime.strptime(end_date[0:10],'%Y-%m-%d').date()
...
fig1 = {'data':data1,
'layout':layout1}
@app.callback([Output(‘graph2’,‘figure’)],
[Input(‘submit-button’,‘n_clicks’)],
[State(‘my_date_picker’,‘start_date’),
State(‘my_date_picker’,‘end_date’)
])
def graph_chat(n_clicks,start_date,end_date):
start = datetime.strptime(start_date[0:10],'%Y-%m-%d').date()
end = datetime.strptime(end_date[0:10],'%Y-%m-%d').date()
...
fig2 = {'data':data2,
'layout':layout2}
If there is some sort of typo, it is just because I manipulated in order to fit better here.
Hope someone could help me out on that