dcc.Interval Disabled Boolean Switch Example

Dash Python
1

Hello I am using dash/plotly on an interval. I have my interval example working but wanted to add a toggle to stop the live updates. Below is the code I tried.

app.layout = html.Div(
    html.Div([
        #html.H4('My Dash/Plotly Graph'),
        dcc.Graph(id='live-update-graph'),
        dcc.Interval(
            id='interval-component',
            interval=1*1000, # in milliseconds
            n_intervals=0,
            disabled=False,
        )
    ]),
    html.Div(id='boolean-switch-output')
)
@app.callback(Output('live-update-graph', 'figure'),
              [Input('interval-component', 'n_intervals'),
               ],
              dash.dependencies.Output('boolean-switch-output', 'children'),
              [dash.dependencies.Input('interval-component', 'disabled')])

def update_output(disabled):
    return 'The switch is {}.'.format(disabled)

def update_graph_live(n):

I am getting this error:

TypeError: The `dash_html_components.Div` component (version 1.0.3) with the ID "Div(id='boolean-switch-output')" detected a Component for a prop other than `children`
Did you forget to wrap multiple `children` in an array?
Prop id has value Div(id='boolean-switch-output')

I checked the example page but there is not updates on how to use this new feature. Can someone help provide a working example?

Thank You

2

Hi @pakmon22
Welcome to the dash community. If you have two inputs and two outputs in your callback decorator, you need two arguments inside your callback function and you need to return two outputs.

Also, The outputs in the callback decorator have to be inside a list

3

alright, thanks for the advice. So I now have:

app.layout = html.Div(
    html.Div([
        #html.H4('My Dash/Plotly Graph'),
        dcc.Graph(id='live-update-graph'),
        dcc.Interval(
            id='interval-component',
            interval=1*1000, # in milliseconds
            n_intervals=0,
            disabled=False,
        ),
        html.Div(id='boolean-switch-output')
    ])
)
@app.callback([Output('live-update-graph', 'figure'), dash.dependencies.Output('boolean-switch-output', 'children')],
              [Input('interval-component', 'n_intervals'), dash.dependencies.Input('interval-component', 'disabled')])
def update_graph_live(n, disabled):
"""some graph code"""
return fig, 'The switch is {}.'.format(disabled)

And now my error is:

for component_registration in self.callback_map[target_id]['inputs']:
KeyError: 'live-update-graph.figure'

As you might guess, I am not an experienced programmer, I believe there is a missing component from the html.div segment of the code. Any advice?

4

Ok, I see what happened, I had to reload the web-page. Still though, Don’t have a toggle switch, I just have text. I’m thinking it’s something simple.

Thanks for the help.

5

what error are you getting now?

by the way, so it looks better, just write:

@app.callback([Output("live-update-graph", "figure"), Output("boolean-switch-output", "children")],
              [Input('interval-component', 'n_intervals'), Input('interval-component', 'disabled')])

Look at this post on your error message, and see if they have the solution for you.

6

Thanks for the help. It kind of seems like this is a hack or something. Shouldn’t the javascript library have a stop function for the callback? Isn’t there a javascript way to do this from the client side?