Events equivalent in 0.39

Hi so I was following one of the tutorials for Dash and the tutor used “events” to update the plot live with intervals.
But in the newest version of Dash events are removed so I wonder how I could rewrite the code some it would be still working:

@app.callback(
    dash.dependencies.Output('graphs','children'),
    [dash.dependencies.Input('vehicle-data-name', 'value')],
    events=[dash.dependencies.Event('graph-update', 'interval')]
    )

The function that follows the callback:

def update_graph(data_names):
    graphs = []
    update_obd_values(times, oil_temps, intake_temps, coolant_temps, rpms, speeds, throttle_pos)
    if len(data_names)>2:
        class_choice = 'col s12 m6 l4'
    elif len(data_names) == 2:
        class_choice = 'col s12 m6 l6'
    else:
        class_choice = 'col s12'


    for data_name in data_names:

        data = go.Scatter(
            x=list(times),
            y=list(data_dict[data_name]),
            name='Scatter',
            fill="tozeroy",
            fillcolor="#6897bb"
            )

        graphs.append(html.Div(dcc.Graph(
            id=data_name,
            animate=True,
            figure={'data': [data],'layout' : go.Layout(xaxis=dict(range=[min(times),max(times)]),
                                                        yaxis=dict(range=[min(data_dict[data_name]),max(data_dict[data_name])]),
                                                        margin={'l':50,'r':1,'t':45,'b':1},
                                                        title='{}'.format(data_name))}
            ), className=class_choice))

    return graphs

You should use the n_intervals prop of graph-update as an input to your callback. As the name suggests, n_intervals keeps count of how many times the interval has fired, and so each time the interval fires, n_intervals gets incremented which triggers your callback. The only change you have to make to the callback is to an argument to receive n_intervals, which you can then ignore in the function body.

@app.callback(
    Output("graphs", "children"),
    [Input("vehicle-data-name", "value"), Input("graph-update", "n_intervals")]
)
def update_graph(data_names, n):
    # rest of function is the same

Still does not work as intended:
Should I change something in the Div that im updating using the Output?

 html.Div(children=html.Div(id='graphs'), className='row'),
     dcc.Interval(
         id='graph-update',
         interval=100),
     ], className="container",style={'width':'98%','margin-left':10,'margin-right':10,'max-width':50000})

Oh that’s strange. It does work though with the events and an earlier version of Dash? What happens instead, when you test on Dash 0.39 or later? Do you get an error or just no updates?

There is actually a small problem with the snippet you posted, you have an unmatched square bracket. Is that in your code or just in your post?

I think the unmacthed square bracket is just copy issue cause it comes from the different div.

Here you can see the full code before the changes (with event).

However after i changed it to use Input only then it actually stopped updating at all.

I managed to get your code to run (after changing Event to Input) by adjusting the rate at which the Interval fires, namely by changing interval=100 to interval=200. I’m not 100% what’s going on, but it seems like the interval was firing faster than the callbacks could be run, and nothing was getting rendered as a result. Even with the change to interval=200, it doesn’t look to me like the graphs are getting updated 5 times a second.

Part of this might be the animation when the graph gets updated? You could look into either disabling that or adjusting the length of the animation.