How to put one graph on top of the other but using the same interactive drop dow

Dash Python
1

Hi i am trying to get one graph on top of the other , but the best I could do is put them together…Please see my code below. Ideally i want trace 1 to 6 to be in one bar chart and trace 7 to 9 in another bar chart. I have also added a picture of my output.

IMG_5027
IMG_5027.jpg2016×1512 467 KB 

mgr_options = df['SA3'].unique()

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# Populate the layout with HTML and graph components
app.layout = html.Div([
html.H2("Accidents in Canberra - Please select one SA3 "),
html.Div(
    [
        dcc.Dropdown(
            id="SA3",
            options=[{
                'label': i,
                'value': i
            } for i in mgr_options],
            value='All Suburbs'),
    ],
    style={'width': '25%',
           'display': 'inline-block'}),
dcc.Graph(id='funnel-graph'),
])

# Add the callbacks to support the interactive components
@app.callback(
dash.dependencies.Output('funnel-graph', 'figure'),
[dash.dependencies.Input('SA3', 'value')])

def update_SA2_using_SA3_graph(SA3):
if SA3 == "All Suburbs":
    df_plot = df.copy()
else:
    df_plot = df[df['SA3'] == SA3]

pv = pd.pivot_table(
    df_plot,
    index=['Suburb'],
    columns=["Type"],
    values=['Quantity'],
    aggfunc=sum,
    fill_value=0)

trace1 = go.Bar(x=pv.index, y=pv[('Quantity', 'Good dry surface')], name='Good dry surface')
trace2 = go.Bar(x=pv.index, y=pv[('Quantity', 'Loose surface')], name='Loose surface')
trace3 = go.Bar(x=pv.index, y=pv[('Quantity', 'Muddy or oily surface')], name='Muddy or oily surface')
trace4 = go.Bar(x=pv.index, y=pv[('Quantity', 'Snow or ice')], name='Snow or ice')
trace5 = go.Bar(x=pv.index, y=pv[('Quantity', 'Unknown')], name='Unknown')
trace6 = go.Bar(x=pv.index, y=pv[('Quantity', 'Wet surface')], name='Wet surface')

if SA3 == "All Suburbs":
    df_plot2 = df2.copy()
else:
    df_plot2 = df2[df2['SA3'] == SA3]

pv2 = pd.pivot_table(
    df_plot2,
    index=['Suburb'],
    columns=["Type"],
    values=['Quantity'],
    aggfunc=sum,
    fill_value=0)

trace7 = go.Bar(x=pv2.index, y=pv2[('Quantity', 'FIXED ONLY SPEED CAMERA')], name='FIXED ONLY SPEED CAMERA')
trace8 = go.Bar(x=pv2.index, y=pv2[('Quantity', 'MOBILE SPEED CAMERA')], name='MOBILE SPEED CAMERA')
trace9 = go.Bar(x=pv2.index, y=pv2[('Quantity', 'POINT TO POINT CAMERA')], name='POINT TO POINT CAMERA')
trace10 = go.Bar(x=pv2.index, y=pv2[('Quantity', 'RED LIGHT AND SPEED CAMERA')], name='RED LIGHT AND SPEED CAMERA')

return {
    'data': [trace1, trace2, trace3, trace4, trace5,trace6,trace7, trace8, trace9],
    'layout':
    go.Layout(
        title='Car accidents by road condition type for {}'.format(SA3),
        barmode='stack')
}



if __name__ == '__main__':
app.run_server(debug=True)