Waiting long time after chart load

Dash Python
1

After implementing tabs I have to wait couple minutes after chart load. Could anyone explain why it is happen?
There were no such problem without tabs.

Load%20chart%202

Load%20chart
Load chart.png1488Ă—724 35.7 KB

2

Seems like it might be a data processing bottleneck. You can try profiling your code to see if that is the issue.

If it is a data processing bottle neck, and you can’t optimize any further, then one elegant solution is to create a div container that holds the graph and at the start of the program you can specify that this div’s children be some type of loading text. Then to add the chart, you can update it’s children property in the callback.

This would roughly look like:

# create container in the app.layout assignment

app.layout = ( 

...

   html.Div(id=graph-container, children=[
        html.H1('Loading chart') #perhaps even style this H1 so that it is centered.
   ])

...

)

# callback for the chart
@app.callback(Output('graph-container', 'children'), 
    [Input('your-input-component', 'input-param') ... ]
def update_chart(input_param(s))
    return figure
1 Like
3

image
This is the way I implement layout. Your idea don’t work because of component property figure
and dcc.Graph.
Could you explain how to refactor my code?
image

4

First, you need to wrap your dcc.Graph in a container html.Div with id=live-graph-container. It looks like this is what you already have done. If so, then just make sure to give it an id.

Update your callback to return the children of live-graph-container.

You shouldn’t have to make any changed besides that since you are still returning a figure. Let me know if that helps.

5

After changes you have proprosed I have error like this.

image

It doesn’t work this way. Do you have any other ideas?

6

Hi @rafal0502, I couldn’t tell you why you are getting that error without seeing your code.

My method does work though, and I have created a proof of concept below:


import time

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html


loading_component = html.H1(
    style={},
    children='Loading...'
)

app = dash.Dash(__name__)
app.layout = html.Div([

    # Create arbitrary element to fire the callback below
    dcc.Input(id='trigger-live-chart'),
    html.Div(id='live-graph-container', children=[
        loading_component
    ]),
])

@app.callback(Output('live-graph-container', 'children'),
    [Input('trigger-live-chart','value')])
def generate_live_chart(_):
    time.sleep(3) # simmulate 3 seconds of data processing
    return dcc.Graph(
        id='live-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )


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