Hi,
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.
index.py runs the app. It can access the function borough. Below is the code of the file Borr.py 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([
nav,
#header,
dropdown,
#output
])
return layout
from index import app
dropdown = html.Div(children=[
html.H1('Borough Report'),
dcc.Dropdown(id='input',
options=[
{'label': 'RICHMOND-UPON-THAMES', 'value': 'RICHMOND-UPON-THAMES'},
{'label': 'CROYDON', 'value': 'CROYDON'},
{'label': 'HACKNEY', 'value': 'HACKNEY'},
],
value=None
),
dcc.Graph(
id='graph1'
)
])
@app.callback(
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 = report_borough.select("NUM").rdd.flatMap(lambda x: x).collect()
lab = report_borough.select("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}
}