Getting an Error Using Dash for Figure as Invalid argument `figure.layout` passed into Graph, Expected `object`. Was supplied type `array`

Dash Python
1

I am trying a code to plot some data and I am thinking, I am doing it right. But not sure why getting a very peculiar message ( plotly 3.8.1 and dash 0.42)

The error message I am getting is :

Invalid argument figure.layout passed into Graph with ID “graph-with-slider”. Expected object. Was supplied type array.

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
#
app = dash.Dash(name, external_stylesheets = external_stylesheets)
server = app.server

app.config[‘suppress_callback_exceptions’] = True
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

#

app.layout = html.Div([
html.Div([
html.H1(‘Testing Phase’, style = {‘text-align’: ‘center’}),

                html.H5('Enter ID'),
                dcc.Dropdown(
                    id = 'id',
                    style = {'width': '250px'},
                    options = [
                        {'label': 'AA', 'value': 'AA'},
                        {'label': 'AC', 'value': 'AC'},
                        {'label': 'UQ', 'value': 'UQ'},
                        {'label': 'NT', 'value': 'NT'},
                        {'label': 'PQ', 'value': 'PQ'}],
                    value = 'AA'
                ),

                html.H5('Enter Zone Yield Item'),
                dcc.Dropdown(
                    id = 'mz',
                    style = {'width': '200px'},
                    options = [
                        {'label': 'E1', 'value': 'E1'},
                        {'label': 'E2', 'value': 'E2'},
                        {'label': 'E3', 'value': 'E3'},
                        {'label': 'E4', 'value': 'E4'},
                        {'label': 'E5', 'value': 'E5'},
                        {'label': 'E6', 'value': 'E6'}],
                    value = 'E1'
                ),
    

                html.Br(),
                html.Br(),

                html.Button(
                    id = 'submit',
                    n_clicks = 0,
                    children = 'Submit'

                ),

                html.Br(),
                html.Br(),

                   html.Div([

                    dcc.Graph(
                        id='mygraph'
                    ),

                ]),

                html.Br(),
                html.Br(),

            ])
        ])

    ])

@app.callback(Output(‘mygraph’, ‘figure’),
[Input(‘submit’, ‘n_clicks’)],
[State(‘pid’, ‘value’), State(‘mz’, ‘value’)])])
def update_figure(n_clicks, pid, zone):

        mydf = SomeFuncFunc(id, zone)

        fit_data = mydf[0]

        l_col = fit_data.columns[2]

        z_col = fit_data.columns[3]  

        z2_col = fit_data.columns[4]

        l1_v = str(l_col)
        z1_v = str(z_col)


        print("Starting Trace")

        fits = []

        fits.append(go.Scatter(
            x = fit_data[l_col],
            y = fit_data[z_col],
            mode = 'markers',
            opacity = 0.9,
            marker = {
                'size': 20, 'symbol': "hexagon", "color": "orange",
                'line': {'width': 0.5, 'color': 'white'}
            },
            name = z1_v + "_" + "Plot",
        )),

        fits.append(go.Scatter(
             x = fit_data[l_col],
             y = fit_data[z2_col],
            mode = 'markers',
            opacity = 0.9,
            marker = {
                'size': 20, 'symbol': "diamond-open-dot", "color": "blue",
                'line': {'width': 0.9, 'color': 'red'}
            },
            name = z1_v + "_" + "Fit",
        )),

        mylayout = go.Layout(
             width = 800,
             height = 500,
            xaxis = {'title': 'X axis'},
            yaxis = {'title': 'Y axis'}
            margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
            legend = {'x': 0, 'y': 1},
            hovermode = 'closest'
        ),
        fig = {'data':  fits, 'layout':mylayout}

        return fig

if name == ‘main’:

app.run_server(debug = True, port=8053)  #
#input('')

The error details:

(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.)Error: Invalid argument figure.layout passed into Graph with ID “graphid”. Expected object . Was supplied type array . at propTypeErrorHandler (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=0.23.0&m=1557158783:40947:5)

at CheckedComponent (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/dash_renderer.dev.js?v=0.23.0&m=1557158783:37306:9)

at Td (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:82:9)

at be (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:91:477)

at hi (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:104:140)

at Qg (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:144:287)

at Rg (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:145:166)

at Sc (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:158:109)

at Z (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:156:492)

at Kc (http://127.0.0.1:8053/_dash-component-suites/dash_renderer/react-dom@16.8.6.min.js?v=0.23.0&m=1557158783:155:69)

2

you have a trailing comma after go.Layout, which is making it an array instead of an object.

3 Likes
3

Wonderful!! You are an expert!!!
Thanks. It worked!

4

layout = html.Div([
navbar,
dbc.Container([
html.H4(title, id = “title”, className=“text-center mt-5 mb-4”, style={“color”:“white”}),
html.Div([
deuc.PMSComponent(id = ‘pms’, value=data),
], id=“Pmswrapper”),

    dbc.Row([
        html.Button('Get', id='get', n_clicks=0, style={'visible':True}),
    ]),
    
    dbc.Row([
        # educ.PMSComponent(id = 'pms')
    ], id='getOut'),
     dbc.Row([
        # educ.PMSComponent(id = 'pms')
    ], id='addOut'),
])

])

@app.callback(Output(‘Pmswrapper’, ‘children’),
[Input(‘get’, ‘n_clicks’)]
)
def get(n_clicks):
result = get_girl_pms(current_user.id)
row = result.fetchall()
result.close()
print(type(row), row)
return deuc.PMSComponent(id = ‘pms’, value=row)

I meet similar error.
get_girl_pms function returned list object.
PMSComponent doesn’t work. But I input manually row value. It does work.
For Example : row = [(“Olga”, “2020-5-1”, 30, 7, 14)]
I don’t understand, That’s why?
How Can I solve this issue.