Hi there! I have got one drop-down which values are updated based on the drop-down above. However I would like the histogram to display multiple values, so for instance selecting 0-19 and 20-39 displays the distribution of those ages 0-39
app = dash.Dash()
colors = {
'background': '#111111',
'text': '#7FDBFF'
}
features = region_mirco_census.columns
app.layout = html.Div([
html.Div([ html.Label('Select Characteristic:'),
dcc.Dropdown(
id='slct_xaxis',
options=[{'label': i, 'value': i} for i in features],
value='age2',
multi=False)], style={'width': '48%', 'display': 'inline-block'}),
html.Div([
html.Div([
html.Label('Select Second Characteristic:'),
dcc.Dropdown(id = "slct_xaxis2",
multi = False,
searchable = True,
value = "ethnicityew_names",
options=[{'label': i, 'value': i} for i in features],
className = "dcc_compon"),
]),
html.Div([
html.Label('Select variable:'),
dcc.Dropdown(
id = "slct_v",
multi = True,
searchable = True,
options = [],
className = "dcc_compon")
]),
], style={'width': '48%', 'display': 'inline-block'}),
html.Div([ html.Label('Select Region:'),
dcc.Dropdown(
id = 'select_region',
options = [{
'label' : i,
'value' : i
} for i in region_mirco_census['region_names'].unique()],
value = 'South East')
]),
dcc.Graph(id='feature-graphic')
], style={'padding':10})
@app.callback(
Output(
component_id = "slct_v",
component_property = "options"
),
Output(
component_id = "slct_v",
component_property = "value"
),
Input(
component_id = "slct_xaxis2",
component_property = "value"
)
)
def update_variable(slct_xaxis2):
# Build list of variables
list_of_variables = [{"label": i, "value": i} for i in region_mirco_census[slct_xaxis2].unique()]
# Return list and value
return list_of_variables, list_of_variables[0]["value"]
@app.callback(
Output('feature-graphic', 'figure'),
[Input('slct_xaxis', 'value'),
Input('select_region', 'value'),
Input('slct_xaxis2','value'),
Input('slct_v', 'value')])
def update_graph(slct_xaxis, select_region, slct_xaxis2, slct_v):
region_mirco_census_filtered_test = region_mirco_census.loc[(region_mirco_census['region_names'] == select_region)]
region_mirco_census_filtered_uk = region_mirco_census[region_mirco_census[slct_xaxis2] == slct_v]
fig = go.Figure()
fig.add_trace(
go.Histogram(
x=region_mirco_census_filtered_test[slct_xaxis], histnorm='percent',
opacity=0.8, name="Region"
)
)
fig.add_trace(
go.Histogram(
x=region_mirco_census_filtered_uk[slct_xaxis], histnorm='percent', marker=dict(color='rgba(0,0,0,0)', line=dict(width=2, color='red')),
opacity=0.8, name="UK average"
)
)
fig.update_layout(barmode='overlay')
fig.update_xaxes(categoryorder='category ascending')
fig.update_yaxes(range=[0, 100])
#fig.show()
return fig
if __name__ == '__main__':
app.run_server(debug=False, port= 7234)