Add a piechart to my dashboard

Dash Python
1

I am pretty new to Dash - Plotly and I am trying to develop a live twitter sentiment dashboard. I have a graph for live twitter sentiment and a search bar where a user can type in a term and see that term’s live sentiment. I am now trying to add a piechart of the total sentiment/per term sentiment (i.e. the sentiment for “covid”) below the initial graph.

The data for the piechart is being queried from a MySql DB on AWS RDS whereas for the live graph being queried in SQLite since Heroku auto deletes that every 24 hours.

This is my app.layout

app.layout = html.Div(
    children=[
        html.Div(className='row',
                 children=[
                     html.Div(className='four columns div-user-controls',
                              children=[
                                  html.H2('Twitter Sentiment Dashboard'),
                                  html.P('Visulaizing live twitter sentiment with Plotly - Dash.'),
                                  html.P(
                                      'Type a term in the search box below that you would like to see the sentiment from.'),
                                  html.Div(
                                      className='div-for-search',
                                      children=[
                                          dcc.Input(
                                              id='sentiment_term',
                                              placeholder='Enter a term...',
                                              type='text',
                                              value='',
                                              className='search'
                                          ),

                                      ],
                                      style={'color': ' #1E1E1E'})
                              ]
                              ),
                     html.Div(className='eight columns div-for-chars bg-grey',
                              children=[
                                  dcc.Graph(id='live-graph', config={'displayModeBar': False}, animate=False),
                                  dcc.Interval(
                                      id='graph-update',
                                      interval=1 * 1000
                                  ),
                                  dcc.Graph(id='pie'),
                                  dcc.Interval(
                                      id='pie-update',
                                      interval=1 * 1000
                                  )

                              ])
                 ])
    ]
)

This is my function for my piechart

@app.callback(Output('pie', 'figure'),
              [Input(component_id='sentiment_term', component_property='value')],
              events=[Event('pie-update', 'interval')])
def update_pie(sentiment_term):
    try:

        db_connection = sql.connect(host=database_endpoint_url, database=database_name, user=database_user,
                                    password=database_password)
        db_cursor = db_connection.cursor()
        df = pd.read_sql("SELECT * FROM tweets WHERE text LIKE ?", con=db_connection,
                         params=('%' + sentiment_term + '%',))

        sentiments = df['sentiment'].tolist()

        positive = 0
        neutral = 0
        negative = 0

        for sentiment in sentiments:
            sentiment = float(sentiment)
            if sentiment < -0.2:
                negative += 1
            if sentiment > 0.2:
                positive += 1
            else:
                neutral += 1

        values = [positive, negative, neutral]
        labels = ['Positive', 'Negative', 'Mixed']


        trace = go.Pie(labels=labels, values=values,
                       hoverinfo='label+percent', textinfo='value',
                       textfont=dict(size=20, color=app_colors['text']),
                       marker=dict(
                           line=dict(color=app_colors['background'], width=2)))

        return {"data": [trace], 'layout': go.Layout(
            font={'color': app_colors['text']},
            plot_bgcolor=app_colors['background'],
            paper_bgcolor=app_colors['background'],
            showlegend=True)}

What I am getting is white x/y chart with no values where my piechart should be. Any idea why I am not getting my piechart? Also I know that Events is deprecated just the tutorial I was following had Events and everything worked, once I changed to solely Input there were some bugs.