Black Lives Matter. Please consider donating to Black Girls Code today.

Strange plotting error, would someone look over this?

(I made a github issue about this here)

I will post my short code below, but what is essentially happening is that Dash is giving me a weird error whenever I try to send some dummy data to a dcc.Graph to create a basic lineplot.

If the code below is run as is, the graph never turns on after clicking the button, and the error is displayed through the browser’s console, with a screenshot here. However, all it takes to run the graph, is to remove the 4 #'s in the lowermost callback (which are supposed to affect something completely unrelated).

Could someone tell me what is going wrong?

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output, State



###### Setup ######

app = dash.Dash(dev_tools_hot_reload=True)
app.scripts.config.serve_locally = True
app.config['suppress_callback_exceptions'] = True



###### Main code ######

app.layout = html.Div(children=[
    
    
    dcc.Interval(id='update', interval=1*1000, n_intervals=0,
                 max_intervals=0), ## Interval component is disabled as default through max_intervas
    
    html.Div(children=[html.Label(id='Label', children='Just a Label.')]),
        
    ## Button triggering graph to populate with random data.
    html.Div(children=[html.Button(id='button', children='Populate graph.')]),
    
    dcc.Graph(id='Graph_triggered_by_Interval')
    
    
]
                     )


@app.callback(
    Output(component_id='Label', component_property='children'),
   [Input(component_id='update', component_property='n_intervals'),
    Input(component_id='update', component_property='max_intervals'),
    Input(component_id='update', component_property='disabled')]
)
def check_interval_update(n_intervals, max_intervals, disabled):

    return 'n_intervals: {}, max_intervals: {}, disabled: {}'.format(n_intervals, max_intervals, disabled)



@app.callback(
#    [
    Output(component_id='Graph_triggered_by_Interval', component_property='figure'),
#     Output(component_id='update', component_property='max_intervals')],
   [Input(component_id='update', component_property='n_intervals'),
    Input(component_id='button', component_property='n_clicks_timestamp')]
)
def update_graph(update, button):
    
    if not update:
        update = 1
    
    print('\nInterval counter: {}\n'.format(update))
    
    if button:
        
        if update == 1:
            print('\nThis is what should be printed each time after un-disabling interval (letting it go again).\n')
            return {'data': [{'y': [i**2 for i in range(100)]}]}#, -1
        
        elif update > 1:
            return {'data': [{'y': [i**2 for i in range(update)]}]}#, -1



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

I think the problem is that you’re not returning anything from your second callback if button is not true. I added

return {"data": []}

or with the extra bits uncommented out

return {"data": []}, -1

and in both cases it ran without error.

2 Likes

I literally cannot believe this is what the error was. I thank goodness that Dash is at least putting me through the ropes as a programmer, and forcing me to reconsider every little thing I thought was under control in some code, but actually isn’t.

The fact that the error stays the same when I do end up pressing the button (hence, it is not None or Null anymore) surprises me, but I should have been more rigorous. Thank you for your help, tcbegley.

2 Likes

i just stumbled on this answer. OMG, I’ve been fighting this for hours !!! Thank you @tcbegley for posting.

1 Like