I have problems with the multiple selection dropdown and graphics

Crst · June 22, 2022, 1:55pm

This is my code it compiles well and when I do the filters through the multi dropdown it works fine, the problem is when I remove all the filters the graphics are empty

app = dash.Dash(__name__)

cantid = len(df.index)

tipopersonal = df['Tipopersonal'].unique()


app.layout = html.Div(children=[ 
    
    
    html.Div(children=[
        
    html.Label('ANALISIS DE REINGRESOS CON CONSUMO MENOR AL 50%',style={'width': '100%', 'display': 'inline-block','text-align':'center'}),    
    html.Label('Seleccione tipo de personal'),
    dcc.Dropdown(
                options=[{'label':x, 'value':x} for x in aaa6['Tipopersonal'].unique()],
                #value=[options],
                multi=True,
                searchable=True,
                clearable=False,
                id='dtipopersonal'
            )], style={'width': '33%', 'display': 'inline-block'}),  

    
    
    html.Div(children=[
        
    html.Label('Seleccione Motivo'),
    dcc.Dropdown(
        options=[{'label':h, 'value':h} for h in aaa6['Motivo'].unique()],
                multi=True,
                searchable=True,
                #persistence = True,
                #value=[lista]
                #clearable = True ,
                id='motiv'
            )], style={'width': '33%', 'display': 'inline-block'}),
    
    html.Div(children=[
        
    html.Label('Seleccione centro de costo'),
    dcc.Dropdown(
        options=[{'label':c, 'value':c} for c in aaa6['Ncc'].unique()],
                multi=True,
                searchable=True,
                #value: allID',
                #persistence = True,
                #value=[lista]
                #clearable = True ,
                id='dd_centroc'
            )], style={'width': '33%', 'display': 'inline-block'}), 
    
    html.Div(children=[
        
    html.Label('Seleccione bodega'),
    dcc.Dropdown(
        options=[{'label':l, 'value':l} for l in aaa6['Nombre Bodega'].unique()],
                multi=True,
                searchable=True,

                id='bode'
            )], style={'width': '50%', 'display': 'inline-block'}), #allow multiple dropdown values to be selecte
    
    html.Div(children=[
        
    html.Label('Seleccione material'),
    dcc.Dropdown(
        options=[{'label':m, 'value':m} for m in aaa6['Descripcion'].unique()],
                multi=True,
                searchable=True,
                id='mate'
            )], style={'width': '50%', 'display': 'inline-block'}),
    
    html.Div(children=[
        
    html.Label('Seleccione nombre de personal'),
    dcc.Dropdown(
        options=[{'label':t, 'value':t} for t in aaa6['Nombreentrega'].unique()],
                multi=True,
                searchable=True,
                id='entre'
            )], style={'width': '50%', 'display': 'inline-block'}),
    
    html.Div(children=[
        
    html.Label('Seleccione fecha de inicio'),
    dcc.Dropdown(
        options=[{'label':t, 'value':t} for t in fech['nombre'].unique()],
                multi=True,
                searchable=True,
                id='feini'
            )], style={'width': '25%', 'display': 'inline-block'}),
    
    
        
    html.Div(children=[
        
    html.Label('Seleccione fecha de fin'),
    dcc.Dropdown(
        options=[{'label':t, 'value':t} for t in fech['nombre'].unique()],
                multi=True,
                searchable=True,
                id='fefin'
            )], style={'width': '25%', 'display': 'inline-block'}),
    

    
        



    

    

    html.Label(f'Cantidad de transacciones     {cantid}     ',style={'width': '100%', 'display': 'inline-block'}),    
    dcc.Graph(id='motix',figure = px.pie(aaa6, values='cantidadreingresada' , names='Motivo', title='Motivos de reingresos'),style={'width': '35%', 'display': 'inline-block'}),##figure=px.pie(aaa6, values='cantidadreingresada' , names='Motivo', title='Motivo'),style={'width': '100%', 'display': 'inline-block'},
    
    
    
    dcc.Graph(id='areasgraf',figure=px.bar(nccn, x=ccn, y=ccc,  title='Reingresos por centro de costo'),style={'width': '65%', 'display': 'inline-block'}),
    dcc.Graph(id='person',figure=px.bar(nen, x="Nombreentrega", y="nombre", title='Personal que mas reingresa'),style={'width': '50%', 'display': 'inline-block'}),
    
    #dcc.Graph(id='materia',figure = px.pie(mater, values='Descripcion' , names='nombre', title='Materiales mas reingresados'),style={'width': '100%', 'display': 'inline-block'}),##figure=px.pie(aaa6, values='cantidadreingresada' , names='Motivo', title='Motivo'),style={'width': '100%', 'display': 'inline-block'},
    dcc.Graph(id='materia',figure = px.bar(y=xmatecant, x=xmatedesc, text_auto='.2s',title="Material mas retenido por unidad de medida"),style={'width': '50%', 'display': 'inline-block'}),
    

    dcc.Graph(id='lin',figure = px.line(x=desfe, y=canfe, title='Fechas con mas reingresos'),style={'width': '100%', 'display': 'inline-block'}),
    
    
    
    
    
    dcc.Graph(id='bodeanima',figure = px.bar(aaa6, x="Nombre Bodega", y="cantidadreingresada", color="Descripcion",animation_frame="fechareingreso", animation_group="Descripcion")),
    
    
    
    #dcc.Graph(id='lin2',figure =px.scatter(aaa6, x="cantidadreingresada", y="GrupoTemporalidad", animation_frame="fechareingreso", animation_group="Nombreentrega",
                   #size="Temporalidad", color="Ncc", hover_name="Descripcion"))

    
 #dcc.Graph(id='tempo',figure=px.pie(aaa3, values='cantidadreingresada' , names='GrupoTemporalidad', title='Temporalidad'),style={'width': '44%', 'display': 'inline-block'}),#    
    
    
  ]
    
  )

#aqui irian los callbacks
@app.callback(
    Output('motix','figure'),
    Input('motiv','value'),Input('dd_centroc','value'),Input('dtipopersonal','value'),Input('mate','value'),Input('entre','value'),Input('bode','value'), prevent_initial_call=True
)

def build_graph(motiv,dd_centroc,dtipopersonal,mate,entre,bode):

    new_df=df
    
    if motiv is None and dd_centroc is None and dtipopersonal is None and mate is None and entre is None and bode is None :
        
        return figure
        
    if motiv != None: 
        
        new_df=new_df[(new_df['Motivo'].isin(motiv))]
            
    if dd_centroc != None:
            
        new_df=new_df[(new_df['Ncc'].isin(dd_centroc))]
            
    if dtipopersonal != None:

        new_df=new_df[(new_df['Tipopersonal'].isin(dtipopersonal))]
        
                
    if mate != None:

        new_df=new_df[(new_df['Descripcion'].isin(mate))]
        
    if entre != None:

        new_df=new_df[(new_df['Nombreentrega'].isin(entre))]
        
    if bode != None:

        new_df=new_df[(new_df['Nombre Bodega'].isin(bode))]
    new_df = new_df.sort_values('cantidadreingresada')
    fig_fil1 = (px.pie(new_df, values='cantidadreingresada' , names='Motivo', title='Motivos de reingreso'))
    return fig_fil1





@app.callback(
    Output('areasgraf','figure'),
    Input('motiv','value'),Input('dd_centroc','value'),Input('dtipopersonal','value'),Input('mate','value'),Input('entre','value'),Input('bode','value'), prevent_initial_call=True
)

def build_graph2(motiv,dd_centroc,dtipopersonal,mate,entre,bode):

    new_df=df
    
    if motiv is None and dd_centroc is None and dtipopersonal is None and mate is None and entre is None and bode is None :
        
        return figure
        
    if motiv != None: 
        
        new_df=new_df[(new_df['Motivo'].isin(motiv))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
            
    if dd_centroc != None:
            
        new_df=new_df[(new_df['Ncc'].isin(dd_centroc))]
        new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
            
    if dtipopersonal != None:

        new_df=new_df[(new_df['Tipopersonal'].isin(dtipopersonal))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
                
    if mate != None:

        new_df=new_df[(new_df['Descripcion'].isin(mate))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
    if entre != None:

        new_df=new_df[(new_df['Nombreentrega'].isin(entre))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
    if bode != None:

        new_df=new_df[(new_df['Nombre Bodega'].isin(bode))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
    new_df = new_df.sort_values('cantidadreingresada')
    figure223=px.bar(new_df, x="Ncc", y="cantidadreingresada",  title='Centro de costo')
    return figure223




@app.callback(
    Output('person','figure'),
    Input('motiv','value'),Input('dd_centroc','value'),Input('dtipopersonal','value'),Input('mate','value'),Input('entre','value'),Input('bode','value'), prevent_initial_call=True
)

def build_graph2(motiv,dd_centroc,dtipopersonal,mate,entre,bode):

    new_df=df
    
    if motiv is None and dd_centroc is None and dtipopersonal is None and mate is None and entre is None and bode is None :
        
        return figure
        
    if motiv != None: 
        
        new_df=new_df[(new_df['Motivo'].isin(motiv))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
            
    if dd_centroc != None:
            
        new_df=new_df[(new_df['Ncc'].isin(dd_centroc))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
            
    if dtipopersonal != None:

        new_df=new_df[(new_df['Tipopersonal'].isin(dtipopersonal))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
                
    if mate != None:

        new_df=new_df[(new_df['Descripcion'].isin(mate))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
    if entre != None:

        new_df=new_df[(new_df['Nombreentrega'].isin(entre))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
    if bode != None:

        new_df=new_df[(new_df['Nombre Bodega'].isin(bode))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
    new_df = new_df.sort_values('cantidadreingresada')
    figure222=px.bar(new_df, x="Nombreentrega", y="cantidadreingresada", color="Nombreentrega", title='Personal que mas reingresa')
    return figure222





@app.callback(
    Output('materia','figure'),
    Input('motiv','value'),Input('dd_centroc','value'),Input('dtipopersonal','value'),Input('mate','value'),Input('entre','value'),Input('bode','value'), prevent_initial_call=True
)

def build_graph32(motiv,dd_centroc,dtipopersonal,mate,entre,bode):

    new_df=df
    
    if motiv is None and dd_centroc is None and dtipopersonal is None and mate is None and entre is None and bode is None :
        
        return figure
        
    if motiv != None: 
        
        new_df=new_df[(new_df['Motivo'].isin(motiv))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
            
    if dd_centroc != None:
            
        new_df=new_df[(new_df['Ncc'].isin(dd_centroc))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
            
    if dtipopersonal != None:

        new_df=new_df[(new_df['Tipopersonal'].isin(dtipopersonal))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
                
    if mate != None:

        new_df=new_df[(new_df['Descripcion'].isin(mate))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
    if entre != None:

        new_df=new_df[(new_df['Nombreentrega'].isin(entre))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
        
    if bode != None:

        new_df=new_df[(new_df['Nombre Bodega'].isin(bode))]
        #new_df = new_df.sort_values('cantidadreingresada')
        #new_df=new_df.head(10)
    
    
    new_df = new_df.sort_values('cantidadreingresada')
    
    dfxmate2 = new_df. groupby (['Descripcion'] ).cantidadreingresada.sum().sort_values(ascending = False)
    dfxmate2 = dfxmate.to_frame()
    dfxmate2['Descripcion'] = dfxmate.index
    dfxmate2=dfxmate2.head(15)
    xmatecant2 = dfxmate2['cantidadreingresada'].tolist()
    xmatedesc2= dfxmate2['Descripcion'].tolist()

    
    
    figure2252 = px.bar(y=xmatecant2, x=xmatedesc2, text_auto='.2s',title="Material mas retenido por unidad de medida_"),
    return figure2252

        
    #if dd_centroc is None:
        #return fig
        
    #else:
        #new_df1=new_df[(new_df['Ncc'].isin(dd_centroc))]
        #fig_fil1 = (px.pie(new_df1, values='cantidadreingresada' , names='Motivo', title='5555555555555'))
            
        #return fig_fil2

    
        


        #new_df = aaa6[(aaa6['Ncc'].isin(dd_centroc))]    



 
    #ejecutamos el dash
if __name__ == '__main__':
  app.run_server(debug=False, port=8003)

adamschroeder · June 22, 2022, 2:07pm

hi @Crst
Welcome to the community.

I think what is happening is that the graphs (px.bar, px.line, etc.) that you make in the layout are loaded once into the app, when the app starts (or the browser refreshes). Then, you make some dropdown selections that update those graphs.

I think what is happening because when you remove all the filters like here:

if motiv is None and dd_centroc is None and dtipopersonal is None and mate is None and entre is None and bode is None :
    return figure

you are returning a figure. What object is that? where is it coming from?

What you could probably do is return the original figure in the motix graph that you built in the layout:

return px.pie(aaa6, values='cantidadreingresada' , names='Motivo', title='Motivos de reingresos'),style={'width': '35%', 'display': 'inline-block'}),##figure=px.pie(aaa6, values='cantidadreingresada' , names='Motivo', title='Motivo'),style={'width': '100%', 'display': 'inline-block'})

Crst · June 23, 2022, 2:11pm

Your comment was of great help to me, thank you, I was able to solve the problem by changing the code in the parts that you recommended, something like this was left.

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='Analisis de reingresos'),
    html.Div([
        
        
        
        html.Div(children=[
        html.Label('Seleccione Motivo'),
        dcc.Dropdown(
            id='dropdown',
            #options=[{'label': i, 'value': i} for i in options],
            options=[{'label':h, 'value':h} for h in aaa6['Motivo'].unique()],
            searchable=True,
            value='NA',
            multi=True
        )],style={'width': '25%', 'display': 'inline-block'}),
        
        
        
        
        
        html.Div(children=[
        html.Label('Seleccione tipo de personal'),
        dcc.Dropdown(
            id='dropdowntp',
            #options=[{'label': i, 'value': i} for i in options],
            options=[{'label':h, 'value':h} for h in aaa6['Tipopersonal'].unique()],
            value='NA',
            multi=True,
            searchable=True
         )], style={'width': '25%', 'display': 'inline-block'}),
        
        
        
        
        html.Div(children=[
        html.Label('Seleccione Centro de Costo'),
        dcc.Dropdown(
            id='dropdowncc',
            #options=[{'label': i, 'value': i} for i in options],
            options=[{'label':c, 'value':c} for c in aaa6['Ncc'].unique()],
            value='NA',
            multi=True
         )], style={'width': '25%', 'display': 'inline-block'}),

        
        
        
        
        html.Div(children=[
        html.Label('Seleccione bodega'),
        dcc.Dropdown(
            id='dropdownb',
            #options=[{'label': i, 'value': i} for i in options],
            options=[{'label':c, 'value':c} for c in aaa6['Nombre Bodega'].unique()],
            value='NA',
            multi=True
         )], style={'width': '25%', 'display': 'inline-block'}),
        


        
        
        
       html.Div(dcc.Graph(id='graph')),
    ]),
])


@app.callback(
   Output('graph', 'figure'),
   Input('dropdown','value'),
    Input('dropdowntp','value'),
    Input('dropdowncc','value'),
    Input('dropdownb','value'),
   
)
def update_graph(dropdown,dropdowntp,dropdowncc,dropdownb):
    dff = aaa6.copy()
    
    #motivo de reingreso
    if not dropdown or 'NA' in dropdown :
        dff['Motivo'] = aaa6['Motivo']
    else:
        
        if dropdown != "NA":
            dff = dff[dff['Motivo'].isin(dropdown)]
            
            
            
            
            
    #tipo de personal        
    if not dropdowntp or 'NA' in dropdowntp:
        dff['Tipopersonal'] = aaa6['Tipopersonal']
    else:
        
                  
        if dropdowntp != "NA":
            dff = dff[dff['Tipopersonal'].isin(dropdowntp)]
          
        
        
            
            
            
    #centro de costo         
    if not dropdowncc or 'NA' in dropdowncc:
        dff['Ncc'] = aaa6['Ncc']
    else:
        
                  
        if dropdowncc != "NA":
            dff = dff[dff['Ncc'].isin(dropdowncc)]
     
    
    
    
    

    #bodega         
    if not dropdownb or 'NA' in dropdownb:
        dff['Nombre Bodega'] = aaa6['Nombre Bodega']
    else:
        
                  
        if dropdownb != "NA":
            dff = dff[dff['Nombre Bodega'].isin(dropdownb)]
                    


        
    

    figure222=px.bar(dff, x="Motivo", y="cantidadreingresada", color="Motivo", title='Personal que mas reingresa')

    return figure222


if __name__ == '__main__':
    app.run_server(debug=False, port=8000)

adamschroeder · June 23, 2022, 2:22pm

I’m glad it worked out for you @Crst . Don’t forget to mark this answer – or any other answer in the future that helps you solve the problem – as the Solution.

Topic		Replies	Views
Problems with dropdown in a line chart Dash Python	1	241	October 24, 2020
Dropdown multi input not responding to Graph Dash Python	0	313	December 8, 2020
Two multi-select dropdown inputs for one graph has made the graph unable to update height? Dash Python	1	537	March 8, 2020
Multi-Level Dropdowns with multi selection Dash Python question	8	1946	March 31, 2022
Dropdown with multi not working Dash Python	2	2961	July 7, 2017

I have problems with the multiple selection dropdown and graphics

Related Topics