python - Issue in creating bar graph on plotly dash

Question

CODE:

    app.layout=html.Div([
    html.Div('WORLD HAPPINESS REPORT',
            style={
                'textAlign':'center',
                'color':'#F197C0',
                'fontWeight':'bold',
                'fontSize':'50px',
                'fontFamily':'Sans-serif',
                'border':({"width":"2px", "color":"black"})
            }),
    html.P('''The World Happiness Report is an annual report on the state of global happiness
and is currently participated by 155 countries. ''',
           style={
                'textAlign':'justify-text',
                'color':'#B49FDC',
                'fontWeight':'bold',
                'fontSize':'15px',
                'fontFamily':'Sans-serif'
            }),
    #for dropdown
    html.Br(),
    dcc.Dropdown(id='select_year',
                options=[
                    {'label':'2015','value':2015},
                    {'label':'2016','value':2016},
                    {'label':'2017','value':2017},
                    {'label':'2018','value':2018},
                    {'label':'2019','value':2019},
                    {'label':'2020','value':2020},
                ],
                 multi=False,
                 value='2015',
                 style={'width': "40%"}
                 
                ), 
    
    dcc.Graph(id='the_graph',figure={})

])

@app.callback(
     Output(component_id='the_graph', component_property='figure'),
    [Input(component_id='select_year', component_property='value')] #this is for the argument of the func.written below.
)
def update_graph(option_selected):
    #print(option_slctd)
    #print(type(option_slctd))

    #container = "The year chosen by user was: {}".format(option_slctd)
    #if option_selected==2015:
        
    d1=data[data['Year']==option_selected]
    fig=go.Bar(
        x=df1['Country'],
        y=df1['Happiness Score']

        )
        
    return fig

I have to make a bar graph using plotly dash. But i am not getting the required output.I am not able to understand as to why the outcome is coming like that. The output that im getting is :

Can anyone please let me know what the issue is with the code ?

Answer 1

I think the reason you didn't get a graph is because you were missing go.Figure(). Since I don't have the same data you are using, I used the data used on the official website and modified the dropdown values to match the data. The environment I verified is JupyterLab, so there is some code about it, but please ignore it.

import dash
import dash_core_components as dcc
import dash_html_components as html
#from jupyter_dash import JupyterDash
from dash.dependencies import Input, Output, State
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd

data = px.data.gapminder()

#app = JupyterDash(__name__)
app = dash.Dash(__name__)

app.layout = html.Div([html.Div('WORLD HAPPINESS REPORT',
                                style={'textAlign':'center',
                                       'color':'#F197C0',
                                       'fontWeight':'bold',
                                       'fontSize':'50px',
                                       'fontFamily':'Sans-serif',
                                       'border':({"width":"2px", "color":"black"})
                                      }),
                       html.P('''The World Happiness Report is an annual report on the state of global happiness 
                       and is currently participated by 155 countries. ''',
                              style={'textAlign':'justify-text',
                                     'color':'#B49FDC','fontWeight':'bold',
                                     'fontSize':'15px',
                                     'fontFamily':'Sans-serif'}),#for dropdown
                       html.Br(),
                       dcc.Dropdown(id='select_year',
                                    options=[
                                        {'label':'1982','value':1982},
                                        {'label':'1987','value':1987},
                                        {'label':'1992','value':1992},
                                        {'label':'1997','value':1997},
                                        {'label':'2002','value':2002},
                                        {'label':'2007','value':2007},],
                                    multi=False,
                                    value='2015',
                                    style={'width': "40%"}),
                       dcc.Graph(id='the_graph',figure={})
])

@app.callback(
     Output(component_id='the_graph', component_property='figure'),
    [Input(component_id='select_year', component_property='value')] #this is for the argument of the func.written below.
)
def update_graph(option_selected):
    df1=data[data['year'] == option_selected]
    fig=go.Figure(data=[go.Bar(x=df1['country'], y=df1['lifeExp'])])
    return fig

if __name__ == "__main__":
    app.run_server()
    #app.run_server(mode='inline')