Loading HTML text and Graphs at the same time

Dash Python
#1

I have a dbc.container and inside it has two dbc.Row. The first row has HTML text and the second row has graphs. When I load my application, the HTML pops up first and a few seconds later, the graphs will pop up. The graphs could be fully rendered but the graphs will always show up with delay. Is there any way to have it all load at the same time instead of having a delay.

Dash

Thanks

#2

For what I know.
Graph can be fully rendered but it will take time to draw it on the screen. Pure text is faster.
I’m not sure what delay we are talking about but… You may set single div containing both text and graph and just turn visibility of this Div only after graph is placed in memory.

This is aesthetic solution only, wont speed up plotting/transferring data.

#3

A quick example of the delay would be like so. You can see the text pop out first and then the graph comes out a second afterwards. This is a light example but with more data, the delay can be longer. I even tried putting it in the same Div and adding loading to ensure the graph is fully loaded but it still delays.

Dash
Dash1880×498 86.2 KB

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
import numpy as np
import time
from dash.dependencies import Input, Output

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.Div(id='loading-input-2',style ={'display': 'none'}),
    html.H1(children='Hello Dash'),
    html.Div(children=['''Dash: A web application framework for Python.''']),
    dcc.Loading(
        id="loading-2",
        children= [html.Div(
            [
            html.Div(id="loading-output-2")])],type="circle")
    
])

@app.callback(Output("loading-output-2", "children"), Input("loading-input-2", "value"))
def input_triggers_nested(value):
    df= pd.DataFrame(np.random.randint(0,100,size=(400000, 8)), columns=list('ABCDEFGH'))
    fig = px.scatter(df, x="A", y="E")
    graphs = dcc.Graph(
        figure=fig
    )
    return graphs

if __name__ == '__main__':
    app.run_server()
#4

Here is something that will display everything in one shot. Overall time is the same.
What I did is applying said delay to all elements of the page.
Delay is caused by plotly/size of df. I do not know how to shorten it.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
import numpy as np
import time
from dash.dependencies import Input, Output


app = dash.Dash(__name__)

app.layout = html.Div(id='main',
        children=[
                html.H1(id='trigger', children='Hello Dash',),
                html.Div(children=['''Dash: A web application framework for Python.''']),
                html.Div([dcc.Graph(id="output-2")], )

            ],
            style={'display':'none'}
            )


@app.callback([Output("output-2", "figure"),
                Output('main', 'style')],
                Input("trigger", "value"))
def input_triggers_nested(value):
    df= pd.DataFrame(np.random.randint(0,100,size=(400000, 8)), columns=list('ABCDEFGH'))
    fig = px.scatter(df, x="A", y="E", width=1000)
    return fig, {'display':'block'}

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

Code is not clean, but idea is there. You can put loader back on - I forgot to do so :slight_smile: