I am trying to use the boxSelect tool with lines in order feed a callback the range selected. Unfortunately, the boxSelect tool doesnt even show up with lines so I had to add 2 points of a scatterplot just to see it. Once I got around that, I saw that the callback wouldnt activate. After hours if trying to identify the problem, I realized that boxselect only works when there are a small amount of points on the graph. If this exceeds a pretty small value (in my case even 100 points), the selectValue callback no longer does anything.
See this code:
import numpy as np
# plotting imports
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go
app = dash.Dash()
app.config.supress_callback_exceptions = True
plot1 = dcc.Graph(id='plot1')
plot2 = dcc.Graph(id='plot2')
N=100
plot1_data = [{'x': np.random.rand(N),
'y': np.random.rand(N),
'name': 'line',
},
{'x': [0, 1, 2],
'y': [0, 1, 0],
'mode': 'markers',
'marker': {'size': 10},
'name': 'scatter'
},
]
plot1_fig = {
'data': plot1_data,
'layout': go.Layout(
hovermode='closest'
)
}
plot1.figure=plot1_fig
app.layout = html.Div([plot1, plot2], style={'width': '100%'})
@app.callback(
Output('plot2', 'figure'),
[Input('plot1', 'selectedData')])
def update_plot2(some_input):
print('callback activated')
x = np.random.rand(10)
y = np.random.rand(10)
plot2_data = [{'x': x,
'y': y,
'mode': 'markers',
'marker': {'size': 10}
}]
plot2_fig = {
'data': plot2_data,
'layout': go.Layout(
hovermode='closest'
)
}
return plot2_fig
if __name__ == '__main__':
app.run_server()
If N=10, the code works fine.
I have a few questions:
- This feature of boxselect / selectData callback should be documented and a warning should show up
- How can I enable the functionality I want, which is to select a portion of the graph and send the ranges selected (not the points) to a callback. I know I can use the zoom relayoutData callback, but i specifically dont want the graph to change or zoom in.