Null is not an object (evaluating 'n.layout')

Dash Python
1

I am developing dashboard using Dash Plotly and I am getting an error when I click tabs.

The error says " null is not an object (evaluating ‘n.layout’)

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)"

Can any one help me to solve this problem?

My code is found below.

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import numpy as np
from copy import copy
import dash_table
import json
import base64

import plotly.express as px

#Data
errors = pd.read_csv(r’/Users/kapital/Documents/ABCD/PM/errors.csv’)

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

app = dash.Dash(name, external_stylesheets=external_stylesheets)

first_graph = dcc.Graph(id=‘graph1’,style={‘borderBottom’: ‘thin lightgrey solid’,‘padding’: ‘10px 5px’})
#, animate = True

content_tab_1 = html.Div(children = [
html.Div(first_graph, style = {‘vertical-align’:‘center’, ‘horizontal-align’:‘center’})

],

style={‘width’: ‘87%’})

app.layout = html.Div([

dcc.Tabs(id='tabs-example', value='tab-1', children=[
    dcc.Tab(label='Tab one', value='tab-1',
                                children =[content_tab_1]),
    dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')

])

@app.callback(Output(‘graph1’, ‘figure’),
Input(‘tabs-example’, ‘value’))
def render_content(tab):
if tab == ‘tab-1’:

    err_count = pd.DataFrame(errors['errorID'].value_counts().reset_index().values, columns=["Error", "Count"])
    err_count = err_count.sort_index(axis = 0, ascending=True)
    fig = px.bar(err_count, x = 'Error', y = 'Count')
    return fig

    # return html.Div([
    #     html.H3('Tab content 1')
    # ])

if name == ‘main’:
app.run_server(debug=True)

2

Hi @kapital1

I’m not sure if that could be the problem but see that in your callback you are not adding any return for the if condition when it is not equal tab-1.

3

Hi @Eduardo True. It was problem of adding return statement in the callback I managed to solve it.

Just added the following at end of if…else statements.
else:
return {}

Worked fine.

4

Hi @kapital1

Nice it works :grinning:

1 Like