Getting Error:dash.exceptions.NoLayoutException: The layout was `None` at the time that `run_server` was called. Make sure to set the `layout` attribute of your application before running the server

Dash Python
1

Hi, I am trying to create a bubble graph using mapbox but I get an error after run the code.

This is the error:
dash.exceptions.NoLayoutException: The layout was None at the time that run_server was called. Make sure to set the layout attribute of your application before running the server.

This is my code:

import base64
import io
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
from dash.exceptions import PreventUpdate
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True
token = 'xxxx' #The token provide by mapbox

layout = html.Div([
    dcc.Upload(
        id='datatable-upload',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%', 'height': '60px', 'lineHeight': '60px',
            'borderWidth': '1px', 'borderStyle': 'dashed',
            'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px'
        },
    ),
    dash_table.DataTable(id='datatable-upload-container'),
    html.Div(dcc.Graph(id="my-graph"))
])


def parse_contents(contents, filename):
    content_type, content_string = contents.split(',')
    decoded = base64.b64decode(content_string)
    if 'csv' in filename:
        # Assume that the user uploaded a CSV file
        return pd.read_csv(
            io.StringIO(decoded.decode('utf-8')))
    elif 'xls' in filename:
        # Assume that the user uploaded an excel file
        return pd.read_excel(io.BytesIO(decoded))


@app.callback(Output('data_selector1', 'options'),
              [Input('datatable-upload-container', 'data')])
def update_dropdown(rows):
    if rows is None:
        raise PreventUpdate
    df = pd.DataFrame(rows)
    print('updating menus')
    columns = df.columns
    col_labels = [{'label': k, 'value': k} for k in columns]
    return col_labels


@app.callback(Output('datatable-upload-container', 'data'),
              [Input('datatable-upload', 'contents')],
              [State('datatable-upload', 'filename')])
def update_output(contents, filename):
    if contents is None:
        return [{}]
    df = parse_contents(contents, filename)
    data = df.to_dict('records')
    return data


@app.callback(Output("my-graph", "figure"),
             [Input('data_selector1', 'value')],
             [State('datatable-upload-container', 'data')])
def update_figure(rows):
        df= pd.DataFrame(rows)
        trace= go.Scattermapbox(lat=df["lat"], lon=df["long"], hover_name="City", hover_data=["State", "Population"],
                        mode='markers', marker={'symbol': "airport", 'size': "Population"})
        return {"data": trace,
                "layout": go.Layout(autosize=True, hovermode='closest', showlegend=False, height=700,  color_discrete_sequence=["fuchsia"],
                                    mapbox={'accesstoken': token, 'zoom': 3})}

if __name__ == '__main__':
    app.run_server(debug=True)
2

@Yuechean

You have to assign your layout to the layout attribute of the app app.layout, so your layout code should look like this:

app.layout = html.Div([
    dcc.Upload(
        id='datatable-upload',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%', 'height': '60px', 'lineHeight': '60px',
            'borderWidth': '1px', 'borderStyle': 'dashed',
            'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px'
        },
    ),
    dash_table.DataTable(id='datatable-upload-container'),
    html.Div(dcc.Graph(id="my-graph"))
])
1 Like
3

Thank you! I am still learning so much about both Plotly and Dash and this forum is a great resource to have.