Optimizing Loading Speed for Multi-page using div+graph

Dash Python
1

Hello everyone,

I’m currently working on a Dash application that uses multiple pages and leverages the div+graph structure for rendering. I’ve noticed that the loading time is more than I’d like it to be, and I’m looking for ways to optimize it and make the application load faster.

The application structure is this:

output_spot = []  # there are other lots of list to store graph

# darwing picture
for i in ['spot-A', 'spot-B', ... 'spot-Z',
 ]:
    fig = Function.seasonal_pic_plotly(df, i, width, sorted_bins=sorted_bins)
    output_spot.append(dcc.Graph(id='oil-graph-'+str(i),figure=fig, style={'display': 'inline-block'}))  # I use a list to store graph

# showing module
layout = html.Div([html.Div(id='main-content', children=[
        html.H1('ttitle', className='title', id='title-anchor'),
        html.H3(f'spot', className='spot', id='spot'),
        *output_spot,
        html.H3(f'bias', id='bias'),
        *output_bias,
        html.H3(f'other bias', id='bias_other'),
        *output_other_bias,
        html.H3(f'supply', id='supply'),
        *output_supply,
        ]),
])

The drawing function returns the plotly fig. As you can see, the important thing is I need to load lots of graphs, but it seems that dash will load them at the beginning. I need to spend lots of time to load load upon startup. How can I find ways to reduce this loading time? Currently, I have implemented five pages of varieties, and I’m concerned that if I add more varieties, the loading time will further increase.

Thank you in advance!

2

Hi @jarvan ,

Welcome to here!

Why not try the combination of a dropdown plus callback, like below? That’s the most charming thing about Dash.

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px

import pandas as pd

app = Dash(__name__)

df = pd.read_csv('https://plotly.github.io/datasets/country_indicators.csv')

app.layout = html.Div([
    html.Div([

        html.Div([
            dcc.Dropdown(
                df['Indicator Name'].unique(),
                'Fertility rate, total (births per woman)',
                id='xaxis-column'
            ),
            dcc.RadioItems(
                ['Linear', 'Log'],
                'Linear',
                id='xaxis-type',
                inline=True
            )
        ], style={'width': '48%', 'display': 'inline-block'}),

        html.Div([
            dcc.Dropdown(
                df['Indicator Name'].unique(),
                'Life expectancy at birth, total (years)',
                id='yaxis-column'
            ),
            dcc.RadioItems(
                ['Linear', 'Log'],
                'Linear',
                id='yaxis-type',
                inline=True
            )
        ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'})
    ]),

    dcc.Graph(id='indicator-graphic'),

    dcc.Slider(
        df['Year'].min(),
        df['Year'].max(),
        step=None,
        id='year--slider',
        value=df['Year'].max(),
        marks={str(year): str(year) for year in df['Year'].unique()},

    )
])


@callback(
    Output('indicator-graphic', 'figure'),
    Input('xaxis-column', 'value'),
    Input('yaxis-column', 'value'),
    Input('xaxis-type', 'value'),
    Input('yaxis-type', 'value'),
    Input('year--slider', 'value'))
def update_graph(xaxis_column_name, yaxis_column_name,
                 xaxis_type, yaxis_type,
                 year_value):
    dff = df[df['Year'] == year_value]

    fig = px.scatter(x=dff[dff['Indicator Name'] == xaxis_column_name]['Value'],
                     y=dff[dff['Indicator Name'] == yaxis_column_name]['Value'],
                     hover_name=dff[dff['Indicator Name'] == yaxis_column_name]['Country Name'])

    fig.update_layout(margin={'l': 40, 'b': 40, 't': 10, 'r': 0}, hovermode='closest')

    fig.update_xaxes(title=xaxis_column_name,
                     type='linear' if xaxis_type == 'Linear' else 'log')

    fig.update_yaxes(title=yaxis_column_name,
                     type='linear' if yaxis_type == 'Linear' else 'log')

    return fig


if __name__ == '__main__':
    app.run(debug=True)
1 Like