Synchronization of zoom for two heatmap plots - error

Dash Python
1

I found a sample of how to synchronize two plots here - two choropleth plots using relayoutData input

I tried to apply the same method to the synchronization of two heatmaps:

from dash import Dash, callback, html, dcc, dash_table, Input, Output
import plotly.graph_objects as go

def build_heatmap():
    return go.Figure(data=go.Heatmap(
                   z=[[1, None, 30, 50, 1], [20, 1, 60, 80, 30], [30, 60, 1, -10, 20]],
                   x=['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
                   y=['Morning', 'Afternoon', 'Evening'],
                   hoverongaps = False))

fig = build_heatmap()
fig2 = build_heatmap()

app = Dash(__name__)
app.layout = html.Div([
    dcc.Graph(id="choropleth", figure=fig),
    dcc.Graph(id="choropleth2", figure=fig2)
])

@app.callback(Output('choropleth2', 'figure'),
             [Input('choropleth', 'relayoutData')])
def graph_event(select_data):
    fig2.update_layout(select_data)
    return fig2

app.run_server(port=1010)

But it gives me an error when I zoom in in the first plot:

Traceback (most recent call last):
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\plotly\basedatatypes.py", line 188, in _check_path_in_prop_tree
    obj = obj[p]
TypeError: 'NoneType' object is not subscriptable

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\flask\app.py", line 2070, in wsgi_app
    response = self.full_dispatch_request()
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\flask\app.py", line 1515, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\flask\app.py", line 1513, in full_dispatch_request
    rv = self.dispatch_request()
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\flask\app.py", line 1499, in dispatch_request
    return self.ensure_sync(self.view_functions[rule.endpoint])(**req.view_args)
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\dash\dash.py", line 1383, in dispatch
    response.set_data(func(*args, outputs_list=outputs_list))
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\dash\_callback.py", line 151, in add_context
    output_value = func(*func_args, **func_kwargs)  # %% callback invoked %%
  File "C:\Users\VOITEC~1.SLA\AppData\Local\Temp/ipykernel_4644/1373555654.py", line 24, in graph_event
    fig2.update_layout(select_data)
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\plotly\basedatatypes.py", line 1403, in update_layout
    self.layout.update(dict1, overwrite=overwrite, **kwargs)
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\plotly\basedatatypes.py", line 5098, in update
    BaseFigure._perform_update(self, dict1, overwrite=overwrite)
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\plotly\basedatatypes.py", line 3875, in _perform_update
    err = _check_path_in_prop_tree(plotly_obj, key, error_cast=ValueError)
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\plotly\basedatatypes.py", line 212, in _check_path_in_prop_tree
    if prop[i][0] == "_":
TypeError: 'int' object is not subscriptable
Exception on /_dash-update-component [POST]
Traceback (most recent call last):
  File "C:\Envs\p37_rl_new_dash\lib\site-packages\plotly\basedatatypes.py", line 188, in _check_path_in_prop_tree
    obj = obj[p]
TypeError: 'NoneType' object is not subscriptable

What’s wrong? Should I use a different method to synchronize two heatmaps? Cheers

2

No the code is correct, just add an if condition where if there is no data to be shown in the graph just return None in this call back

@app.callback(Output(‘choropleth2’, ‘figure’),
[Input(‘choropleth’, ‘relayoutData’)])
def graph_event(select_data):
fig2.update_layout(select_data)
return fig2