Categorical data points are not displayed on scatter plot when using multi select drop-down

Dash Python
1

Suppose we have the following dataframe pulled from SQL called df:

ProdHouse Date_Year Date_Month
Software6 2001 Jan
Software6 2020 Feb
Software1 2004 Mar
Software4 2004 Apr
Software5 2004 May
Software3 2009 Dec
Software5 1995 Dec
Software3 1995 Oct

The objective is to display the total number of products per month. The year is selected using the drop down. It appears that when the x-axis is categorical (i.e month) it does not display the data points. However, if i substitute it with an integer, points are displayed.

def serve_layout():
session_id = str(uuid.uuid4())

return   html.Div([ html.Div(session_id, id='session-id', style={'display': 'none'}),
html.Label('Year'),
dcc.Dropdown( id='year-dropdown',
    options=[
               {'label': year ,'value': year} for year in df['Date_Year'].unique()
    ],
    value=[2020],#[df['Date_Year'].unique()],
    multi=True   ),
dcc.Graph(id='graph-with-dropdown')      
] , style={'width':'33%','display':'inline-block'}  )

app.layout = serve_layout

@app.callback(
dash.dependencies.Output(‘graph-with-dropdown’, ‘figure’),
[dash.dependencies.Input(‘year-dropdown’, ‘value’)]) # Add the marks as a State
def update_figure(selected_year):
print('selected_year: ', selected_year)
filtered_df = df[df.Date_Year.isin(selected_year)]
#filtered_df = df[df.Date_Year == selected_year]
df_grouped = filtered_df.groupby([‘ProdHouse’,‘Date_Month’]).size().rename(‘Total_Active_Products’).reset_index()
traces=

for i in filtered_df.ProdHouse.unique():        
    df_by_ProdHouse = df_grouped[df_grouped['ProdHouse'] == i]
    traces.append(go.Scatter(
        x=df_by_ProdHouse['Date_Month'], #df_by_ProdHouse['Total_Active_Products'],
        y=df_by_ProdHouse['Total_Active_Products'],
        ##text=df_by_ProdHouse['brand'],
        mode='markers',
        opacity=0.7,
        marker={
            'size': 15,
            'line': {'width': 0.5, 'color': 'white'}
        },
        name=i

) )
return {
‘data’: traces,
‘layout’: dict(
xaxis={‘type’: ‘linear’, ‘title’: ‘Active Products Per Month’},
yaxis={‘title’: ‘Total Active Products’},
margin={‘l’: 40, ‘b’: 40, ‘t’: 10, ‘r’: 10},
legend={‘x’: 0, ‘y’: 1},
hovermode=‘closest’,
transition = {‘duration’: 500},
)
}

result
result668×523 11.3 KB

How would one modify the above code so that x-axis can be a categorical variable?

In addition, do I need to do a group by to obtain the totals? Can this be optimised?