Dependent drop down list in dash

Dash Python
1

I want to create dependent drop down list in dash app. Please help me how to create it. I share below code. Make changes in the below code. I want when I select Asia region in first drop down list then second drop down list automatically update and show countries only for an Asia region.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd



terr2 = pd.read_csv('modified_globalterrorismdb_0718dist.csv')

app = dash.Dash(__name__,)
app.layout = html.Div([

html.Div([
        html.Label(['Select Country:'], style={'color': 'white'}),
        dcc.Dropdown(id='w_countries',
                     multi=False,
                     clearable=True,
                     disabled=False,
                     style={'display': True},
                     value='Iraq',
                     placeholder='Select Countries',
                     options=[{'label': c, 'value': c}
                              for c in (terr2['country_txt'].unique())])

         ], style={'width': '30%', 'margin-left': '35%'}),

html.Div([
        html.Label(['Select Country:'], style={'color': 'white'}),
        dcc.Dropdown(id='w_region',
                     multi=False,
                     clearable=True,
                     disabled=False,
                     style={'display': True},
                     value='Asia',
                     placeholder='Select Countries',
                     options=[{'label': c, 'value': c}
                              for c in (terr2['region_txt'].unique())])

         ], style={'width': '30%', 'margin-left': '35%'})

html.Div([
    html.Br(),
    dcc.Graph(id='bar_line_1',
              config={'displayModeBar': 'hover'}),

        ],style={'margin-left': '1%','width': '50%', 'display': 'inline-block'}),

  ], style={'background-color': '#192444'})


@app.callback(Output('bar_line_1', 'figure'),
              [Input('w_countries', 'value')])
def update_graph(w_countries):
# Data for bar
    terr5 = terr2.groupby(['country_txt', 'iyear'])[['attacktype1', 'nwound']].sum().reset_index()
return {
      'data': [go.Bar(
                    x=terr5[terr5['country_txt'] == w_countries]['iyear'],
                    y=terr5[terr5['country_txt'] == w_countries]['attacktype1'],
                    name='Attack',

                  marker=dict(color='orange'),

                  hoverinfo='text',
                  hovertext=
                  '<b>Country</b>: ' + terr5[terr5['country_txt'] == w_countries]['country_txt'].astype(str) + '<br>' +
                  '<b>Year</b>: ' + terr5[terr5['country_txt'] == w_countries]['iyear'].astype(str) + '<br>' +
                  '<b>Attack</b>: ' + [f'{x:,.0f}' for x in terr5[terr5['country_txt'] == w_countries]['attacktype1']] + '<br>'
              ),
                 go.Bar(
                     x=terr5[terr5['country_txt'] == w_countries]['iyear'],
                     y=terr5[terr5['country_txt'] == w_countries]['nwound'],
                     name='Attack',

                     marker=dict(color='#9C0C38'),

                     hoverinfo='text',
                     hovertext=
                     '<b>Country</b>: ' + terr5[terr5['country_txt'] == w_countries]['country_txt'].astype(str) + '<br>' +
                     '<b>Year</b>: ' + terr5[terr5['country_txt'] == w_countries]['iyear'].astype(str) + '<br>' +
                     '<b>Wounded</b>: ' + [f'{x:,.0f}' for x in terr5[terr5['country_txt'] == w_countries]['nwound']] + '<br>'
                 )],


        'layout': go.Layout(
             barmode='stack',
             width=1030,
             height=520,
             plot_bgcolor='#1f2c56',
             paper_bgcolor='#1f2c56',
             title={
                'text': 'Attack and Death : ' + (w_countries),
                'y': 0.93,
                'x': 0.5,
                'xanchor': 'center',
                'yanchor': 'top'},
             titlefont={'family': 'Oswald',
                        'color': 'white',
                        'size': 25},

             hovermode='x',

             xaxis=dict(title='<b>Year</b>',
                        color='white',
                        showline=True,
                        showgrid=True,
                        showticklabels=True,
                        linecolor='white',
                        linewidth=2,
                        ticks='outside',
                        tickfont=dict(
                            family='Arial',
                            size=12,
                            color='white'
                        )

                ),

             yaxis=dict(title='<b>Attack and Death</b>',
                        color='white',
                        showline=True,
                        showgrid=True,
                        showticklabels=True,
                        linecolor='white',
                        linewidth=2,
                        ticks='outside',
                        tickfont=dict(
                           family='Arial',
                           size=12,
                           color='white'
                        )

                ),

             legend=dict(title='',
                         x=0.35,
                         y=1.08,
                         orientation='h',
                         bgcolor='#1f2c56',
                         traceorder="normal",
                         font=dict(
                              family="sans-serif",
                              size=12,
                              color='white')),

                 )

    }

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

Hi,

You can refer to this page of the guide, there is an example, in the section ‘Dash App With Chained Callbacks’: https://dash.plotly.com/basic-callbacks

You can modify the radio item by a dropdown.

Alpy

3

Thank you for providing the detail.