Dynamically updating json dump

hi!
i’m trying json.dumps much like in the examples here: Part 3. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly 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),
        dcc.Interval(
            id='update-interval',
            interval=1*1000
        ),

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):
jsonDump

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.