I’m new to Dash, and can’t figure out how to return the clickdata from a graph built in a function. Eventual goal is to be able to click on two different x points on a trace and calculate some data from that (the price difference for the clicked trace and any others in the plot) and then return that data on the page with the plot - but I can’t yet get the first datapoint’s data.
Complete code is below.
The offending line is where I point to example-graph in app.callback, and it complains that example-graph is not in app.layout. I saw a comment elsewhere that I could get around that with app.config statement I have commented out. When I add that statement I get an “Error Loading Dependencies” message in my Chrome session - nothing else.
I’ve probably got a circular reference problem of some sort, but I can’t see it, and after trolling the web for hours I can’t figure it out. I’m likely doing a lot of other things poorly in the code below - any and all comments on improvements are welcome.
If you need the data I’m reading let me know. The first few lines of a file looks like this:
12/16/1985 $10.00 na na
12/17/1985 $9.77 -$0.23 na
12/18/1985 $9.73 -$0.0399 na
12/19/1985 $9.80 +$0.07 na
import pandas_datareader.data as web
import pandas as pd
import datetime
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash()
#app.config[‘suppress_callback_exceptions’]=True # necessary because example_graph that has clickdata is not part of app.layout
app.layout = html.Div(children=[
html.Div(children=’’’
Symbols to graph:
‘’’),
dcc.Input(size=‘5’, id=‘input-1-submit’, value=‘FBIOX’, type=‘text’),
dcc.Input(size=‘5’, id=‘input-2-submit’, value=’’, type=‘text’),
dcc.Input(size=‘5’, id=‘input-3-submit’, value=’’, type=‘text’),
dcc.Input(size=‘5’, id=‘input-4-submit’, value=’’, type=‘text’),
dcc.Input(size=‘5’, id=‘input-5-submit’, value=’’, type=‘text’),
dcc.Input(size=‘5’, id=‘input-6-submit’, value=’’, type=‘text’),
html.Div(id=‘output-graph’)
])
@app.callback(
Output(component_id=‘output-graph’, component_property=‘children’),
[Input(component_id=‘input-1-submit’, component_property=‘n_submit’),
Input(component_id=‘input-2-submit’, component_property=‘n_submit’),
Input(component_id=‘input-3-submit’, component_property=‘n_submit’),
Input(component_id=‘input-4-submit’, component_property=‘n_submit’),
Input(component_id=‘input-5-submit’, component_property=‘n_submit’),
Input(component_id=‘input-6-submit’, component_property=‘n_submit’),
Input(component_id=‘example-graph’ , component_property=‘clickData’)],
[State(component_id=‘input-1-submit’, component_property=‘value’),
State(component_id=‘input-2-submit’, component_property=‘value’),
State(component_id=‘input-3-submit’, component_property=‘value’),
State(component_id=‘input-4-submit’, component_property=‘value’),
State(component_id=‘input-5-submit’, component_property=‘value’),
State(component_id=‘input-6-submit’, component_property=‘value’)]
)
def update_value(input_1_entered, input_2_entered, input_3_entered,
input_4_entered, input_5_entered, input_6_entered, clickdata,
state_1_name, state_2_name, state_3_name,
state_4_name, state_5_name, state_6_name):
iset_date = False
if state_1_name != ‘’:
df1 = pd.read_csv(r’C:\fttest\FTDATA\fidelity_data\SELECTS\’+state_1_name+’.txt’,
parse_dates=[0],sep=’ ‘,header=None,usecols=[0,1],names=[“Date1”,“Price1”])
df1.reset_index(inplace=True,drop=True)
df1.set_index(“Date1”, inplace=True)
trace1={‘x’: df1.index, ‘y’: df1.Price1, ‘type’: ‘line’, ‘name’: state_1_name}
iset_date=True
start=df1.index[0]
end=df1.index[-1]
else:
trace1={‘x’: [], ‘y’: []}
if state_2_name != ‘’:
df2 = pd.read_csv(r’C:\fttest\FTDATA\fidelity_data\SELECTS\’+state_2_name+’.txt’,
parse_dates=[0],sep=’ ‘,header=None,usecols=[0,1],names=[“Date2”,“Price2”])
df2.reset_index(inplace=True,drop=True)
df2.set_index(“Date2”, inplace=True)
trace2={‘x’: df2.index, ‘y’: df2.Price2, ‘type’: ‘line’, ‘name’: state_2_name}
if iset_date:
start=min(start,df2.index[0])
end=max(end,df2.index[-1])
else:
start=df2.index[0]
end=df2.index[-1]
iset_date=True
else:
trace2={‘x’: [], ‘y’: []}
if state_3_name != ‘’:
df3 = pd.read_csv(r’C:\fttest\FTDATA\fidelity_data\SELECTS\’+state_3_name+’.txt’,
parse_dates=[0],sep=’ ‘,header=None,usecols=[0,1],names=[“Date3”,“Price3”])
df3.reset_index(inplace=True,drop=True)
df3.set_index(“Date3”, inplace=True)
trace3={‘x’: df3.index, ‘y’: df3.Price3, ‘type’: ‘line’, ‘name’: state_3_name}
if iset_date:
start=min(start,df3.index[0])
end=max(end,df3.index[-1])
else:
start=df3.index[0]
end=df3.index[-1]
iset_date=True
else:
trace3={‘x’: [], ‘y’: []}
if state_4_name != ‘’:
df4 = pd.read_csv(r’C:\fttest\FTDATA\fidelity_data\SELECTS\’+state_4_name+’.txt’,
parse_dates=[0],sep=’ ‘,header=None,usecols=[0,1],names=[“Date4”,“Price4”])
df4.reset_index(inplace=True,drop=True)
df4.set_index(“Date4”, inplace=True)
trace4={‘x’: df4.index, ‘y’: df4.Price4, ‘type’: ‘line’, ‘name’: state_4_name}
if iset_date:
start=min(start,df4.index[0])
end=max(end,df4.index[-1])
else:
start=df4.index[0]
end=df4.index[-1]
iset_date=True
else:
trace4={‘x’: [], ‘y’: []}
if state_5_name != ‘’:
df5 = pd.read_csv(r’C:\fttest\FTDATA\fidelity_data\SELECTS\’+state_5_name+’.txt’,
parse_dates=[0],sep=’ ‘,header=None,usecols=[0,1],names=[“Date5”,“Price5”])
df5.reset_index(inplace=True,drop=True)
df5.set_index(“Date5”, inplace=True)
trace5={‘x’: df5.index, ‘y’: df5.Price5, ‘type’: ‘line’, ‘name’: state_5_name}
if iset_date:
start=min(start,df5.index[0])
end=max(end,df5.index[-1])
else:
start=df5.index[0]
end=df5.index[-1]
iset_date=True
else:
trace5={‘x’: [], ‘y’: []}
if state_6_name != ‘’:
df6 = pd.read_csv(r’C:\fttest\FTDATA\fidelity_data\SELECTS\’+state_6_name+’.txt’,
parse_dates=[0],sep=’ ',header=None,usecols=[0,1],names=[“Date6”,“Price6”])
df6.reset_index(inplace=True,drop=True)
df6.set_index(“Date6”, inplace=True)
trace6={‘x’: df6.index, ‘y’: df6.Price6, ‘type’: ‘line’, ‘name’: state_6_name}
if iset_date:
start=min(start,df6.index[0])
end=max(end,df6.index[-1])
else:
start=df6.index[0]
end=df6.index[-1]
iset_date=True
else:
trace6={‘x’: [], ‘y’: []}
if not iset_date:
start = datetime.datetime(1980, 1, 1)
end = datetime.datetime.now()
tick_freq=(end-start)/100.0
tick_freq=str(round(tick_freq.days/(365.0/12.0))) # return a string
print((end-start)/(int(tick_freq)*365/12))
print(“df1 =”, df1.index[0], df1.index[-1])
print(“df2 =”, df2.index[0], df2.index[-1])
print(“df3 =”, df3.index[0], df3.index[-1])
print(“df4 =”, df4.index[0], df4.index[-1])
print(“start =”, start)
print(“end =”, end)
print(“freq =”, tick_freq)
return dcc.Graph(
id='example-graph',
figure={
'data': [ trace1, trace2, trace3, trace4, trace5, trace6 ],
'layout': {
'title': state_1_name,
'xaxis': dict(tickangle=-90, tickformat='%m/%d/%Y',dtick="M"+tick_freq),
'yaxis': dict(type='log')
}
}
)
if name == ‘main’:
app.run_server(debug=True)