Dashboard with DASH - Argument issues dcc.graph()

Question

I'm trying to create a dashboard in Pycharm using dash. Here is the error I keep receiving,

 html.Div(dcc.Graph(id='line-plot')),
TypeError: Graph() takes no arguments

And below is a snippet of my code where the error is being found (bottom of code). This code ran fine and I was about to populate the dashboard without receiving any errors inside IBM's python environment. I'm assuming I have to tweak something

   # TASK 3 - UPDATE LAYOUT COMPONENETS
# html.H1 tag for title  , style, and overall font size
# html.Div  & dcc.Input() tag to set inputs of the dashboard
# Update output componenent 2nd html.Div to layout the graph dcc.Graph()
app.layout = html.Div(children=[html.H1('Airline Performance Dashboard',
                                        style={'textAlign': 'center', 'color': '#503D36',
                                               'font-size': 40}),
                                html.Div(["Input Year: ", dcc.Input(id='input-year', value='2010',
                                                                    type='number',
                                                                    style={'height': '50px', 'font-size': 35}), ],
                                         style={'font-size': 40}),
                                html.Br(),
                                html.Br(),
                                html.Div(dcc.Graph(id='line-plot')),
                                ])

Here is the rest of the code,

# TASK 4 - ADD APPLICATION CALL BACK FUNCTION and outputs / inputs
# add callback decorator
@app.callback(Output(component_id='line-plot', component_property='figure'),
              Input(component_id='input-year', component_property='value'))
# Add computation to callback function and return graph
def get_graph(entered_year):
    # Select 2019 data
    df = airline_data[airline_data['Year'] == int(entered_year)]

    # Group the data by Month and compute average over arrival delay time.
    line_data = df.groupby('Month')['ArrDelay'].mean().reset_index()
    # TASK 5 - UPDATE CALL BACK FUNCTION go.Figure(data=) and update fig.update_layout()
    fig = go.Figure(
        data=go.Scatter(x=line_data['Month'], y=line_data['ArrDelay'], mode='lines', marker=dict(color='green')))
    fig.update_layout(title='Month vs Average Flight Delay Time', xaxis_title='Month', yaxis_title='ArrDelay')
    return fig


# Run the app
if __name__ == '__main__':
    app.run_server()

Its safe to say I need an adult.

Rob Raymond Rob Raymond · Accepted Answer · 2021-07-15T07:57:36

have added import and simulation of data frame
all other code runs without issue on plotly 5.1.0

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go
from jupyter_dash import JupyterDash
import numpy as np

app = JupyterDash(__name__)

# simulate data...
dr = pd.date_range("1-jan-2010", freq="W", periods=200)
airline_data = pd.DataFrame({"Year":dr.year, "Month":dr.month, "ArrDelay":np.random.uniform(2,5,len(dr))})

# TASK 3 - UPDATE LAYOUT COMPONENETS
# html.H1 tag for title  , style, and overall font size
# html.Div  & dcc.Input() tag to set inputs of the dashboard
# Update output componenent 2nd html.Div to layout the graph dcc.Graph()
app.layout = html.Div(children=[html.H1('Airline Performance Dashboard',
                                        style={'textAlign': 'center', 'color': '#503D36',
                                               'font-size': 40}),
                                html.Div(["Input Year: ", dcc.Input(id='input-year', value='2010',
                                                                    type='number',
                                                                    style={'height': '50px', 'font-size': 35}), ],
                                         style={'font-size': 40}),
                                html.Br(),
                                html.Br(),
                                html.Div(dcc.Graph(id='line-plot')),
                                ])

# TASK 4 - ADD APPLICATION CALL BACK FUNCTION and outputs / inputs
# add callback decorator
@app.callback(Output(component_id='line-plot', component_property='figure'),
              Input(component_id='input-year', component_property='value'))
# Add computation to callback function and return graph
def get_graph(entered_year):
    # Select 2019 data
    df = airline_data[airline_data['Year'] == int(entered_year)]

    # Group the data by Month and compute average over arrival delay time.
    line_data = df.groupby('Month')['ArrDelay'].mean().reset_index()
    # TASK 5 - UPDATE CALL BACK FUNCTION go.Figure(data=) and update fig.update_layout()
    fig = go.Figure(
        data=go.Scatter(x=line_data['Month'], y=line_data['ArrDelay'], mode='lines', marker=dict(color='green')))
    fig.update_layout(title='Month vs Average Flight Delay Time', xaxis_title='Month', yaxis_title='ArrDelay')
    return fig


app.run_server(mode="inline")

Dashboard with DASH - Argument issues dcc.graph()

1 Answers