Black Lives Matter. Please consider donating to Black Girls Code today.

Dash Multi Page Graph Refresh on Dropdown


I am trying to create a multi page dash app. All these pages work as separate python files with their respective work done when clicked on that tab.

In one of the pages, I am creating a dropdown, when this value changes, the graph below it should refresh. I can get this to run independently, but when trying to make it work with the multipage app code, only the dropdown gets displayed, the graph doesn’t get displayed. I am not sure If I am having an issue with my callback, kindly help. runs the app. It can access the function borough. Below is the code of the file that contains borough.
Simply, it has a dropdown, whatever value I select runs into my callback function which retrieves relevant data from a table and makes the pie chart.

def borough():
    layout = html.Div([
    return layout

from index import app

dropdown = html.Div(children=[
html.H1('Borough Report'),

                 {'label': 'RICHMOND-UPON-THAMES', 'value': 'RICHMOND-UPON-THAMES'},
                 {'label': 'CROYDON', 'value': 'CROYDON'},
                 {'label': 'HACKNEY', 'value': 'HACKNEY'},



    Output(component_id='graph1', component_property='children'),
    [Input(component_id='input', component_property='value')]
def update_graph(input_data):

    report_borough = spark.sql(
        "SELECT SUM(numofcasualties) as NUM,modeoftravel FROM table_borough where accidentseverity IN "
        "('Serious','Fatal') AND borough =" + '"{}"'.format(input_data) + " GROUP BY modeoftravel")

    ncas ="NUM").rdd.flatMap(lambda x: x).collect()
    lab ="modeoftravel").rdd.flatMap(lambda x: x).collect()

    data = [
            'values': ncas,
            'labels': lab,
            'type': 'pie',
            'hole': 0.2
    return {
                         'data': data,
                         'layout': {'title': 'People Seriously Injured or Killed in ' + input_data}