6

I'd like to create two web pages which contain iframed plotly-dash graphs. I'd like to implement click events of the first graph to redirect to the other page (with more info about that specific datum)

I followed this guide, but the click event is not triggered in my setup even when I installed ipywidgets, node.js and plotlywidgets extension to the python venv I'm running it in. There is a note in the exaple above:

Note: Callbacks will only be triggered when the trace belongs to a instance of plotly.graph_objs.FigureWidget and it is displayed in an ipywidget context. Callbacks will not be triggered on figures that are displayed using plot/iplot.

The example is using the FigureWidget and I'm drawing it by passing the figure to dcc.Graph which should be the same as fig.show(). The whole code looks like this

import plotly.graph_objects as go
import numpy as np
np.random.seed(1)

x = np.random.rand(100)
y = np.random.rand(100)

fig = go.FigureWidget([go.Scatter(x=x, y=y, mode='markers')])

scatter = fig.data[0]
colors = ['#a3a7e4'] * 100
scatter.marker.color = colors
scatter.marker.size = [10] * 100
fig.layout.hovermode = 'closest'


# create our callback function
def update_point(trace, points, selector):
    c = list(scatter.marker.color)
    s = list(scatter.marker.size)
    for i in points.point_inds:
        c[i] = '#bae2be'
        s[i] = 20
        with fig.batch_update():
            scatter.marker.color = c
            scatter.marker.size = s


scatter.on_click(update_point)

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    dcc.Graph(figure=fig)
]) 

app.run_server(debug=True, use_reloader=False)

I don't know how to make/be sure that it is displayed in ipywidget context though.

I'm aware of a workaround like this with layout.clickmode = select and a separate button, but I'd like to make the figure's on_click() events working.

Could someone please help me to make this work?

Jana Kundova
  • 61
  • 1
  • 3

1 Answers1

2

Regarding this part of the documentation:

in an ipywidget context

It means that this will only work in a jupyter notebook for example.

If you wish to have this kind of graph interaction when using dash, you should use the dcc.Graph attributes to fire your callbacks (hoverData, clickData, selectedData, relayoutData).

See more here: Interactive Visualizations

raphaelts
  • 381
  • 3
  • 13