1

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
Devendra Yadav
  • 91
  • 10

2 Answers2

2

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
EricLavault
  • 12,130
  • 3
  • 23
  • 45
  • Thanks @Ericvault it is working but I want it to open in new tab, so what changes should I make? – Devendra Yadav Mar 15 '23 at 15:50
  • @see above I just edited the answer. It seems you can't with dcc.Location though. – EricLavault Mar 15 '23 at 16:03
  • 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'https://www.exmp.com.../{point}' how can I do this using the first method that you have told i.e. client side callbacks – Devendra Yadav Mar 16 '23 at 13:31
  • 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. – EricLavault Mar 16 '23 at 14:26
1

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)

120 099 101 105 110 103
  • 90
  • 10