I just started to use Plotly and Dash. I try to connect my interactive graph with calendar (DatePickerRange). Both off them display correctly, but not together. My figure doesn’t see the start and end dates.
My variable date is “session_date”. I don’t know how to use the start and end variable with session_date. The range from session_date.
I have started to put start_date and end_date to call-back, byt that didn't display correctly.
Could someone help me?
With regards Dorota
# -----------------------------------
# Connect to database OR data source here
# -----------------------------------
...
# -----------------------------------
# Retrieve data from database
# -----------------------------------
curs = db.cursor()
testy = """SELECT o.ticker, o.issuer, o.session_date, o.open, o.close, o.min
FROM olhc AS o;"""
curs.execute(testy)
data = []
for x in curs:
data.append(x)
df = pd.DataFrame(data, columns=['ticker', 'issuer', 'session_date', 'open', 'close', 'min'])
# convert the 'Session_date' column to datetime format
df['session_date']= pd.to_datetime(df['session_date'])
# -----------------------------------
# Initialize the app
# -----------------------------------
# This application is using a custom
# CSS stylesheet to modify the default
# styles of the elements.
# -----------------------------------
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
colors = dict(background='#3333',
text='#21617A',
font='#21617A')
# -----------------------------------
# Define app layout
# -----------------------------------
app.layout = html.Div(children=[
html.H1(children='Close & Open prices for company',
style={'textAlign': 'center', 'color': colors['text']}
),
html.Div(children=[
html.Div(style={
'textAlign': 'center', 'color': colors['font']
},
children='''Financial Dashboard for FellowshipPL
'''),
dcc.DatePickerRange(
id='my-date-picker-range',
calendar_orientation='horizontal',
day_size=30,
first_day_of_week=1, # 0 Sunday
clearable=False,
with_portal=False, # True on the page
min_date_allowed=date(2010, 1, 1),
max_date_allowed=date(2021, 12, 31),
initial_visible_month=date(2020, 1, 1),
start_date=date(2020, 1, 1),
end_date=date(2021, 12, 31),
display_format='MMM Do, YYYY', # lots possibilities
updatemode='singledate'
),
html.Div(id='output-container-date-picker-range'),
# -----------------------------------
# Define Dropdown
# -----------------------------------
dcc.Dropdown(style={
'textAlign': 'left',
'color': colors['text']
},
id='issuer_selection',
options=[
{'label': i, 'value': i} for i in df.issuer.unique()
], multi=False,
placeholder='Filter by name of company ...'),
html.H3(id='text'),
dcc.Graph(id='indicators')])
])
# -----------------------------------
# Define first callback
# -----------------------------------
@app.callback(
Output('output-container-date-picker-range', 'children'),
[Input('my-date-picker-range', 'start_date'),
Input('my-date-picker-range', 'end_date')])
def update_output(start_date, end_date):
string_prefix = 'You have selected: '
if start_date is not None:
start_date_object = date.fromisoformat(start_date)
start_date_string = start_date_object.strftime('%B %d, %Y')
string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
if end_date is not None:
end_date_object = date.fromisoformat(end_date)
end_date_string = end_date_object.strftime('%B %d, %Y')
string_prefix = string_prefix + 'End Date: ' + end_date_string
if len(string_prefix) == len('You have selected: '):
return 'Select a date to see it displayed here'
else:
return string_prefix
# @app.callback(
# Output('indicators', 'figure'),
# [Input('issuer_selection', 'value'),
# Input('my-date-picker-range', 'start_date'),
# Input('my-date-picker-range', 'end_date')])
@app.callback(
Output('indicators', 'figure'),
[Input('issuer_selection', 'value')])
def retrieve_plots(issuer):
filtered_df = df[df['issuer'] == issuer]
# dff = df.loc[start_date:end_date]
# Creating trace1
trace1 = go.Scatter(x=(filtered_df['session_date']),
y=filtered_df['close'],
mode="markers",
name="Close price",
marker=dict(color='#21617A', size=4),
text=filtered_df['session_date'])
# Creating trace2
trace2 = go.Scatter(x=(filtered_df['session_date']),
y=filtered_df['open'],
mode="markers",
name="Open price",
marker=dict(color='#C22E4C', size=3),
text=filtered_df.session_date)
# Creating trace3
trace3 = go.Scatter(x=(filtered_df['session_date']),
y=filtered_df['min'],
mode="markers",
name="Min price",
marker=dict(color='#7FD13A', size=2),
text=filtered_df.session_date)
data = [trace1, trace2, trace3]
layout = dict(yaxis=dict(title='Prices', ticklen=5, zeroline=False),
xaxis=dict(title='Date', ticklen=5, zeroline=False),
hovermode="x unified",
style={'textAlign': 'center',
'color': colors['text']
},
)
datapoints = {'data': data, 'layout': layout}
return datapoints
# -----------------------------------
# Run the app
# -----------------------------------
if __name__ == '__main__':
app.run_server(debug=True)