How to make a ipywidget button update a specific axis of a matplotlib figure?

Question

How can I make a ipywidget button in a Jupyter notebook update a plot in a specific axis?

I already know how to make a button update a plot when using a single axis, like so:

import ipywidgets as widgets
from IPython.display import display
import matplotlib.pyplot as plt
import numpy as np

btn = widgets.Button(description='Click')
display(btn)

output = widgets.Output()

def on_click_fn(obj):
    output.clear_output()
    values = np.random.rand(10)
    with output:
        plt.plot(values)
        plt.show()

btn.on_click(on_click_fn)
display(output)

In this example, clicking the button updates the plot and shows a new set of 10 random points. I thought it would be simple to extend this to updating a specific axis, and attempted the following:

import ipywidgets as widgets
from IPython.display import display
import matplotlib.pyplot as plt
import numpy as np

btn = widgets.Button(description='Click')
display(btn)

output = widgets.Output()
fig, ax = plt.subplots(ncols=2)

def on_click_fn(obj):
    output.clear_output()
    values = np.random.rand(10)
    with output:
        ax[0].plot(values)
        plt.show()

btn.on_click(on_click_fn)
display(output)

However, clicking the button in this example does not seem to do anything. I tried different combinations of adding/removing the plt.show() call, using fig.draw() instead, using fig.canvas.draw_idle(), etc, without much success. What's the correct, least "hacky" way of accomplishing this?

Note: This question is only about how to make a button update a plot, like my first example, instead of making the button update a specific axis only.

I don't get the problem. The second code works just fine with or without plt.show(). The first code is missing fig, ax = plt.subplots(), but also working just fine. Is it not the output that you are trying to achieve? — Karina
– Karina, Commented Jul 28, 2021 at 12:29
In my machine the second code does not work. It produces two subplots, but clicking the button does not update one of them to show new random numbers. Did you try running the second code as is and it worked in your machine? — JLagana
– JLagana, Commented Jul 28, 2021 at 12:32
It works for me, as I can't attach any image in comment, I'll put it as an answer, I'll delete it afterwards (since it is not an answer). — Karina
– Karina, Commented Jul 28, 2021 at 12:47

Karina · Accepted Answer · 2021-07-28 13:52:52Z

2

with this code

import ipywidgets as widgets
from IPython.display import display
import matplotlib.pyplot as plt
import numpy as np
%matplotlib widget

btn = widgets.Button(description='Click')
display(btn)

output = widgets.Output()
fig, ax = plt.subplots(ncols=2)

def on_click_fn(obj):
    output.clear_output()
    values = np.random.rand(10)
    with output:
        ax[0].plot(values)
        plt.show()

btn.on_click(on_click_fn)
display(output)

I got this output

edited Jul 28, 2021 at 13:52

answered Jul 28, 2021 at 12:49

Karina

1,3002 gold badges7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

JLagana Over a year ago

Interesting. And where's the button? If you click it, does it update the axis on the left and show new numbers? Also, why are there four lines in the plot, instead of a single one? Is that the output after pressing the button a couple of times?

Karina Over a year ago

I think I understand the problem. is the import that you listed in the code above the complete import that you have? you need %matplotlib widget as well for the interactive part in jupyter (or am I actually going further away from your actual problem?)

Karina Over a year ago

the button is right above the plot, I cropped the screenshot, and yes, I clicked it 4 times to make sure that it works ;)

JLagana Over a year ago

Ah, Karina. I think we understand each other now! No, I did not have a %matplotlib widget in my code. I'll try adding it and will get back with the answer.

JLagana Over a year ago

Yes, adding %matplotlib widget (and installing the package) indeed solved the problem. Maybe you can edit your answer to include that, and I'll mark it as correct? :)

|

Collectives™ on Stack Overflow

How to make a ipywidget button update a specific axis of a matplotlib figure?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related