[Python] Issue with plotly dash dropdown

I'm trying to create a plotly dashboard which includes a pie chart with a dropdown menu to select the data for that chart.

When I initially load the dashboard, it displays the first option with the correct data, but when I then select any dropdown option (including the option the dropdown defaults to) that selected option's data doesn't match to what I entered. If I hover over the new data, I see one of the other drop down options in the hover text.

Is there a way to get the data to 'stick' to the appropriate Pie charts?

import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
import plotly.express as px
import dash_bootstrap_components as dbc
import flask
import pandas as pd
import time
import os
import pandas as pd
import plotly.express as px
from plotly import graph_objects as go
import random

server = flask.Flask('app')
server.secret_key = os.environ.get('secret_key', 'secret')

# Define app object with url_base_pathname value from setup.sh
app = dash.Dash('app', server=server,external_stylesheets=[dbc.themes.VAPOR], url_base_pathname='path')


# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
from plotly import graph_objects as go


# creating random data through randomint
# function of numpy.random


x = ['To Be Run', 'Ran with Errors', 'Ran Error Free']

plot = go.Figure(data=[
go.Pie(
name='WR AMXG',
labels=x,
values=[random.randrange(50, 200, 3),random.randrange(50, 200, 3),random.randrange(50, 200, 3)]),
go.Pie(
name='WR CMXG',
labels=x,
values=[random.randrange(50, 200, 3),random.randrange(50, 200, 3),random.randrange(50, 200, 3)]),
go.Pie(
name='WR EMXG',
labels=x,
values=[random.randrange(50, 200, 3),random.randrange(50, 200, 3),random.randrange(50, 200, 3)]),
go.Pie(
name='OO AMXG',
labels=x,
values=[random.randrange(50, 200, 3),random.randrange(50, 200, 3),random.randrange(50, 200, 3)]),
go.Pie(
name='OO CMXG',
labels=x,
values=[random.randrange(50, 200, 3),random.randrange(50, 200, 3),random.randrange(50, 200, 3)]),
go.Pie(
name='OO EMXG',
labels=x,
values=[random.randrange(50, 200, 3),random.randrange(50, 200, 3),random.randrange(50, 200, 3)]),
go.Pie(
name='OO MMXG',
labels=x,
values=[random.randrange(50, 200, 3),random.randrange(50, 200, 3),random.randrange(50, 200, 3)]),
go.Pie(
name='OO PMXG',
labels=x,
values=[50,100,150]),

go.Pie(
name='OC AMXG',
labels=x,
values=[80,52,678]),
go.Pie(
name='OC CMXG',
labels=x,
values=[56, 123, 982]
),
go.Pie(
name='OC PMXG',
labels=x,
values=[100, 200, 500]
)

])


# Add dropdown
plot.update_layout(
updatemenus=[
dict(
active= 1,
buttons=list([ dict(label="OC CMXG",
method="update",
args=[{"visible": [False, True,False, False, False, False, False, False, False, False, False]},
{"title": "OC CMXG",
}]),
dict(label="OC PMXG",
method="update",
args=[{"visible": [True, False,False, False, False, False, False, False, False, False, False]},
{"title": "OC PMXG",
}]),

dict(label='OC AMXG',
method="update",
args=[{"visible":[False,False,True, False, False, False, False, False, False, False, False]},
{"title":"OC AMXG",
}]),
dict(label='OO PMXG',
method="update",
args=[{"visible":[False,False,False,True, False, False, False, False, False, False, False]},
{"title":"OO PMXG",
}]),
dict(label='OO MMXG',
method="update",
args=[{"visible":[False,False,False, False,True, False, False, False, False, False, False]},
{"title":"OO MMXG",
}]),
dict(label='OO EMXG',
method="update",
args=[{"visible":[False,False,False, False, False,True, False, False, False, False, False]},
{"title":"OO EMXG",
}]),
dict(label='OO CMXG',
method="update",
args=[{"visible":[False,False,False, False, False, False,True, False, False, False, False]},
{"title":"OO CMXG",
}]),
dict(label='OO AMXG',
method="update",
args=[{"visible":[False,False,False, False, False, False, False,True, False, False, False]},
{"title":"OO AMXG",
}]),
dict(label='WR EMXG',
method="update",
args=[{"visible":[False,False,False, False, False, False, False, False,True, False, False]},
{"title":"WR EMXG",
}]),
dict(label='WR CMXG',
method="update",
args=[{"visible":[False,False,False, False, False, False, False, False, False,True, False]},
{"title":"WR CMXG",
}]),
dict(label='WR AMXG',
method="update",
args=[{"visible":[False,False,False, False, False, False, False, False, False, False,True]},
{"title":"WR AMXG",
}])
]),
)
])
app.layout = html.Div(children=[
# All elements from the top of the page
dbc.Row([
# New Div for all elements in the new 'row' of the page
# dbc.Col(dcc.Graph(id = 'graph1',figure = plot,style={'width':'90%'})),
dbc.Col(dcc.Graph(id='graph2',figure=fig, style={'width': '90%'}))
]),
])

if __name__ == '__main__':
# Define run_server port with internal port value from setup.sh
app.run(port=8060)

Continue reading...