Update plot with new data on button click

šŸ“Š Plotly Python
1

Noob here. I would like to update the two plots on button click with new random data that is generated each time the button is clicked.

Nothing I try with fig.update_layout or fig.update_traces is working and Iā€™m not winning with any tutorials/manuals.

Thanks in advance.

import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
import random
import ipywidgets as widgets

x_rand_list = []
y_rand_list = []
nums = []

for i in range(0, 10):
        nums.append(i+1)
        x_rand_list.append(random.randint(0,10))
        y_rand_list.append(random.randint(0,10))

df = pd.DataFrame(
        {'nums': nums,
         'x_val': x_rand_list,
         'y_val': y_rand_list,
        })

print(df)

button = widgets.Button(description='New Random Data')

display(button)

def on_button_clicked(b):
    x_rand_list = []
    y_rand_list = []
    for i in range(0, 10):
        x_rand_list.append(random.randint(0,10))
        y_rand_list.append(random.randint(0,10))
    df = pd.DataFrame(
        {'nums': nums,
         'x_val': x_rand_list,
         'y_val': y_rand_list,
        })
    print(df)
    
button.on_click(on_button_clicked)
    
fig = go.Figure()
fig.add_trace(go.Scatter(x=df['nums'], 
                        y=df['x_val'], 
                        mode='lines', 
                        name='y values' 
                        )
                )

fig.add_trace(go.Scatter(x=df['nums'], 
                        y=df['y_val'], 
                        mode='lines', 
                        name='x values' 
                        )
                )

fig.show()