I am using two callbacks to update the same outputs. The first time, on page load, I am using a dummy hidden div to update (initialize) multiple outputs while the second callback is prevented from initial update.
When user selects a value after page load, I want to update some of the initialized outputs with some of the previously initialized outputs as inputs. Here is a snippet of my app below:
import dash
import dash_bootstrap_components as dbc
from dash import dcc, html, dash_table, State, ctx, no_update
from dash.dependencies import Input, Output
from django_plotly_dash import DjangoDash
import plotly.express as px
import pandas as pd
from collections import defaultdict
app = DjangoDash('analytics_dashboard')
#callback on page load
@app.callback(
Output("prod-name", "children"),
Output("metric-filter", "value"),
Output("dynamic-fig", "figure"),
Input("filter-hidden", "value"),
)
def update_with_preference(value):
print(value)
if value == 'A':
preferences = pd.read_csv(cache_path+'/user_preference.csv')
user_preferences = preferences[preferences['username']==curr_user]
user_prod_choice, user_metric_choice = user_preferences['product'].values[0], user_preferences['metric'].values[0]
fig_data = page_data[['Month', 'Count']].groupby(['Month']).sum().reset_index()
x = 'Month'
y = 'Count'
fig = generate_charts(fig_data, x_axis=x, y_axis=y, chart_type='bar')
return user_prod_choice, user_metric_choice, fig
else:
raise PreventUpdate
# #interactive callbacks
@app.callback(
Output("dynamic-fig", "figure", allow_duplicate=True),
Output("prod-name", "children", allow_duplicate=True),
Input("metric-filter", "value"), prevent_initial_call=True)
def update_chart(metric_filter):
filtered_data = page_data[page_data['product']==metric_filter]
fig_data = filtered_data[['Month', 'Count']].groupby(['Month']).sum().reset_index()
fig = generate_charts(fig_data, x_axis='Month', y_axis='Count', chart_type='bar')
return prod_name_display, fig
else:
raise PreventUpdate
app.layout = html.Div(
style={
'backgroundColor':'#F2F2F2',
'width':'100%',
'min-width': '1280px',
'height':'100vh',
'min-height': '651px',
'position':'absolute',
'margin':'0px',
'padding':'0px',
'font-family': 'verdana'},
children = [
html.Div(
id='prod-name',
style = {
'float':'left',
'width': '25%'
},
children = ['']
),
dcc.Graph(id='dynamic-fig', config={'displayModeBar': False}),
#hidden filter that will trigger callback on page load
html.Div(
style = {
'display': 'none',
'width':'0',
'height':'0'
},
children =
dcc.Dropdown(
id = 'filter-hidden',
style={},
options = ["A", "B"],
value = "A"),
)
]
)
When I print the output of the second callback the result is accurate and the figure is updated however dash fails to render the updated figure on the browser and no exception is thrown. Please any guidance on how to correct this is appreciated.