✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

My graph is only plotting the first trace in my list

Greetings, I want my graph with the id output-graph in html.Div() to dynamically appear when a users selects a value from my dropdown menu. Everything works except for my function callback, for some reason it only plots the first value entered in the dropdown menu by the user. Users can chain multiple inputs in the same dropdown menu, I’m surprised that this code doesn’t work for this use case, when it worked smoothly before when I had the dcc.Graph inside the html.layout and not part of the return function.

Here’s my layout

body = html.Div(
    [dbc.Jumbotron(
    [
        dbc.Container(dcc.Dropdown(id="dynamic-dropdown", options=options, multi=True, placeholder="Enter Symbols of Interest"),
 
        fluid=True
        )

    ], 
     style = {'background-color': '#68d984'}, fluid=True,
)
   
    , dbc.Row(dbc.Col(html.Div(id='output-graph'),lg=8, md=11, xs=12),justify="center")

    , html.Div(style={"width":"100%", "height":'25px'})

    , dbc.Row([
            dbc.Col(children=[html.Div(children =[ 
                                                  html.P("Here's a tip hover over the first row of each table below for a datapoint defenition", style={'text-align':'center','font-size':'11px','color': '#A2A2A2'})], style={'background-color': '#e6e6e6', 'padding':'3px'})],lg=4, md=4, xs=10)], justify="center", align="center")


    , dbc.Row([
            dbc.Col(children=[html.H4('Quick Facts:', style={'color':'#474747','margin-left':'10px'}), 
                              html.P('General information', style={'color': '#A2A2A2','margin-left':'10px'}), 
                              html.Div(id='table-stats', style={'padding': '16px'})],lg=4, md=11, xs=12)

          , dbc.Col(children=[html.H4('Historical Return-rates:', style={'color':'#474747','margin-left':'10px'}),
                              html.P('Equity growth based on time periods', style={'color':'#A2A2A2','margin-left':'10px'}), 
                              html.Div(id='table-change', style={'padding': '16px'})],lg=7, md=11, xs=12)
              ], justify="center", align="center")
    , html.Div(style={"width":"100%", "height":'25px'})

     , dbc.Row(dbc.Col(children=[html.H4('Advanced Stats:', style={'color':'#474747','margin-left':'10px'}), 
                                html.P('"Behind-the-scene" metrics that measures company preformance', style={'color': '#A2A2A2','margin-left':'10px'}), 
                                html.Div(id='adv-table-stats',style={'padding': '16px'})],lg=11, md=11, xs=12), justify="center",  align="center")
    , html.Div(style={"width":"100%", "height":'25px'})
    , dbc.Row([
            dbc.Col(children=[html.H4('Next Financial Report:', style={'color':'#474747','margin-left':'10px','margin-top':'40px'}), 
                                html.P('Quarterly or Yearly reports that influence the prices of equities', style={'color': '#A2A2A2','margin-left':'10px'}), 
                                html.Div(id='next-earnings',style={'margin':'auto','padding': '16px', 'width':'100%'})],lg=4, md=4, xs=12)

           , dbc.Col(children=[html.H4('Dividend Periods:', style={'color':'#474747','margin-left':'10px', 'margin-top':'40px'}), 
                                html.P("Check for dividend eligibility", style={'color': '#A2A2A2','margin-left':'10px'}), 
                                html.Div(id='dividend-dates',style={'margin':'auto','padding': '16px', 'width':'100%'})],lg=4, md=4, xs=12)
            ], justify="center") , 
       ])

Here’s my callback and function

@app.callback(
    dash.dependencies.Output('output-graph', 'children'),
    [dash.dependencies.Input('dynamic-dropdown', 'value')])

def tickers(symbols):
    conn.rollback()
    if symbols == None:
        raise PreventUpdate
        conn.rollback()
    elif symbols == None:
        raise PreventUpdate
        conn.rollback()
    else:
        stock_info = {}
        d = {} #dates
        p = {} #prices

        sym_ids = tuple([id for id in symbols])

        stock_info = {}
        stock_info = get_dict_resultset("SELECT symbol, date, close FROM security_price WHERE security_price.symbol IN %s;", [sym_ids])

        stock_data_by_symbol = defaultdict(list)
        for entry in stock_info:
            symbol = entry['symbol']
            stock_data_by_symbol[symbol].append(entry)

        trace = []
        for stock in symbols:
            d[stock] = [rec['date'] for rec in stock_data_by_symbol[stock]] 
            p[stock] = [rec['close'] for rec in stock_data_by_symbol[stock]]
            trace.append(go.Scattergl(x=d[stock],
                                 y=p[stock],
                                 mode='lines',
                                 text = d[stock],
                                 opacity=0.7,
                                 name=stock,
                                 textposition='bottom center'))


        traces = [trace]
        data = [val for sublist in traces for val in sublist]
        figure = {'data': data,
                  'layout': go.Layout(
                      colorway=["#5E0DAC", '#FF4F00', '#375CB1', '#FF7400', '#FFF400', '#FF0056'],
                      paper_bgcolor='rgba(0, 0, 0, 0)',
                      plot_bgcolor='rgba(0, 0, 0, 0)',
                      margin={'b': 15},
                      hovermode='x',
                      autosize=True,
                      title={'text': 'Historical Price Graph', 'font': {'color': 'black'}, 'x': 0.5},
                      
                  ),

                  }
        
        

        return dcc.Graph(id='output-graph', figure=figure, config={'displayModeBar': False}, animate=True)

Any ideas on what the issue might be?