Filtering Dash graphs via dropdpwm

Dash Python
1

Please help me achieve the following:

My goal is multiple folds:

  1. Plot multiple graphs and have them 2 in row ( that’s done)
  2. Now I want to filter and display only graphs belonging to specific division when i select that division in the drop down. ex: when i select Division 1, only the graphs of Division 1 should display. all graphs display when no option is specified in dropdown.
    You will the error message below as well
```import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)
# List of Bus
all_divisions = hkg_launch['BU Desc'].unique()
# products launched in the last 6 months including inbound and outbound from month 1 till today
launched_items
# list made of dfs of singular launched items 
df_launches = []
for item in launched_items:
    df_launches.append(past_6_month_launch.loc[past_6_month_launch.index == item])
# all graph outputs
output = []
for i in range(0, len(df_launches)):
    output.append(dcc.Graph(id='graph-'+str(i),figure={
        'data': [go.Bar(x=df_launches[i]['Date'],y=df_launches[i]['Inbound Qty'],name='Inbound Qty'),
                 go.Bar(x=df_launches[i]['Date'],y=df_launches[i]['Outbound Qty'],name='Outbound Qty'),
                 go.Scatter(x=df_launches[i]['Date'],y=df_launches[i]['Balance of Movement'],
                            name='Balance of Movement Qty')
                ],
        "layout": {"title": {"text": "%s an item of BU %s "%(df_launches[i].index.unique().item(), df_launches[i]['BU Desc'].unique().item())}}
    }))

# Controls elements
controls = html.Div([
    html.Label("Business Unit"),
    dcc.Dropdown(
        id = "bu-name",
        options = [{"label": bu, "value": bu} for bu in all_divisions]
    )
    ])

app.layout = html.Div([
    html.Div([
        html.Div(controls, className = "four columns"),
        html.Div('Summary table here', style={'display': 'inline-block'},className = "eight columns")
    ], className = "row"),
    html.Div([
        html.Div(id='sorted-items',children = [item for item in output],className = "twelve columns"),
        ],style = { 'columnCount': 2}
    ) 
])

@app.callback(
    output('sorted-items', 'figure'),
    [
        input('bu-name', 'value')
    ]
)
def update_graph(selected_division):
    division_df = df_launches.loc[df_launches['BU Desc'] == selected_division]
    for material in division_df.index.unique():
        df_by_material = division_df.loc[division_df.index == material]
        return {
            'data': [go.Bar(x=df_by_material['Date'],y=df_by_material['Date']['Inbound Qty'],name='Inbound Qty'),
                 go.Bar(x=df_by_material['Date'],y=df_by_material['Date']['Inbound Qty'],name='Outbound Qty'),
                 go.Scatter(x=df_by_material['Date']['Date'],y=df_by_material['Date']['Balance of Movement'],
                            name='Balance of Movement Qty')
                ],
            "layout": {"title": {"text": "%s an item of BU %s "%(df_by_material[material].index.unique().item(), df_by_material[material]['BU Desc'].unique().item())}}
            }
        
        
    
    

if __name__ == '__main__':
    app.run_server(debug=False)
TypeError                                 Traceback (most recent call last)
<ipython-input-151-5bb61d464e60> in <module>
     50 
     51 @app.callback(
---> 52     output('sorted-items', 'figure'),
     53     [
     54         input('bu-name', 'value')

TypeError: 'list' object is not callable