Is there anyway to use the same link but lead to different option?

Dash Python
4

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:

query_strings

3 Likes