OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

python/dash/plotly Updating a figure does not work

  • Thread starter Thread starter Jörg Neulist
  • Start date Start date
J

Jörg Neulist

Guest
I am trying to create two linked plots. When you click a point in the fig_overview plot, the fig_detail plot should change to show a specific view for that.

To my eyes, I have followed this tutorial to the letter. The first plot and the initial dummy plot show up as expected. Unfortunately, the second figure does not update.

The code is running in WSL on Python 3.10.12, jupyterlab 4.1.8, dash 2.17.0.

Code:
app = Dash('prrdash', external_stylesheets=[dbc.themes.SOLAR])
app.layout = html.Div(children=[
    dcc.Graph(id='fig_overview', figure=fig_overview(data)),
    dcc.Graph(id='fig_detail', figure=fig_detail(data, None))
])

@app.callback(
    Output('fig_detail', 'figure'),
    Input('fig_overview', 'clickData')
)
def select_project(clickData):
    if clickData is not None:
        task = clickData['points'][0]['customdata'][0]
        fig = fig_detail(data, task)
        return fig

app.run()

What I have tried so far:

  1. Verifying the task extraction logic: I can print(task) inside select_project() and get the expected result.
  2. Verifying the plot generator fig_detail(): I can even do fig.show() inside the callback and get the expected result.
  3. Vary mode and jupyter_mode of app.run().
  4. Vary the layout. The code already shows the stripped down version of the DOM.
  5. Vary the ids - that shows you how stumped I am. No, changing the names does not change anything.
  6. I do have a work-around: wrapping the diagram in an additional div and replacing its children with a whole new dcc.Graph does work as intended. But I really would love to understand why this simplified approach fails!

Do you have any suggestions for what to try next? Or even just a little pointer on how to debug.
<p>I am trying to create two linked plots. When you click a point in the <code>fig_overview</code> plot, the <code>fig_detail</code> plot should change to show a specific view for that.</p>
<p>To my eyes, I have followed <a href="https://dash.plotly.com/basic-callbacks" rel="nofollow noreferrer">this tutorial</a> to the letter. The first plot and the initial dummy plot show up as expected. Unfortunately, the second figure does not update.</p>
<p>The code is running in WSL on Python 3.10.12, jupyterlab 4.1.8, dash 2.17.0.</p>
<pre><code>app = Dash('prrdash', external_stylesheets=[dbc.themes.SOLAR])
app.layout = html.Div(children=[
dcc.Graph(id='fig_overview', figure=fig_overview(data)),
dcc.Graph(id='fig_detail', figure=fig_detail(data, None))
])

@app.callback(
Output('fig_detail', 'figure'),
Input('fig_overview', 'clickData')
)
def select_project(clickData):
if clickData is not None:
task = clickData['points'][0]['customdata'][0]
fig = fig_detail(data, task)
return fig

app.run()
</code></pre>
<p>What I have tried so far:</p>
<ol>
<li>Verifying the <code>task</code> extraction logic: I can <code>print(task)</code> inside <code>select_project()</code> and get the expected result.</li>
<li>Verifying the plot generator <code>fig_detail()</code>: I can even do <code>fig.show()</code> inside the callback and get the expected result.</li>
<li>Vary <code>mode</code> and <code>jupyter_mode</code> of <code>app.run()</code>.</li>
<li>Vary the layout. The code already shows the stripped down version of the DOM.</li>
<li>Vary the <code>id</code>s - that shows you how stumped I am. No, changing the names does not change anything.</li>
<li>I <em>do</em> have a work-around: wrapping the diagram in an additional <code>div</code> and replacing its <code>children</code> with a whole new <code>dcc.Graph</code> does work as intended. But I really would love to understand why this simplified approach fails!</li>
</ol>
<p>Do you have any suggestions for what to try next? Or even just a little pointer on how to debug.</p>
 
Top