Hi there,
I am trying to do something quite simple:
- Return a single variable value as an output from a callback (e.g. rounded_total_ad_spend)
- Use this value in a non-hidden div (in most cases I’ll be presenting as single indicator data points)
- Re-use this value as an input in a separate callback (so I don’t need to calculate again)
I have been using the approach described in https://dash.plot.ly/sharing-data-between-callbacks. I have basically being converting the single numeric values to json (json.dumps) when returning to the non-hidden div and then when re-calling as inputs into the other callbacks I am loading using (json.loads).
This solution is working for me on my local computer but when I deploy my app via heroku the fields show up blank. I am not sure what the reason is for why it works locally but not when deployed?
Note: This problem was related to be running an old version of dash on heroku. After upgrading to 0.30 this issue was solved
def project_costs_chart(fund_account_value, total_ad_spend, total_active):
total_ad_spend= json.loads(total_ad_spend)
total_pack_costs = json.loads(total_active) * 16.00
daily_rate= 4000.0/22
total_staff_costs = staff_daily_rate * 88
labels = ['Ad Spend','Pack Costs','Staff Costs']
values = [total_ad_spend, total_pack_costs, total_staff_costs]
colors = ['#E01273', '#EFEEED', '#58B74E']
trace = go.Pie(labels=labels,
values=values,
marker=dict(colors=colors),
textinfo= 'value+percent',
)
layout = dict(margin=dict(l=15, r=10, t=0, b=65), legend=dict(orientation="h"))
return dict(data=[trace], layout=layout)
##=======4.0 HTML LAYOUT===========
layout = [
# indicators row div
html.Div(
[
indicator_four(
"#00cc96", "Total Ad Spend", "total_ad_spend_id"
),
indicator_four(
"#EF553B", "Number of Active", "number_active_id",
),
],
className="row",
),
html.Div(
[
html.Div(
[
html.Div(
[
html.P("Project Costs"),
dcc.Graph(
id='project_costs_id',
style={"height": "90%", "width": "98%"},
config=dict(displayModeBar=False),
)],
className="four columns chart_div"
),
],
className="row",
style={"marginTop": "5px"}
),
##=======5.0 CALLBACK FUNCTIONS===========
# updates first row right indicator value based on df updates
@app.callback(
Output("number_active_id", "children"),
[Input("fund_slug_dropdown", "value")],
)
def total_active_callback(fund_slug_value):
filtered_accounts = account_options[account_options['parent_account_id']==fund_slug_value]
paid_accounts=filtered_accounts[filtered_accounts['state']=='paid']
number_active_groups=paid_accounts['state'].value_counts().values[0]
number_active_float=number_active_groups.astype(np.float64)
return json.dumps(number_active_float)
# updates Second Row First Indicator (Total Ad Spend)
@app.callback(
Output("total_ad_spend_id", "children"), [Input("fund_slug_dropdown", "value")]
)
def total_ad_spend_callback(fund_namee):
fund_name=fund_namee
ad_insights = pd.read_sql_query("""SELECT spend FROM facebook_ads.insights WHERE ad_id IN (SELECT id FROM facebook_ads.ads WHERE adset_id IN (SELECT id FROM facebook_ads.ad_sets WHERE campaign_id IN (SELECT id FROM facebook_ads.campaigns WHERE name LIKE %s ))) """ , facebook_engine,params=("%MN Fund%",))
total_ad_spend=ad_insights['spend'].sum()
rounded_total_ad_spend=round(total_ad_spend)
return json.dumps(rounded_total_ad_spend)
# update project costs Pie Chart breakdown
@app.callback(
Output("project_costs_id", "figure"),
[Input("fund_slug_dropdown", "value"),
Input("total_ad_spend_id", "children"),
Input("number_active_id", "children")]
)
def project_costs_callback(fund_account_value, total_ad_spend, total_active):
return project_costs_chart(fund_account_value, total_ad_spend, total_active)