Hello All,
In that example, I want to use callback to feed dcc slider parameters. And this dcc slider component will be used to control both, DataTable & figure components,
dcc slider parameters are declared in app.py through dcc store component and get calculated in code/page_2.
Once we get “min”, “max” and “value” dcc slider parameter values, I try to input those to dcc.Slider() component using dash callbacks.
But dcc.Slider() does not display.
Here is error msg:
null is not an object (evaluating 'n.toString().match(/^-?\d+(?:\.\d{0,0})?/)[0]')
Here is how it is coded.
app.py code:
app.layout = dbc.Container([
html.Div([
dcc.Store(id='store', data={}, storage_type='local'),
dcc.Store(id='store-min', data={}, storage_type='local'),
dcc.Store(id='store-max', data={}, storage_type='local'),
dcc.Store(id='store-value', data={}, storage_type='local'),
dcc.Store(id='store-marks', data={}, storage_type='local')
]),
....
page_2 code
layout = dbc.Container([
dbc.Row([
dbc.Col([
html.H2('Full table'),
html.Br(),
html.Br(),
html.Hr(),
dash_table.DataTable(data=[] , id='full-table',
fixed_columns={'headers':True, 'data':1},
page_size=15)
]),
]),
dbc.Row([
dcc.Slider(id='slider')
]),
dbc.Row([
dbc.Col([
html.H2('dropdown'),
dcc.Dropdown(id='dropdown-continent', options=[], value='Europe'),
html.Br(),
dcc.Dropdown(id='dropdown-country', options=[], value='France'),
html.Br(),
dash_table.DataTable(data=[], id='table-country',
fixed_columns={'headers':True, 'data':1},
page_size=15)
]),
dbc.Col([
html.H2('figure from dropdown'),
html.Br(),
dcc.Graph(id='graph-country', figure={})
]),
]),
])
@callback(
[Output('full-table', 'data'),
Output('full-table', 'columns')],
Input('store', 'data'))
def fn_full_table(data):
df = pd.DataFrame(data)
return df.to_dict('records'), [{"name":i, "id": i} for i in df.columns]
@callback(
[Output('store-min', 'data'),
Output('store-max', 'data'),
Output('store-value', 'data')
],
Input('store', 'data')
)
def fn_store_min_max(data):
df = pd.DataFrame(data)
df_year = df.loc[:, 'year']
min = df_year.min()
max = df_year.max()
value = max
#marks={year: str(year) for year in df['year'].unique()}
return [min, max, value]
@callback(
[Output('slider', 'min'),
Output('slider', 'max'),
Output('slider', 'value')
],
[Input('store-min', 'data'),
Input('store-max', 'data'),
Input('store-value', 'data')
])
def fn_slider(min, max, value):
min_value = min
max_value = max
val = value
print(f'Slider: min_value {min_value}')
print(f'Slider: max_value {max_value}')
print(f'Slider: value -- {val}')
return [min_value, max_value, val]
@callback(
Output('dropdown-continent', 'options'),
Input('store', 'data')
)
def fn_dropdown_continent(data):
df = pd.DataFrame(data)
print(f'df.head() -- {df.head()}')
return list(df['continent'].unique())
@callback(
Output('dropdown-country', 'options'),
[Input('store', 'data'),
Input('dropdown-continent', 'value')
])
def fn_dropdown_country(data, continent):
df = pd.DataFrame(data)
df_cont = df[df['continent'] == continent]
return list(df_cont['country'].unique())
@callback(
[Output('table-country', 'data'),
Output('table-country', 'columns')],
[Input('store', 'data'),
Input('slider', 'value'),
Input('dropdown-continent', 'value'),
Input('dropdown-country', 'value')]
)
def fn_table_country(data, selected_year_value, continent, country):
df = pd.DataFrame(data)
print(f'year-value -- {selected_year_value}')
df_cont = df[df['continent'] == continent]
df_count = df_cont[df_cont['country'] == country]
df_count_period = df_count[(df_count['year'] <= selected_year_value)]
df_count_period = df_count_period.sort_values(by=['year'], ascending=True, ignore_index=True)
print(f'df_count_period.head() -- {df_count_period.head()}')
return df_count_period.to_dict('records'), [{"name": col, "id": col} for col in df_count_period.columns]
@callback(
Output('graph-country', 'figure'),
Input('table-country', 'data')
)
def fn_graph(data):
df_count = pd.DataFrame(data)
fig = px.bar(df_count,
x='year',
y=['pop'],
color='lifeExp',
hover_name='country',
title='Bar chart, country')
return fig
Since I have dcc slider parameters, I thought dcc slider has all necessary values to get displayed.
Why is that not the case ?
There is another thing that confuses me. Once the parameters are known, the dcc slider should be able to be displayed. But how to structure the code so that a change of value of the dcc slider can have an effect on the other components, DataTable and graph?
Many thanks for your time on this !
