How to make graph using streamlit with the widget, but theres multiple widget?

Question

so i want to make callback graph that can display the graph within theres two widget there (radio and selectbox), but i have some problem in here, the radio button (gender clasify) theres no change when i choose the gender, the graph still stay at same graph, and i want to input the selectbox with variable of the 'City' but theres somethin error message "DuplicateWidgetID"

this is my code:

with st.expander('Favorite product by Gender within city'):
        column1, column2 = st.columns([3,1])
        #Variables 
        #male_product = df[df['gender'] == 'Male'].groupby(['product_line','gender']).count()['quantity'].sort_values(ascending=False).reset_index()
        #female_product = df[df['gender'] == 'Female'].groupby(['product_line','gender']).count()['quantity'].sort_values(ascending=False).reset_index()
        

    #Callback
    selected_gender = st.radio('What is your Gender:', ['Male', 'Female'], index = 0)
    select_city = column2.selectbox('Select City', df.sort_values('City').City.unique())
    male_product=px.histogram(df.sort_values('product_line') ,x='product_line', y='gross_income', color = 'product_line',)
    female_product=px.histogram(df.sort_values('product_line') ,x='product_line', y='gross_income', color = 'product_line',)

    if selected_gender == 'Male':
        st.write('What men buy most!')
        st.plotly_chart(male_product, use_container_width=True) 
    else:
        st.write('What female buy most!')
        st.plotly_chart(female_product, use_container_width=True) 

and the display graph is

but theres will be error when i entry "select_city" to the code and theres will be notification like this:

thanks for your attention, and can someone help me.

Answer 1

This involves creating a dataframe with gender and city filters. I just created a sample data to demonstrate the solution.

Code

import streamlit as st 
import plotly.express as px
import pandas as pd


data = {
    'City': ['c1', 'c2', 'c3', 'c1', 'c3', 'c2', 'c1'],
    'product_line': ['p1', 'p2', 'p3', 'p3', 'p2', 'p1', 'p4'],
    'quantity': [8, 4, 3, 12, 5, 6, 4],
    'gross_income': [250, 150, 300, 250, 300, 400, 500],
    'gender': ['Male', 'Female', 'Male', 'Male', 'Female', 'Female', 'Male']
}

df = pd.DataFrame(data)
st.write(df)


with st.expander('Favorite product by Gender within city'):
    column1, column2 = st.columns([3,1])
        
    # Allow the user to select a gender.
    selected_gender = st.radio('What is your Gender:', df.gender.unique(), index = 0)

    # Apply gender filter.
    gender_product = df[df['gender'] == selected_gender]

    # Allow the user to select a city.
    select_city = column2.selectbox('Select City', df.sort_values('City').City.unique())

    # Apply city filter
    city_gender_product = gender_product[gender_product['City'] == select_city]

    # Use the city_gender_product dataframe as it has filters for gender and city.
    fig = px.histogram(city_gender_product.sort_values('product_line') ,x='product_line', y='gross_income', color = 'product_line',)

    if selected_gender == 'Male':
        st.write('What men buy most!')
    else:
        st.write('What female buy most!')

    st.plotly_chart(fig, use_container_width=True) 

Output

1. Initial view or Male/city c1

2. Male/c3

3. Female/c2