Hi. I have a problem with a graph generated via a dropdown callback. This is the app I’m trying to build:
https://vacantesmex.herokuapp.com/
The dropdown options are States (mexican), and individually, they work just fine. And for most, the multiple selection options work fine as well. But when I select some of them jointly with others, the selection sometimes yields only one of them or neither.
This is my code:
app.layout = html.Div(children=[
html.H1(children=‘México’,
style={‘textAlign’: ‘center’
}
),
html.H3(children=‘Tablero-resumen de vacantes en línea’,
style={‘textAlign’: ‘center’
},
),
html.Div([
dcc.Dropdown(
id=‘xaxis-column’,
options=[{‘label’: i, ‘value’: i} for i in table.Estados],
placeholder=‘Seleccione una Ciudad’,
value = [‘Ciudad de México DF’,‘Jalisco’, ‘Puebla’],
multi =True),
],
style={‘width’: ‘48%’, ‘display’: ‘inline-block’,
‘marginTop’: ‘1em’,‘marginBottom’: ‘1em’}),
html.Div([
dcc.Dropdown(
id=‘yaxis-column’,
options=[{‘label’: i, ‘value’: i} for i in Data_test.date.unique()],
placeholder=‘Seleccione un mes’),
],
style={‘width’: ‘48%’, ‘display’: ‘inline-block’,
‘marginTop’: ‘1em’,‘marginBottom’: ‘1em’}),
html.Div([
dcc.Graph(id='graph1',
style={'width': '48%', 'display': 'inline-block'}),
dcc.Graph(id='graph2',
style={'width': '48%', 'display': 'inline-block'})
] ),
html.H5(children='Resumen de principales variables por ciudad',
style={'textAlign': 'left'
}),
dash_table.DataTable(
style_data={
'whiteSpace': 'normal',
'height': 'auto',
},
data=table.to_dict('records'),
sort_action="native",
filter_action='native',
sort_mode="multi",
columns=[{'id': c, 'name': c} for c in table.columns],
style_table={'overflowX': 'scroll'},
style_as_list_view=True,
style_cell={'padding': '5px','textAlign': 'center',
},
style_header={
'fontWeight': 'bold',
'backgroundColor': 'rgb(230, 230, 230)',
},
style_cell_conditional=[
{'if': {'column_id': 'Ciudades'},
'textAlign': 'left',
'width': '170px'},
{'if': {'column_id': 'Años de experiencia (en media)'},
'width': '15px'},
],
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
]
)
])
@app.callback(
Output(‘graph2’, ‘figure’),
[Input(‘xaxis-column’, ‘value’)])
def update_graph2(xaxis_column_name):
table3 = anuncios_empresa[anuncios_empresa[‘localidad’].isin(xaxis_column_name)]
data = go.Scatter(
x=[random.random() for i in range(30)],
y=random.choices(range(30), k=30),
mode=‘text’,
text=table3[‘empresa’][~(table3[‘empresa’].str.len() <4)].unique(),
marker={‘opacity’: 0.3},
textfont={‘size’: table3[‘conteo’]*5,
‘color’: colors})
return {'data': [data],'layout' : go.Layout(xaxis={'showgrid': False, 'showticklabels': False, 'zeroline': False},
yaxis={'showgrid': False, 'showticklabels': False, 'zeroline': False},
title={'text': "Principales empresas",'y':0.9,'x':0.5, 'xanchor': 'center','yanchor': 'top'})
}
@app.callback(
Output(‘graph1’, ‘figure’),
[Input(‘xaxis-column’, ‘value’)])
def update_graph(xaxis_column_name):
table2 = table[table[‘Estados’].isin(xaxis_column_name)]
return {
‘data’: [dict(
x=xaxis_column_name,
y=table2[table2[‘Estados’] == xaxis_column_name][‘Total de anuncios’].unique(),
type=‘bar’,
)],
‘layout’: dict(
xaxis={
‘title’: ‘Portal’},
yaxis={
‘title’: ‘Número’},
title={
‘text’: ‘Vacantes en:
{}’.format(’, '.join(xaxis_column_name)),
‘xanchor’: ‘center’,
‘yanchor’: ‘top’})
}
if name == ‘main’:
app.run_server(debug=False)