How to update Dashboard (dash/plotly) with new data uploaded to the folder?

Dash Python
1

I have built a Dashboard using dash and plotly which is plotting data from the images in the folder located on my local PC. The images in the folder will be updated frequently so I need to know how to make that Dashboard gets updated as well without me redeploying it.

2

Hi @Mallo,

I see two options here:

  • Use dcc.Interval to update the plotted data by reloading the images in a specified interval. This will reload the content shown on the page without user interaction - can be desired, but not always the best option (Ben Shneiderman: Keep users in control)
  • Create your page layout inside a function - that way, new images will be loaded upon page refresh and no redeployment is needed. The same applies for e.g. a DatePicker where you want to have the current day selected by default - if you put your code to get the current date inside a function, no redeployment is needed every day.

Let me know if that helps or if you need an example!

3

Could you please give an example?

4

Here’s an example of the 2nd option I described, where the layout is defined inside a function.

app.py

import dash
from dash import Dash, html

app = Dash(
    __name__,
    use_pages=True,
    update_title=None,
)

app.layout = html.Div(dash.page_container)

if __name__ == "__main__":
    app.run_server(debug=True)

images.py inside the pages folder

import dash
import os
import plotly.express as px

from dash import html, dcc
from skimage import io


dash.register_page(__name__, path='/')


def layout():
    images = os.listdir("./images")
    graphs = []

    for image in images:
        img = io.imread("images/" + image)
        fig = px.imshow(img, binary_format="jpeg", binary_compression_level=0)
        graphs.append(dcc.Graph(figure=fig))

    return html.Div(graphs)

The code above reads the files inside the images folder. You can test how it works by adding/removing images inside your images folder and then refreshing the running app (no redeployment/restart required). I’ve used a bunch of jpg images to test it.

To see the difference between defining the layout inside/outside a function, you can use this code here (e.g. as images2.py) and navigate to /no-function on your app:

import dash
import os
import plotly.express as px

from dash import html, dcc
from skimage import io


dash.register_page(__name__, path='/no-function')


images = os.listdir("./images")
graphs = []

for image in images:
    img = io.imread("images/" + image)
    fig = px.imshow(img, binary_format="jpeg", binary_compression_level=0)
    graphs.append(dcc.Graph(figure=fig))

layout = html.Div(graphs)
1 Like