python - Null is not an object (evaluating ‘n.layout’) in Dash Plotly

Question

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)

question from:https://stackoverflow.com/questions/65844640/null-is-not-an-object-evaluating-n-layout-in-dash-plotly

Answer 1

The problem is that your callback function does not have an else to its conditional statement. When the user selects the second tab, that callback has no alternate path, and returns None, which gives you the error you see. I did this to fix it, but you'll probably want something more:

@app.callback(Output('graph1', 'figure'),
              Input('tabs-example', 'value'))
def render_content(tab):
    if tab == 'tab-1':
        err_count = pd.DataFrame.from_dict(dict(
            Error=[1, 2, 3, ],
            Count=[5, 6, 7])
        )
        err_count = err_count.sort_index(axis=0, ascending=True)
        fig = px.bar(err_count, x='Error', y='Count')
        return fig
    else:
        return {}