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

EricLavault · Accepted Answer · 2023-03-16 14:32:43Z

With a clienside callback, using window.location :

app.clientside_callback( """ function(clickData) { if (clickData?.points?.length) { const point = clickData['points'][0]; const path = point.customdata ?? 'fallbackPath'; const url = `https://example.com/${path}`; window.location = url; } } """, 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 just replace the line 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) 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

Thanks @Ericvault it is working but I want it to open in new tab, so what changes should I make?
@see above I just edited the answer. It seems you can't with dcc.Location though.
I am using clickData to generate the url through this method --> triggered_id = dash.callback_context.triggered[0]['prop_id'].split('.')[0] if triggered_id=='graph' and clickData is not None: point = clickData['points'][0].get('customdata') url = f'exmp.com...{point}' how can I do this using the first method that you have told i.e. client side callbacks
As I mentioned previsously, "you don't need to check the trigger id if you have only one Input()". For the clickData is not None and the url formatting, see my last edit. Nb. I provide a fallback value for customdata in the example as it depends on whether you have previously set it, which might not be the case for other people landing on this post. You can inspect what does clickData look in the browser console, for this use console.log(clickData); and open the browser devtoools.

120 099 101 105 110 103 · Accepted Answer · 2023-03-14 13:15:16Z

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)

Collectives™ on Stack Overflow

Redirect to a url in dash

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related