Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Graphs not reloading with new data on page reload

Dash
#1

Hi,
I want to redraw my graphs on page reload, in below graphs you can see one of the graphs(id=g1) data is created using random values. I want my graphs to get reloaded with new data on every page load.
I don’t want to use any live updated and also all the graphs must be inside html.Div( … )
Please help me!!

import dash
import dash_html_components as html
import dash_core_components as dcc
import random
app = dash.Dash()
app.layout = html.Div([
    html.Div([
        html.Div([
            html.H3('Column 1'),
            dcc.Graph(id='g1', figure={'data': [{'y': [ random.randint(0,100) for val in range(10)]}]})
        ], className="six columns"),

        html.Div([
            html.H3('Column 2'),
            dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]})
        ], className="six columns"),
    ], className="row"),

])

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

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

I also want to know is there anyway to turn off option for loading date from plotly app memory once server started.

#2

See https://plot.ly/dash/live-updates, in particular the section on “Updates on Page Load”.

I’m not quite sure what you mean here. Could you create a new thread and a simple example to show what you mean? Thanks!

#3

Thank you!!
I followed https://plot.ly/dash/live-updates

I have modified my script to this and its working.

import dash
import dash_html_components as html
import dash_core_components as dcc
import random
app = dash.Dash()

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

def serve_layout():
    return html.Div([
    html.Div([
        html.Div([
            html.H3('Column 1'),
            dcc.Graph(id='g1', figure={'data': [{'y': [ random.randint(0,100) for val in range(10)]}]})
        ], className="six columns"),

        html.Div([
            html.H3('Column 2'),
            dcc.Graph(id='g2', figure={'data': [{'y': [1, 2, 3]}]})
        ], className="six columns"),
    ], className="row"),

])
app.layout = serve_layout

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

Now every time I reload the page, I can see my graph plotting new data.
Thanks again!!

#4

Okay, If you want to reload layout every page reload you do this:
app.layout = myfunction

NOTE: calling my function without parenthesis, this would be wrong:
app.layout = myfunction()

But what if I want to call that function with parameters?
app.layout = myfunction????

Please, I need help with this.

UPDATE:
I’ve made a workaround by creating a dummy function like this


def serve_layout():
    return layout(app) # I pass app to use app.callbacks

app.layout = serve_layout

HOWEVER, I am getting lots of errors about callbacks telling me that there are duplicate callbacks, which there really aren’t. I think there is a problem when passing app to the functions

ERROR:

In the callback for output(s):
  information-container.style
Output 0 (information-container.style) is already in use.
Any given output can only have one callback that sets it.
To resolve this situation, try combining these into
one callback function, distinguishing the trigger
by using `dash.callback_context` if necessary.
#5

I’ve made a workaround by following documentation guidelines for multi paged apps https://dash.plotly.com/urls