I am getting thrown an Error Loading Layout error when using Dash version >= 0.22.1 and deploying test app with ngrok. Pre-0.22.1, it worked fine, code below. Need the update as Candlesticks are broken in version < 0.22. I will replace the SQL query with a dataframe when I can.
Of note, I have isolated to 0.22.1 of dash-core-components, graph works with dash==0.21.1, dash-renderer==0.12.1, dash-html-components==0.10.1, with dash-core-components==0.22.0, but not dash-core-components==0.22.1 in plotly==2.6.0
import dash
from dash.dependencies import Output, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly
import pandas as pd
import time
from datetime import datetime, timedelta
from sqlalchemy import create_engine
import dash
app = dash.Dash(__name__)
app.layout = html.Div(style={'backgroundColor':'rgb(27,36,47)',
'border-radius':'25px',
'height':'96vh'
},
children=[
dcc.Graph(id='live-graph', animate=False,
style={'padding-top':'10px',
'backgroundColor':'rgb(27,36,47)'
},
figure={'layout':go.Layout(plot_bgcolor='rgb(27,36,47)',
paper_bgcolor='rgb(27,36,47)',
font={
'color':'white'
}
)
}
),
dcc.Interval(id='graph-update',
interval=10*1000
),
]
)
@app.callback(Output('live-graph', 'figure'),
events=[Event('graph-update', 'interval')])
def update_graph_scatter2():
try:
db2 = create_engine('mysql+mysqlconnector://root:<password>@localhost/bitcoin', echo=False)
c = db2.connect()
N = 3
week = int(time.time()) - 86400*N
df = pd.read_sql(
"""
SELECT
FLOOR(MIN(UNIX_TIMESTAMP(trade_datetime))/300)*300 AS timestamp,
SUM(trade_volume) AS volume,
SUM(trade_px*trade_volume)/sum(trade_volume) AS wavg_price,
SUBSTRING_INDEX(MIN(CONCAT(UNIX_TIMESTAMP(trade_datetime), '_', trade_px)), '_', -1) AS `open`,
MAX(trade_px) AS high,
MIN(trade_px) AS low,
SUBSTRING_INDEX(MAX(CONCAT(UNIX_TIMESTAMP(trade_datetime), '_', trade_px)), '_', -1) AS `close`
FROM exch_gdax_btcusd_snapshot_20180515 WHERE UNIX_TIMESTAMP(trade_datetime) >= {}
GROUP BY FLOOR(UNIX_TIMESTAMP(trade_datetime)/300)
ORDER BY timestamp;
""".format(week), c)
data = plotly.graph_objs.Candlestick(
x=df.index,
open=df.open,
close =df.close,
high = df.high,
low = df.low,
name='Price $BTC',
yaxis='y'
)
data2 = plotly.graph_objs.Bar(
x=df.index,
y=df.volume,
name='Volume',
marker={'color':'rgb(27, 36, 47)'},
yaxis='y2'
)
return {'data': [data,data2],
'layout' : go.Layout(xaxis=dict(range=[min(df.index),max(df.index)],
linecolor='white',
linewidth=2,
gridcolor='rgb(60,72,94)'
),
yaxis=go.YAxis(dict(range=[min(df.low)-20,max(df.high)+20],
linecolor='white',
linewidth=2,
gridcolor='rgb(60,72,94)'
)
),
yaxis2=go.YAxis(dict(range=[0,max(df.volume)+200],
side='right',
overlaying='y',
linecolor='white',
linewidth=2,
gridcolor='rgb(60,72,94)'
)
),
title='BTC Price',
plot_bgcolor='rgb(27,36,47)',
paper_bgcolor='rgb(27,36,47)',
font={'color':'white'},
legend={'orientation':"h",'x':.1,'y':-.2}
)
}
except Exception as e:
with open('errors.txt','a') as f:
f.write(str(e))
f.write('\n')
if __name__ == '__main__':
app.run_server(debug=True, port=8888)