Drop down only shows default value when used through call back with dcc Interval

Dash Python
1

Hi There,
I am new to python and dash.

My target is to be able to use the single dropdown on 2 graphs which will be updated as per 5 minutes intervals. one graph has 6 lines and other has 3. Whenever i run it in jupyter, it shows the default value that i have set in drop down menu. Lines simply disappear when i select anyother value from drop down even the default value.

Anyone can help ?

Code is pasted below.

app = dash.Dash()

app.layout = html.Div([
html.Div([
html.H2(‘NPM Core_Data Throughput(Mbps)’,
style={‘float’: ‘center’,
}),
]),
dcc.Dropdown(
id=‘my_dropdown’,
options=[
{‘label’: ‘NWD’, ‘value’: ‘NWD’},
{‘label’: ‘GGSN-ISB’, ‘value’: ‘GGSN-ISB’},
{‘label’: ‘GGSN-KHI’, ‘value’: ‘GGSN-KHI’},
{‘label’: ‘GGSN-LHR’, ‘value’: ‘GGSN-LHR’}
],

    value='GGSN-KHI',
    
),
html.Div(children=html.Div(id='graphs1'), className='row'),
html.Div(children=html.Div(id='graphs2'), className='row'),
dcc.Interval(
id='graph-update',
interval=300000)

], className=“container”,style={‘width’:‘98%’,‘margin-left’:10,‘margin-right’:10,‘max-width’:50000})
@app.callback(
dash.dependencies.Output(‘graphs1’,‘children’),
[dash.dependencies.Input(‘my_dropdown’, ‘value’)],
events=[dash.dependencies.Event(‘graph-update’, ‘interval’)]
)
def update_graph1(my_dropdown):
df1=Final_Sorted.loc[Final_Sorted[‘NE Name’] == my_dropdown]
return html.Div(dcc.Graph(
id=my_dropdown,
animate=True,
figure = { ‘data’: [{
‘x’: df1[‘Start Time’],
‘y’: df1[‘Gi Average Throughput (Mbps) (MB/s)’],
‘name’:‘{} ::Gi Throughput(Mbps)’.format(my_dropdown)

        }, 
        {
        'x': df1['Start Time'],
        'y': df1['SGi Throughput (Peak) (Mbit/s)'],
            'name':'{} :: LTE Throughput(Mbps)'.format(my_dropdown)
        
        },
        {
        'x': df1['Start Time'],
        'y': df1['Total Data Throughput (2G-3G-4G) (Mbit/s)'],
            'name':'{} :: Total Throughput(Mbps)'.format(my_dropdown)
              
        }], 'layout' : go.Layout(title='{}'.format(my_dropdown))}
))

@app.callback(
dash.dependencies.Output(‘graphs2’,‘children’),
[dash.dependencies.Input(‘my_dropdown’, ‘value’)],
events=[dash.dependencies.Event(‘graph-update’, ‘interval’)]
)
def update_graph1(my_dropdown):
df2=LATEST.loc[LATEST[‘NE Name’] == my_dropdown]
df3=Thresholds.loc[Thresholds[‘NE Name’] == my_dropdown]
return html.Div(dcc.Graph(
id=my_dropdown,
animate=True,
figure = { ‘data’: [{
‘x’: df2[‘Time’],
‘y’: df2[‘Gi Average Throughput (Mbps) (MB/s)’],
‘name’:‘{} :: Gi Throughput(Mbps)’.format(my_dropdown)}
,{
‘x’: df3[‘Time’],
‘y’: df3[‘Gi Average Throughput (Mbps) (MB/s)’],
‘name’:‘{} ::Gi Threshold(Mbps)’.format(my_dropdown),
‘line’:{
‘width’: 4,
‘dash’: ‘dot’
}},
{
‘x’: df2[‘Time’],
‘y’: df2[‘SGi Throughput (Peak) (Mbit/s)’],
‘name’:‘{} :: LTE Throughput(Mbps)’.format(my_dropdown)
},
{
‘x’: df3[‘Time’],
‘y’: df3[‘SGi Throughput (Peak) (Mbit/s)’],
‘name’:‘{} ::LTE Threshold(Mbps)’.format(my_dropdown),
‘line’:{
‘width’: 4,
‘dash’: ‘dot’
}
},
{
‘x’: df2[‘Time’],
‘y’: df2[‘Total Data Throughput (2G-3G-4G) (Mbit/s)’],
‘name’:‘{} ::Total Throughput(Mbps)’.format(my_dropdown)
},
{
‘x’: df3[‘Time’],
‘y’: df3[‘Total Data Throughput (2G-3G-4G) (Mbit/s)’],
‘name’:‘{} ::Total Threshold(Mbps)’.format(my_dropdown),
‘line’:{
‘width’: 4,
‘dash’: ‘dot’
}
}], ‘layout’ : go.Layout(title=‘{}’.format(my_dropdown))}

))

external_css = [“https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css”]
for css in external_css:
app.css.append_css({“external_url”: css})

external_js = [‘https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js’]
for js in external_css:
app.scripts.append_script({‘external_url’: js})

if name == ‘main’:
app.run_server()

2

Guys please help as i am stuck here badly. ]

Your help will be highly regarded.