✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dynamically updating json dump

i’m trying json.dumps much like in the examples here: https://dash.plot.ly/interactive-graphing but where the json is constantly being updated based on new data that is being created.

I’ve been able to create graphs that update based on the new data that comes in using something like this:

@app.callback(Output('dynamic-graph', 'figure'),
              events=[Event('update-interval', 'interval')])

which updates a dcc.Graph by using a dcc.Interval:

dcc.Graph(id='dynamic-graph', animate=True),

However I want to update a json dump and i’ve seen from the Dash examples that ‘Pre’ tag is what is being output and not a graph, how can I accomplish this ‘updating’ on a Pre tag?

End result would look just like this (but data changes every second when new data populates the json file that I will be dumping):

thank you

So you want to update the contents of a <pre> tag. In Dash, that means updating the children property of a component. So you need to create a callback that targets as its Output the children property of an html.Pre component in your layout.