AttributeError: 'Div' object has no attribute 'keys'

sourav_7675 · October 18, 2019, 3:43am

Hi, I am new to plotly dash.

I am running the code below:

app = dash.Dash(
    __name__,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)
server = app.server

def build_banner(header,hd_subtitle):
    return html.Div(
        id="banner",
        className="banner",
        children=[
            html.Div(
                id="banner-text",
                children=[
                    html.H5(str(header)),
                    html.H6(str(hd_subtitle)),
                ],
            ),
            html.Div(
                id="banner-logo",
                children=[
                    #html.A([
                    #     html.Button(
                    #   id="learn-more-button", children="LEARN MORE", n_clicks=0
                    #),
                    #],href='https://www.google.com'),
                    html.Button(
                       id="learn-more-button", children="LEARN MORE", n_clicks=0
                    ),
                    #html.Button(
                    #    id="learn-more-button", children="LEARN MORE", n_clicks=0
                    #),
                    html.A([
                         html.Img(id="logo",src=app.get_asset_url("logo.png")),
                    ],href='https://www.google.com'),
                ],
            ),
        ],
    )

def generate_section_banner(title):
    return html.Div(className="section-banner", children=title)

def build_top_panel():
    return html.Div(
        id="top-section-container",
        className="row",
        children=[
            # Metrics summary
            html.Div(
                id="summary-lol1",
                className="six columns",
                children=[
                    generate_section_banner("Customer Base"),
                    dcc.Graph(id='histinst'),
                ],
            ),
            html.Div(
                id="summary-lol2",
                className="six columns",
                children=[
                    generate_section_banner("Service Visit Booking"),
                    dcc.Graph(id="histsr"),
                ],
            ),
        ],
    )

def build_tab():
    return [
        html.Div(
            id="status-container",
                    children=[
                        html.Div(id='none',children=[],style={'display': 'none'}),
                        html.Div(
                            id="graphs-container",
                            className="row",
                            children=[
                                build_top_panel(),
                                html.Br(),
                                #build_chart_panel()
                            ],
                        ),
                    ],
                ),
    ]

app.layout = html.Div(
    id="big-app-container",
    children = [
        
        build_banner("sky","Introducing Fluid Viewing"),
            
        html.Hr(),
        
        html.Div(
            id="app-container",
            children=[
                build_tab(),
            ],
        ),
        
    ],
)

per = df['master_mesh_olive_post_code_test.first_install_date'].dt.to_period("M")

@app.callback(
    [Output('histinst', 'figure')],
    [Input('none', 'children')]
)
def update_histogram_install(none):
    df_install = pd.DataFrame({'count' : df.groupby(per).size()}).reset_index()
    trace = go.Bar(x=df_install['master_mesh_olive_post_code_test.first_install_date'].astype(str), 
                   y=df_install['count'], hoverinfo="x")
    return {
        'data': trace,
        'layout': go.Layout(title='Customer Base Number',
                            hovermode="closest",
                            xaxis={'title': "Dates", 'titlefont': {'color': 'black', 'size': 14},
                                   'tickfont': {'size': 9, 'color': 'black'}},
                            yaxis={'title': "Number of Customers", 'titlefont': {'color': 'black', 'size': 14, },
                                   'tickfont': {'color': 'black'}})}

@app.callback(
    [Output('histsr', 'figure')],
    [Input('none', 'children')]
)
def update_histogram_service(none):
    df_service = df.groupby(per).agg({"master_mesh_olive_post_code_test.number_of_service_visit_booked": "sum"}).reset_index()
    trace = go.Bar(x=df_service['master_mesh_olive_post_code_test.first_install_date'].astype(str), 
                   y=df_service['master_mesh_olive_post_code_test.number_of_service_visit_booked'], hoverinfo="x")
    return {
        'data': trace,
        'layout': go.Layout(title='Service Booking',
                            hovermode="closest",
                            xaxis={'title': "Dates", 'titlefont': {'color': 'black', 'size': 14},
                                   'tickfont': {'size': 9, 'color': 'black'}},
                            yaxis={'title': "Number of Services Booked", 'titlefont': {'color': 'black', 'size': 14, },
                                   'tickfont': {'color': 'black'}})}

I keep getting the error:
106
107 @app.callback(
–> 108 [Output(‘histinst’, ‘figure’)],
109 )
110 def update_histogram_install():
…
AttributeError: ‘Div’ object has no attribute ‘keys’
Can someone please guide me on this one?
In place of df the dataframe any random value can be considered.

sjtrny · October 18, 2019, 3:54am

Not quite sure what the error is exactly since I can’t run your code (you haven’t defined df).

BUT you have two callbacks with a shared output Output('histinst', 'figure'). This is not supported by Dash.

sourav_7675 · October 18, 2019, 4:07am

@sjtrny…
I only have one output with Output(‘histinst’, ‘figure’) and the other one is Output(‘histisr’, ‘figure’).
In place of that df any random values can be used… as I have used now. But it still throws the same error.

app = dash.Dash(
    __name__,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)
server = app.server

def build_banner(header,hd_subtitle):
    return html.Div(
        id="banner",
        className="banner",
        children=[
            html.Div(
                id="banner-text",
                children=[
                    html.H5(str(header)),
                    html.H6(str(hd_subtitle)),
                ],
            ),
            html.Div(
                id="banner-logo",
                children=[
                    #html.A([
                    #     html.Button(
                    #   id="learn-more-button", children="LEARN MORE", n_clicks=0
                    #),
                    #],href='https://www.google.com'),
                    html.Button(
                       id="learn-more-button", children="LEARN MORE", n_clicks=0
                    ),
                    #html.Button(
                    #    id="learn-more-button", children="LEARN MORE", n_clicks=0
                    #),
                    html.A([
                         html.Img(id="logo",src=app.get_asset_url("logo.png")),
                    ],href='https://www.google.com'),
                ],
            ),
        ],
    )

def generate_section_banner(title):
    return html.Div(className="section-banner", children=title)

def build_top_panel():
    return html.Div(
        id="top-section-container",
        className="row",
        children=[
            # Metrics summary
            html.Div(
                id="summary-lol1",
                className="six columns",
                children=[
                    generate_section_banner("Customer Base"),
                    dcc.Graph(id='histinst'),
                ],
            ),
            html.Div(
                id="summary-lol2",
                className="six columns",
                children=[
                    generate_section_banner("Service Visit Booking"),
                    dcc.Graph(id="histsr"),
                ],
            ),
        ],
    )

def build_tab():
    return [
        html.Div(
            id="status-container",
                    children=[
                        html.Div(id='none',children=[],style={'display': 'none'}),
                        html.Div(
                            id="graphs-container",
                            className="row",
                            children=[
                                build_top_panel(),
                                html.Br(),
                                #build_chart_panel()
                            ],
                        ),
                    ],
                ),
    ]

app.layout = html.Div(
    id="big-app-container",
    children = [
        
        build_banner("sky","Introducing Fluid Viewing"),
            
        html.Hr(),
        
        html.Div(
            id="app-container",
            children=[
                build_tab(),
            ],
        ),
        
    ],
)


@app.callback(
    [Output('histinst', 'figure')],
    [Input('none', 'children')]
)
def update_histogram_install(none):
    trace = go.Bar(x=[1,2,3,4,5], 
                   y=[1,6,7,2,4], hoverinfo="x")
    return {
        'data': trace,
        'layout': go.Layout(title='Customer Base Number',
                            hovermode="closest",
                            xaxis={'title': "Dates", 'titlefont': {'color': 'black', 'size': 14},
                                   'tickfont': {'size': 9, 'color': 'black'}},
                            yaxis={'title': "Number of Customers", 'titlefont': {'color': 'black', 'size': 14, },
                                   'tickfont': {'color': 'black'}})}

@app.callback(
    [Output('histsr', 'figure')],
    [Input('none', 'children')]
)
def update_histogram_service(none):
    trace = go.Bar(x=[1,2,3,4,5], 
                   y=[1,6,7,2,4], hoverinfo="x")
    return {
        'data': trace,
        'layout': go.Layout(title='Service Booking',
                            hovermode="closest",
                            xaxis={'title': "Dates", 'titlefont': {'color': 'black', 'size': 14},
                                   'tickfont': {'size': 9, 'color': 'black'}},
                            yaxis={'title': "Number of Services Booked", 'titlefont': {'color': 'black', 'size': 14, },
                                   'tickfont': {'color': 'black'}})}

sjtrny · October 18, 2019, 4:18am

Sorry misread your code. I get a different error to you:

dash.exceptions.NonExistentIdException: 
                            Attempting to assign a callback to the
                            component with the id "histinst" but no
                            components with id "histinst" exist in the
                            app's layout.


                            Here is a list of IDs in layout:
['banner', 'banner-text', 'banner-logo', 'learn-more-button', 'logo', 'app-container', 'big-app-container']

Which is due to how you are constructing your layout here

children=[
                build_tab(),
            ]

This should just be children = build_tab(), since the build_tab function returns a list.

sourav_7675 · October 18, 2019, 9:17am

@sjtrny
Thank you. But it still doesn’t solve my problem.
Let me give you the entire piece of code.

app = dash.Dash(
    __name__,
    meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
)
server = app.server
def build_banner(header,hd_subtitle):
    return html.Div(
        id="banner",
        className="banner",
        children=[
            html.Div(
                id="banner-text",
                children=[
                    html.H5(str(header)),
                    html.H6(str(hd_subtitle)),
                ],
            ),
            html.Div(
                id="banner-logo",
                children=[
                    html.Button(
                       id="learn-more-button", children="LEARN MORE", n_clicks=0
                    ),
                    html.A([
                         html.Img(id="logo",src=app.get_asset_url("logo.png")),
                    ],href='https://www.accenture.com/in-en'),
                ],
            ),
        ],
    )
def generate_section_banner(title):
    return html.Div(className="section-banner", children=title)
def build_tabs():
    return html.Div(
        id="tabs",
        className="tabs",
        children=[
            dcc.Tabs(
                id="app-tabs",
                value="tab2",
                className="custom-tabs",
                children=[
                    dcc.Tab(
                        id="Specs-tab",
                        label="Control Tower",
                        value="tab1",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),
                    dcc.Tab(
                        id="Control-chart-tab",
                        label="Business Metric",
                        value="tab2",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),
                ],
            )
        ],
    )
def build_tab_1():
    return [
        html.Div(
            id="set-specs-intro-container",
            children=[
                ###Any stock image
                html.Img(id="Landing-page",src=app.get_asset_url("ct.jpg"),
                        style={
                            'height': '100%',
                            'width': '100%'
                        }
                        )
            ],
        ),
    ]
def build_top_panel():
    return html.Div(
        id="top-section-container",
        className="row",
        children=[
            # Metrics summary
            html.Div(
                id="summary-lol1",
                className="six columns",
                children=[
                    generate_section_banner("Customer Base"),
                    dcc.Graph(id='histinst',style={'width': '67.5vh', 'height': '45vh'}),
                ],
            ),
        ],
    )

def build_chart_panel():
    return html.Div(
        id="control-chart-container",
        className="twelve columns",
        children=[
            # Piechart
            html.Div(
                id="ooc-piechart-outer-1",
                className="three columns",
                children=[
                    generate_section_banner("Single vs Multi Screen Users"),
                    dcc.Graph(id="pie-sm"),
                ],
            ),
        ],
    )
def build_tab_2():
    return [
        html.Div(
            id="status-container",
                    children=[
                        html.Div(id='none',children=[],style={'display': 'none'}),
                        html.Div(
                            id="graphs-container",
                            className="row",
                            children=[
                                build_top_panel(),
                                html.Br(),
                                build_chart_panel()
                            ],
                        ),
                    ],
                ),
    ]
app.layout = html.Div(
    id="big-app-container",
    children = [
        
        build_banner("sky","Introducing Fluid Viewing"),
            
        html.Hr(),
        
        html.Div(
            id="app-container",
            children=[
               build_tabs(),
               # Main app
               html.Div(id="main-app-content"),
            ],
            #children=build_tab_2()
        ),
        
    ],
)

@app.callback(Output("histinst", "selectedData"), [Input("histinst", "clickData")])
def update_selected_data(clickData):
    if clickData:
        return {"points": []}

@app.callback(
    Output("histinst", "figure"),
    [Input('none', 'children')]
)
def update_histinst(none):
    xVal = [1,2,3,4,5]
    yVal = [1,6,7,2,4]
    layout = go.Layout(
        bargap=0.01,
        bargroupgap=0,
        barmode="group",
        margin=go.layout.Margin(l=10, r=0, t=0, b=50),
        showlegend=False,
        plot_bgcolor="#323130",
        paper_bgcolor="#323130",
        dragmode="select",
        font=dict(color="white"),
        xaxis=dict(
            showgrid=False,
        ),
        yaxis=dict(
            showticklabels=False,
            showgrid=False,
            zeroline=False,
        ),
    )

    return go.Figure(
        data=[
            go.Bar(x=xVal, y=yVal,
                   hoverinfo="x"),
        ],
        layout=layout,
    )

@app.callback(
    [Output("main-app-content", "children")],
    [Input("app-tabs", "value")],
)
def render_tab_content(tab_switch):
    if tab_switch == "tab1":
        return build_tab_1()
    else:
        return build_tab_2()

The idea is to have 2 tabs. First tab with an image and the other one with a bar chart

sjtrny · October 18, 2019, 9:32pm

It’s still the same error

sourav_7675 · October 22, 2019, 3:36am

Thanks. Your error actually makes more sense than mine. I’ll try it again. If I get a solution I’ll upload it.

chriddyp · October 22, 2019, 3:56am

Try upgrading Dash to get a better error message. There was a recent bug in Dash that “hid” the error message behind this AttributeError: 'Div' object has no attribute 'keys' message.

Topic		Replies	Views
Getting "AttributeError: 'Div' object has no attribute 'keys'" when I try running another callback Dash Python	1	2049	July 3, 2019
Chained callbacks in tabs cause error msg. 'Div' object has no attribute 'keys' Dash Python	1	670	July 25, 2019
AttributeError: 'list' object has no attribute 'Div' Dash Python	4	2304	October 20, 2021
"AttributeError: 'Div' object has no attribute 'keys'" when running second callback Dash Python	2	4756	June 25, 2019
Dashboard with two different tabs Dash Python	3	2199	July 8, 2019

AttributeError: 'Div' object has no attribute 'keys'

Related topics