# Error Loading Layout!

**URL:** <https://community.plotly.com/t/error-loading-layout/77228>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [July 27, 2023, 3:00pm UTC](https://community.plotly.com/t/error-loading-layout/77228 "2023-07-27T15:00:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ethanliewsh](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@ethanliewsh](https://community.plotly.com/u/ethanliewsh)\
**Post date:** [July 27, 2023, 3:00pm UTC](https://community.plotly.com/t/error-loading-layout/77228/1 "2023-07-27T15:00:05Z")

</div>

```auto
import pandas as pd
import plotly.express as px # (version 4.7.0 or higher)
import plotly.graph_objects as go
from datetime import datetime
import dash
from dash import Dash, dcc, html, Input, Output # pip install dash (version 2.0.0 or higher)

def get_key_from_value(dictionary, target_value):
    for key, value in dictionary.items():
        if value == target_value:
            return key
    return None

app = Dash( __name__ )

# -- Import and clean data (importing csv into pandas)
df = pd.read_excel("FAC Hourly Data.xlsx")

df['FAC hourly data_start date_dt'] = pd.to_datetime(df['FAC hourly data_start date_dt'], dayfirst=True)
df['weekday'] = df["FAC hourly data_start date_dt"].dt.weekday
print(df)

timenow = datetime.now().hour
if timenow > 18:
    timenow = 18
elif timenow < 9:
    timenow = 9
weekday = datetime.now().weekday

# ------------------------------------------------------------------------------
# App layout
app.layout = html.Div(
    [
        html.H1("Canteen Data Ngee Ann Polytechnic", style={'text-align': 'center'}),
        html.Label("Hour:",style={'fontSize':30, 'textAlign':'center'}),

        dcc.Dropdown(id="slct_hour",
                    
                    options=[
                        {"label": "9am", "value": 9},
                        {"label": "10am", "value": 10},
                        {"label": "11am", "value": 11},
                        {"label": "12pm", "value": 12},
                        {"label": "1pm", "value": 13},
                        {"label": "2pm", "value": 14},
                        {"label": "3pm", "value": 15},
                        {"label": "4pm", "value": 16},
                        {"label": "5pm", "value": 17},
                        {"label": "6pm", "value": 18}],
                    multi=False,
                    value = timenow,
                    
                    
                    
                    style={'width': "30%","display":"flex"}
                    ),
        html.Label("Day:",style={'fontSize':30, 'textAlign':'center'}),
        dcc.Dropdown(id="slct_weekday",
                    
                    options=[
                        {"label": "Mon", "value": 0},
                        {"label": "Tue", "value": 1},
                        {"label": "Wed", "value": 2},
                        {"label": "Thu", "value": 3},
                        {"label": "Fri", "value": 4}],
                        
                    multi=False,
                    value = weekday,
                    
                    
                    
                    style={'width': "30%","display":"flex"}
                    ),

        html.Div(id='output_container', children=[]),
        html.Br()

        

])

# ------------------------------------------------------------------------------
# # Connect the Plotly graphs with Dash Components
@app.callback(
    [Output(component_id='output_container', component_property='children'),
     Output(component_id='canteenchart', component_property='figure')],
    [Input('slct_hour','value'),Input('slct_weekday','value')])
   
def update_graph(selected_hour,selected_weekday):

    

    container = "The hour chosen by the user was: {}".format(selected_hour)

    dff = df.copy()
    dff = dff[dff["FAC hourly data_Hour"] == selected_hour]
    dff = dff[dff["weekday"] == selected_weekday]
    fig = px.bar(

        dff,
        x="FAC hourly data_Hour",
        y="%perc",
        color="FAC hourly data_Blk",
        barmode="group", # This will display bars side by side for each hour
        labels={"FAC hourly data_Hour": "Hour of the Day", "%perc": "Percentage Filled"},
        title="Percentage of Canteens Filled per Hour",
    )
    
    

    return[dcc.Graph(figure=fig)]

# ------------------------------------------------------------------------------
if __name__ == ' __main__':
    app.run_server(debug=False)

```

Hey guys the above shows my code for my dash web app, however I keep getting the error Error loading layout on my webpage. Any feedback would be appreciated. Thanks a bunch!

here is the link to my dataset : [Loading Google Sheets](https://docs.google.com/spreadsheets/d/1wqin5jHFJwDhFDj364C-Mqr95AkY364y/edit?usp=sharing&ouid=108432376042548294635&rtpof=true&sd=true)

1. 
  - List item

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 27, 2023, 3:05pm UTC](https://community.plotly.com/t/error-loading-layout/77228/2 "2023-07-27T15:05:27Z")

</div>

Hello @ethanliewsh,

Welcome to the community!

Error loading layout means something about your code isnt working right.

You should change your `debug=False` to `debug=True`, this might help you figure out where the layout is running into an issue. 🙂

---

<div class="post-metadata">

**Author:** ![ethanliewsh](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@ethanliewsh](https://community.plotly.com/u/ethanliewsh)\
**Post date:** [July 27, 2023, 5:05pm UTC](https://community.plotly.com/t/error-loading-layout/77228/3 "2023-07-27T17:05:45Z")

</div>

[2023-07-27 23:37:11,981] ERROR in app: Exception on /\_dash-layout [GET]  
Traceback (most recent call last):  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\flask\app.py”, line 2529, in wsgi\_app  
response = self.full\_dispatch\_request()  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\flask\app.py”, line 1825, in full\_dispatch\_request  
rv = self.handle\_user\_exception(e)  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\flask\app.py”, line 1823, in full\_dispatch\_request  
rv = self.dispatch\_request()  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\flask\app.py”, line 1799, in dispatch\_request  
return self.ensure\_sync(self.view\_functions[rule.endpoint])(\*\*view\_args)  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\dash\dash.py”, line 690, in serve\_layout  
to\_json(layout),  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\dash\_utils.py”, line 23, in to\_json  
return to\_json\_plotly(value)  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\plotly\io\_json.py”, line 143, in to\_json\_plotly  
json.dumps(plotly\_object, cls=PlotlyJSONEncoder, \*\*opts), _swap\_json  
File "C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10\_3.10.3056.0\_x64\_\_qbz5n2kfra8p0\lib\json\_init_.py", line 238, in dumps  
\*\*kw).encode(obj)  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\_plotly\_utils\utils.py”, line 59, in encode  
encoded\_o = super(PlotlyJSONEncoder, self).encode(o)  
File “C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10\_3.10.3056.0\_x64\_\_qbz5n2kfra8p0\lib\json\encoder.py”, line 199, in encode  
chunks = self.iterencode(o, \_one\_shot=True)  
File “C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10\_3.10.3056.0\_x64\_\_qbz5n2kfra8p0\lib\json\encoder.py”, line 257, in iterencode  
return \_iterencode(o, 0)  
File “C:\Users\ethan\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.10\_qbz5n2kfra8p0\LocalCache\local-packages\Python310\site-packages\_plotly\_utils\utils.py”, line 136, in default  
return \_json.JSONEncoder.default(self, obj)  
File “C:\Program Files\WindowsApps\PythonSoftwareFoundation.Python.3.10\_3.10.3056.0\_x64\_\_qbz5n2kfra8p0\lib\json\encoder.py”, line 179, in default  
raise TypeError(f’Object of type {o. **class**. **name** } ’  
TypeError: Object of type builtin\_function\_or\_method is not JSON serializable  
127.0.0.1 - - [27/Jul/2023 23:37:11] “GET /\_dash-layout HTTP/1.1” 500 -

Sorry im new to python and debugging in general, any ideas what is wrong with my code?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 27, 2023, 5:23pm UTC](https://community.plotly.com/t/error-loading-layout/77228/4 "2023-07-27T17:23:38Z")

</div>

Hi @ethanliewsh

The important part of this error message is this line:

raise TypeError(f’Object of type {o. **class**. **name** } ’  
TypeError: Object of type builtin\_function\_or\_method is not JSON serializable

So this means that something is being passed that cannot be displayed in the browser

The problem is in this dropdown:

```auto
                 dcc.Dropdown(id="slct_weekday",

                     options=[
                         {"label": "Mon", "value": 0},
                         {"label": "Tue", "value": 1},
                         {"label": "Wed", "value": 2},
                         {"label": "Thu", "value": 3},
                         {"label": "Fri", "value": 4}],

                     multi=False,
                     value=weekday,

                     style={'width': "30%", "display": "flex"}
                     ),

```

you have weekday defined like this:

```auto
weekday = datetime.now().weekday

```

If you do add

```auto
print(weekday)

```

You will see that it is the class:

> \< built-in method weekday of datetime.datetime object at 0x7efccfff0cc0\>

If you change it to this it will work:

```auto
weekday = datetime.now().weekday()

```

---

<div class="post-metadata">

**Author:** ![ethanliewsh](https://avatars.discourse-cdn.com/v4/letter/e/d9b06d/32.png) [@ethanliewsh](https://community.plotly.com/u/ethanliewsh)\
**Post date:** [July 28, 2023, 4:04am UTC](https://community.plotly.com/t/error-loading-layout/77228/5 "2023-07-28T04:04:33Z")

</div>

Thanks a bunch it worked!