Update of dash app

Dash Python
1

Dear community,
I am new to Plotly and dash and want to build my first app.
Is there a general option to update/refresh the whole app in a pre-defined time (such as every 5 seconds).

I know about this website (dash.plot.ly/live-update) and others, but I cannot apply on my use case.
I would highly appreciate if you may help me.

Besides reading JSON documents, I will also show PNG files. As another tool is updating these PNG and JSON files permanently, the app should refresh itself.

The current draft is as follows:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from flask import Flask, Response
import base64

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

server = Flask(name)
app = dash.Dash(name, external_stylesheets=external_stylesheets, server=server)

df =pd.read_json(“convertcsv.json”)

def generate_table(dataframe, max_rows=10): return html.Table(

Header

    [html.Tr([html.Th(col) for col in dataframe.columns])] +

Body

    [html.Tr([
        html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
    ]) for i in range(min(len(dataframe), max_rows))]
)

###Image
image_filename = ‘graph.png’ # replace with your own image
encoded_image = base64.b64encode(open(image_filename, ‘rb’).read()).decode(‘ascii’)

###App-Layout
app.layout = html.Div([
html.Div([
generate_table(df)]),
html.Div([
html.Img(src=‘data:image/png;base64,{}’.format(encoded_image))
]),
])

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})

if name == ‘main’:
app.run_server(debug=True)

Thank you very much in advance!

2

check out dcc.Interval. Here is an example (DCC items reset to default value on interval)

3

Thank you very much for your feedback, but I do not get how I can add this dcc.Interval to my use case. Besides that, I don’t need to select the time. This should be defined in the app and not via the GUI.

I am really sorry for all the questions, but I am really struggling with it …

4

Each time the dcc.Interval is triggered (based on the interval you setup), you can have your callbacks (or some of them) trigger. You would need to add this dcc.interval component as in Input to your callback(s).

5

Thank you very much for your feedback. I finally managed the dcc.Interval and the @app.callback.

For other learners: that link (https://github.com/plotly/dash/issues/71) was also really helpful for updating images on the dash app.