Here is my problem. I create a dashboard with some different options, each option will display a different figure. I want to embed my dashboard link to some text, each text will lead to different option. For example, if user click on text ABC, it will lead to my dashboard with ABC option, or user click on text DEF, it will lead to my dashboard with DEF option. The problem is the url doesn’t change, if user click on my dashboard url, it will lead to default value. I’m thinking of add payload data to my url since i see for each option the url will have different payload data but still don’t sure how to do this. Is there anyone can help me with this problem?
Hi,
Welcome to the community!
Please take a look on the discussions here. I never tried this approach myself, but I don’t see why it wouldn’t work for your particular case. Follow up if it isn’t clear or if you still have questions, I will be happy to help!
I quite confused. Should I wrap link tag outside dropdown tag? if so, how can control which option will add to the path?
Hi @vuthanhdatt
As @jlfsjunior mentioned with the link he provided, it’s possible to do this using query strings.
The easiest way is to use the new pages/ api to create a multi-page app, then you can pass variables to a page like this:
See the full example here
home page:
from dash import dcc, html
import dash
dash.register_page(__name__, path="/")
layout = html.Div(
[
html.Div(
"This is a demo of how to use query strings to pass variables to other pages of a multi-page app: "
),
html.Span(
[
"See the bar chart page with tips data for ",
dcc.Link("Saturday ", href="/bar-chart?day=Sat"),
"or for ",
dcc.Link("Sunday ", href="/bar-chart?day=Sun"),
]
),
]
)
bar chart page - note that the layout is a function and it receives the day attribute from the query string and uses it to update the dropdown, which then updates the figure:
import dash
dash.register_page(__name__)
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
df = px.data.tips()
days = df.day.unique()
def layout(day=days[0], **other_unknown_query_strings):
return html.Div(
[
dcc.Dropdown(
id="dropdown",
options=[{"label": x, "value": x} for x in days],
value=day,
clearable=False,
),
dcc.Graph(id="bar-chart"),
]
)
@callback(Output("bar-chart", "figure"), Input("dropdown", "value"))
def update_bar_chart(day):
mask = df["day"] == day
fig = px.bar(df[mask], x="sex", y="total_bill", color="smoker", barmode="group")
return fig
Here’s what it looks like:
3 Likes
Nice. This exactly what i looking for. Many thanks
Hi @AnnMarieW ,
Would it also be possible to have the get paramter (“day=…”) update, once you change the value in the drop-down?
I’ve tried adding it in your example bar_chart.py, but it creates an endless loop:
import dash
dash.register_page(__name__)
from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
df = px.data.tips()
days = df.day.unique()
def layout(day=days[0], **other_unknown_query_strings):
return html.Div(
[
dcc.Dropdown(
id="dropdown",
options=[{"label": x, "value": x} for x in days],
value=day,
clearable=False,
),
dcc.Graph(id="bar-chart"),
]
)
@callback(
[
Output("bar-chart", "figure"),
Output("_pages_plugin_location", "search"),
],
Input("dropdown", "value")
)
def update_bar_chart(day):
mask = df["day"] == day
fig = px.bar(df[mask], x="sex", y="total_bill", color="smoker", barmode="group")
return [fig, 'day={}'.format(day)]
hmm, it would be nice to update the query string when the dropdown updates, but I’m not sure if there is a way to do that without reloading the page.
To fix the endless loop issue, you might try using the DropdownMenu component from the dash-bootstrap-components library. However I wouldn’t recommend this because rather than the dropdown just updating the figure, it will refresh the whole page.
1 Like
hi @AnnMarieW
btw, does it work for multi options?
currently i’m having a chart that update with multi option input like image below
when i go to
http://127.0.0.1:8050/chart?com=AAA&indi=sma-50&sma-200 or http://127.0.0.1:8050/chart?com=AAA&indi=sma-50&indi=sma-200 only first sma-50 option appear
So is there a way can handle it?
@AnnMarieW
So what type of indi param in layout function?. Currently my type is list, like code below
coms = ['AAA','VCB','HPG','FRT','FTS']
indis = ['sma-5','sma-50', 'sma-200']
def layout(com=coms[0], indi = indis):
return html.Div([
html.Div([dcc.Dropdown(
id = 'com',
options = [
{"label": x, "value": x} for x in coms
],
value=com,
clearable=False,
),
dcc.Dropdown(
id = 'indicator',
options = [
{"label": x, "value": x} for x in indis
],
value=indi,
clearable=False,
multi=True
)
]),
dcc.Graph(className='plot', id='chart')
])
When I query /chart?com=AAA&indi=sma-50&indi=sma-200 on my terminal appear
Calling...
{'com': 'AAA', 'indi': 'sma-50'}
Although i use them same key indi in my query twice but it seem indi type pass to the layout function still string not list as you mention.
@vuthanhdatt - Yes, you are correct (I was running a different version when I wrote my response, so I’m going to delete that post so it’s not confusing). Currently it ignores multiple values, and I’m looking into relaxing that restriction. I’ll post back here when I have an answer.
Thanks for raising this issue!
update:
I’m doing a PR to fix this. In the next release of dash-labs it will be possible to return multiple values. So in this case, this is what will be returned:
{'com': 'AAA', 'indi': ['sma-50', 'sma-200']}