Redirect to a url in dash

Question

I’m using dash to build a dashboard where I am creating a unique url whenever a particular data point is clicked, how can I redirect users to this created url?
I’m using the below given code where whenever someone click on any data points, click event will trigger and callback function executes.

app.layout = html.Div(children=[
    html.H1(children='Plot'),
    dcc.Graph(id='example-graph',
               figure = plot()),
    html.Div(id='dummy-div')
])
@app.callback(Output('dummy-div', 'childern'),
              Input('graph', 'clickData'))
def redirect_to_url(clickData):
    triggered_id = dash.callback_context.triggered[0]['prop_id'].split('.')[0]
    if triggered_id=='graph' and clickData is not None:
       url = 'https:www.example.com'
       # need to develop to a method to redirect to this url

Asked By: Devendra Yadav

||

Source

Answer 1

With a clienside callback, using window.location :

app.clientside_callback(
    """
    function(data) {
      console.log(data);
      window.location = 'https://dash.plotly.com/clientside-callbacks';
    }
    """,
    Output('dummy-div', 'children'),
    Input('example-graph', 'clickData'),
    prevent_initial_call=True
)

Nb. This option also allows to open the target page in a new tab, for this replace by window.location = url with :

window.open(url, '_blank');

Or, by adding a dcc.Location() component in the layout, you can then update its href property using a basic callback :

app.layout = html.Div(children=[
    dcc.Location(id='location'),
    html.H1(children='Plot'),
    dcc.Graph(id='example-graph', figure=plot()),
    html.Div(id='dummy-div')
])

@app.callback(Output('location', 'href'),
              Input('example-graph', 'clickData'),
              prevent_initial_call=True) # <- prevent redirect on page load !
def redirect_to_url(clickData):
    # do something with clickData
    url = 'https:www.example.com'
    return url

A few things to note :

You don’t need to check the trigger id if you have only one Input() (ie. the condition if triggered_id=='graph' is not necessary)
Ensure your Input/Output ids match what you have in the layout (‘graph’ vs ‘example-graph’)
Redirecting the user "whenever a particular data point is clicked" implies the condition clickData is not None instead of clickData is None

Answered By: EricLavault

Answer 2

I believe you can use dcc.Location with this.
That would look like this:

@app.callback(Output('dummy-div', 'children'),
              Input('graph', 'clickData'))
def redirect_to_url(clickData):
    triggered_id = dash.callback_context.triggered[0]['prop_id'].split('.')[0]
    if triggered_id=='graph' and clickData is None:
       url = 'https:www.example.com'
       # need to develop to a method to redirect to this url
       return dcc.Location(href=url)

https://dash.plotly.com/dash-core-components/location

(if you are already using a location in the layout you can change the output to that)

Answered By: 120 099 101 105 110 103

Redirect to a url in dash

Question:

Answers: