Dash loads very slow or does not load at all

Dash Python
1

Hi-

I’m creating a simple 3 graph dashboard with a multi-dropdown from csv using jupyterlab (as recommended); however, I have a couple issues plotting the first graph: first, plotting is a hit or miss. In other words, sometimes it plots locally (slow but it does), sometimes I have to wait 6-10 mins before it loads, and sometimes just doesn’t plot at all. second, I’ve tried a different code (below) to test my project, but it doesn’t launch the local server; instead it prints arrays. Can someone spot what I’m doing wrong?

Thanks!

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

import pandas as pd
import pandas_datareader as pdr

import datetime
import time
from collections import deque
import random
import json

import fix_yahoo_finance as yf
yf.pdr_override()
import matplotlib
import matplotlib.pyplot as plt
%matplotlib inline

import plotly
import plotly.plotly as py
from plotly.tools import FigureFactory as FF
import plotly.graph_objs as go

To use plotly graphing offline

from plotly.offline import download_plotlyjs
from plotly.offline import init_notebook_mode, plot, iplot

#plotly.tools.set_config_file(sharing=‘private’)

init_notebook_mode(connected=True), plot, iplot
print(plotly.version)

df = pd.read_csv(‘t/FuturesData.csv’)

df.set_index(‘Date’, inplace=True)

index_options = df[‘Indices’].unique

app = dash.Dash()

app.layout = html.Div([
html.H2(‘Futures Risk Transfer’),
html.Div(
[
dcc.Dropdown(
id=“Indices”,
options=[{
‘label’: i,
‘value’: i
}
for i in index_options],
value=‘Indices’),
],
style={‘width’: ‘25%’,
‘display’: ‘inline-block’}),
html.Div(id=‘output-container’),
])

@app.callback(
dash.dependencies.Output(‘output-container’, ‘children’),
[dash.dependencies.Input(‘Indices’, ‘value’)])

def update_graph(Indices):
if Indices == “All Indices”:
df_plot = df.copy()
else:
df_plot = df[df[‘Indices’] == Indices]

df = pd.pivot_table(
    df_plot,
    index=['Date'],
    columns=['Indices'],
    values=['Pct_Change'],
    aggfunc=sum,
    fill_value=0)

trace1 = go.Scatter(x=df[‘Date’], y=df[‘Price’], name=‘Price’)
trace2 = go.Scatter(x=df[‘Date’], y=df[‘High’], name=‘High’)
trace3 = go.Scatter(x=df[‘Date’], y=df[‘Pct_Change’], name=‘Percent Change’)
trace4 = go.Scatter(x=df[‘Date’], y=df[‘CCR’], name=‘Continuously Compounded Rate’)

return {
‘data’: [trace1, trace2, trace3, trace4],
‘layout’:
go.Layout(
xaxis={‘type’: ‘log’, ‘title’: ‘Percent’},
yaxis={‘title’: ‘Date’},
hovermode=‘closest’)
}

if name == ‘main’:
app.run_server(debug=True)

2

What versions are your Dash libraries on? How big is your CSV file? Have you tried timing how long each step of your code takes? E.g. log how long pd.pivot_table takes. Is there a difference when you don’t run in debug mode?

3

Thanks for the quick reply!
1- dash: ‘0.37.0’
2- csv: 1.6MB
3- have not timed each step
4- turned off debug and there isn’t much difference

4

Hard to guess without running any code, I’ll try and take a look when I get home, but it’s definitely not normal for a plot to take minutes to load unless it’s overwhelmed with data on a slow machine (e.g. 10’000s points) as the JavaScript must render that data, for such cases there are webgl plots.

5

Great, thanks!
i’m on a macbook pro 15" i7, and has been working alright with larger datasets in tableau and powerbi. i’ve also used large datasets with 800k rows in pandas and making simple plots w/o problems.
I mean even creating a simple table using plotly.figure_factory with the same dataset is time consuming. probably there’s something wrong with my computer. though, what is confusing is that PyCharm runs fine even when using some of the same code; the downside is visualizing.

6

Tableau and Powerbi are dedicated native applications designed for that task. Dash is sittings on top of Plotly which is creating SVG & JS to run in a browser, the graphing performance is therefore at least an order of magnitude slower. Don’t expect close to similar performance.

If you are plotting lots of data points, you might want to try Scattergl and see if you get a performance boost: Webgl vs svg in Python

7

Thanks! i’ll give that a shot

8

The behaviour doesn’t sound normal to me given a CSV of only 1.6MB. It could be worth trying outside of Jupyterlab – just running on the command line, to remove any possibility for issues to be coming in there.

You could also debug your code with print functions etc to see which parts of your code are actually taking so long.

9

thanks, but i ended up dropping jupyterlab. After re-doing everything from scratch and pulling simple examples such as (https://plot.ly/pandas/time-series/) to test if the problem was my code, the notebook got hung-up. i went back to pycharm for writing the code, i’ll check in when done.

10

Hi, so i re-wrote the code and i’m now having an “Error loading dependencies”. I used chrome, safari, brave, firefox, as well as disabled add-blockers, etc. And after testing parts of the code i think the problem may be somewhere here (please see fig 1) bc when tested separately, i can see the graph (no data though) and the dropdown options. I would appreciate any help. The entire code at bottom (fig 2). Thanks for the support!

fig 1
@app.callback(Output(‘my_graph’,‘figure’),
[Input(‘my-dropdown’, ‘value’)])

def update_graph(selected_dropdown_value):

df = df['Indices'] == selected_dropdown_value
return {
    'data': [go.Scatter(
        x = df.Date,
        y = df.Price,
        mode='markers',
        marker={
            'line' : {
                'width': 3,
                'shape': 'spline'
            }
        }
    )],
    'layout': go.layout(
        margin = {
            'l': 30,
            'r': 20,
            'b': 30,
            't': 20
        }
    )
}

fig 2

app = dash.Dash(__name__)

app.scripts.config.serve_locally = True
app.config.supress_callback_exceptions = True

app.layout = html.Div([
html.H1(‘Futures Historical Data’),
dcc.Dropdown(
id=‘my-dropdown’,
options = [
{‘label’: i, ‘value’: i} for i in df[‘Indices’].unique()
],
multi=True,
value=‘SP500-Vix’
),

dcc.Graph(
    id='my_graph',
    figure=go.Figure()
         )

], className=“container”)

@app.callback(Output(‘my_graph’,‘figure’),
[Input(‘my-dropdown’, ‘value’)])

def update_graph(selected_dropdown_value):

df = df['Indices'] == selected_dropdown_value
return {
    'data': [go.Scatter(
        x = df.Date,
        y = df.Price,
        mode='markers',
        marker={
            'line' : {
                'width': 3,
                'shape': 'spline'
            }
        }
    )],
    'layout': go.layout(
        margin = {
            'l': 30,
            'r': 20,
            'b': 30,
            't': 20
        }
    )
}

if name == ‘main’:
app.run_server()

1 Like