Hi everyone,
I’m quite new using Dash and plotly and I’m facing a problem i can’t find any solution.
I’ve done everything like in this tutorial : https://dash.plot.ly/getting-started-part-2 but somehow it does not work exactly the same.
Let me explain what I’m dealing with.
I want to do a dashboard that plots a funnel for a website selected in a first dropdown menu, then once this website is chosen I have a second dropdown menu to select a product (this list of products depends on the website). I also have a datepickerrange but this part is not useful for the problem I’m facing right now.
The function tunnel() is a function I created that generates data needed for the funnel chart (SQL query, cleaning, …).When a website is chosen it will generate a dataframe with the funnel data for each products available. This is why I have a second dropdown menu, to select a specific product in this dataframe.
My app “works” but when I’m selecting a new website (rather than the one per default), the list of available products is not updated and the graph is not displayed anymore.
But if I click again on the website then suddenly my list of available products is updated and the funnel chart is displayed.
Does anyone know how could I solve this ?
(In the code below you’ll see I used global df which isn’t safe I know it now since I just read the part 6 of the tutorial but I’d like to deal with that after my dropwdowns issues).
Here is my code :
app = dash.Dash()
res_ad = False
# Website choice
site = "site1"
site_name = {"site1": "Site A",
"site2": "Site B"
}
end = date.today()
start = end - timedelta(days=30)
df = tunnel(site, start, end, 0.25, res_ad)
# Dropdown menu for websites :
opts_site = [{'label': str(site_name[i]), 'value': str(i)} for i in site_name.keys()]
fig = go.Figure()
fig.add_trace(go.Funnel(
name="Produit",
orientation="h",
y=list(df.loc[df.produit == df.produit.unique()[0], "step"].values),
x=list(df.loc[df.produit == df.produit.unique()[0], "cumsum"].values),
textinfo="value+percent initial"
))
graph = dcc.Graph(id='plot', figure=fig, style={"height": "100vh", "width": "95vw"})
app.layout = html.Div([
html.Div([
html.H1(children="Funnel",
style={
'textAlign': 'center',
}),
]),
html.P([
html.Label("Website choice"),
dcc.Dropdown(
id='sites',
options=opts_site,
value=site)
],
style={
'textAlign': 'center',
'width': '400px',
'fontSize': '20px',
'display': 'inline-block'}
),
html.P([
html.Label("Product choice"),
dcc.Dropdown(id='produits')
],
style={
'textAlign': 'center',
'width': '400px',
'fontSize': '20px',
'padding-left': '100px',
'display': 'inline-block'}
),
html.P([
html.Label("Date picker"),
dcc.DatePickerRange(
id='my-date-picker-range',
min_date_allowed=date(2019, 1, 1),
max_date_allowed=end,
initial_visible_month=end,
display_format="D MMM YYYY",
start_date=start,
end_date=end)
],
style={
'textAlign': 'center',
'width': '400px',
'fontSize': '20px',
'display': 'inline-block'}
),
graph])
@app.callback(Output('produits', 'options'),
[Input('sites', 'value')])
def update_produits_options(website):
return [{'label': str(i), 'value': str(i)} for i in df.produit.unique()]
@app.callback(Output('produits', 'value'),
[Input('produits', 'options')])
def set_produits_value(prod):
return prod[0]['value']
@app.callback(Output('plot', 'figure'),
[Input('sites', 'value'),
Input('produits', 'value'),
Input('my-date-picker-range', 'start_date'),
Input('my-date-picker-range', 'end_date')])
def update_figure(website, prod, start_dt, end_dt):
global df
start_dt = pd.to_datetime(start_dt).date()
end_dt = pd.to_datetime(end_dt).date()
df = tunnel(website, start_dt, end_dt, 0.25, res_ad)
trace = go.Funnel(
name=website,
orientation="h",
y=list(df.loc[df.produit == prod, "step"].values),
x=list(df.loc[df.produit == prod, "cumsum"].values),
textinfo="value+percent initial"
)
fig = go.Figure(data=trace)
return fig
I hope I’ve been clear enough, if not don’t hesitate to ask me questions.
Thanks
