What can I do to load the page more quickly?

Dash Python
1

Right now, it takes three to five seconds for my dashboard to produce the chart for the figure = argument of the dcc.Graph object. From then on, it is pretty fast because the chart updates over the course of the day and it’s quite fast. Even still, I wonder if it’s possible to load up the page first and then populate the chart. Right now, the URL for the chart is not available until after the three to five seconds is up. I’m wondering if I can host the url right away and then populate the graph.

This is using the wsgi server tool that comes out of the box with plotly hosted on the local machine

2

Hello @ibenok,

Yes, you should be able to load the page, and then load the graph with a callback once the page is populated.

Assuming you have something like this:

layout = html.Div(dcc.Graph(myFig(), id='myChart'))

You turn it into this:

layout = html.Div(dcc.Graph(id='myChart'))

@app.callback (
Output('myChart','figure'), Input('myChart','id')
)
def updateChart():
     return myFig()
3

What causes the input to fire? I’m wondering if this fires only on page load or is inclusive of other events

4

My represented code would fire once upon loading, and wouldnt take time when displaying the layout.

1 Like
5

The code fires every time I zoom in on the chart. The result is that I see a loading state every time I zoom in.

What can i do to make sure it only fires on page load but not on other times?

6

What code exactly?

I thought you weren’t using callbacks.

To make something not fire multiple times, you need to push the state of something that is setup to have some alteration, like an input that receives a 1 to show that it triggered already.

7

I used the code from above. Is there something I need to change about it to make it only fire on the first load?

8

Didn’t think it would fire multiple times, because the id of the figure should not be changing…

Anyways, add toggle to your apps layout, in the output of the callback above toggle the element of that value to be FALSE or TRUE, depending on how you want to use it.

Then also in that callback, check for the state of it. If the state means it shouldn’t be triggered, then return dash.no_update to both outputs.


layout = html.Div([dcc.Graph(id='myChart'), dcc.Input(id=‘load_test’, type=‘checkbox’, value=TRUE)])

@app.callback (
Output('myChart','figure'), Output(‘load_test’, ‘value’), Input('myChart','id'), State(‘load_test’, ‘value’)
)
def updateChart(id, v):
     If v:
          return myFig(), not v
      return dash.no_update, dash.no_update
1 Like
9

This is really clever. Just to make sure I understand, this changes the dcc.store load test object to False after the first load and never runs again because there is a flag that says load test has to be true. Is that right?

10

It changes the input.

The input box is there to make it so you can see it. You can adjust it to be hidden as well. Just pass a style argument.

1 Like