(Solved) Passing non-hidden div values into other callbacks

Dash Python
1

Hi there,
I am trying to do something quite simple:

  1. Return a single variable value as an output from a callback (e.g. rounded_total_ad_spend)
  2. Use this value in a non-hidden div (in most cases I’ll be presenting as single indicator data points)
  3. 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)