在回调之间共享数据帧

Question

I am trying to share dataframe between callbacks but i keep getting this error. I want to use dcc.store to the data. Then I will have one callback filtering the data while the other callback plotting the graph.

"Callback error updating main_data.data"

My code run fine if I include everything in one callback, but it won't work once I split it.

import dash
import pathlib
import numpy as np
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from flask import Flask

df =pd.read_csv("salesfunnela.csv") 
mgr_options = df["Manager"].unique()
mgr_options = np.insert(mgr_options, 0 , 'All Managers')

server = Flask(__name__)
app = dash.Dash(server=server)

app.layout = html.Div([
    dcc.Store(id='main_data'),
    html.Div(
        [
            html.P("Div1", className="control_label"),
            dcc.Dropdown(
                id="Manager",
                options=[{
                    'label': i,
                    'value': i
                } for i in mgr_options],
                value='All Managers'),
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    dcc.Graph(id='funnel-graph'), 
        html.Div(
        [
            html.P("Div2", className="abc"),

        ],
        style={'width': '25%',
               'display': 'inline-block'}),
])


@app.callback(
    dash.dependencies.Output('main_data', 'data'),
    [dash.dependencies.Input('Manager', 'value')])
def update_data(Manager):
    if Manager == "All Managers":
        df_plot = df.copy()
    else:
        df_plot = df[df['Manager'] == Manager]

    return df_plot

@app.callback(
    dash.dependencies.Output('funnel-graph', 'figure'),
    [dash.dependencies.Input('main_data', 'data')])
def update_graph(main_data):
    pv = pd.pivot_table(
    df_plot,
    index=['Name'],
    columns=["Status"],
    values=['Quantity'],
    aggfunc=sum,
    fill_value=0)


    
    traces = [go.Bar(x=pv.index, y=pv[('Quantity', t[1])], name=t[1]) for t in pv]

    
    return {
        'data': traces,
        'layout':
        go.Layout(
            title='Customer Order Status for {}'.format(Manager),
            barmode='stack')
    }


if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

Some time has passed but I hope this might help.

What is basically discussed in previous answer is to change def update_graph(main_data) to def update_graph(df_plot) , or alternatively, change df_plot in the function to main_data if you like. this will most likely not solve your problem though . Since the problem is that the function update_data cannot store the data in the first place. The idea to store the filtered data somewhere is probably a good idea, instead of sending it through chained callbacks.

In the section for sharing data between callbacks in the docs/getting started guide ( https://dash.plotly.com/sharing-data-between-callbacks ), it says that you have to store the data as either JSON or base64 encoded binary data . A Pandas DataFrame is not binary data in an ASCII string format (base64), if you want to encode a DataFrame in base64 you should probably convert it to a string first and then encode that into base64 (eg https://docs.python.org/3/library/base64.html ). So in your example code, to use JSON, you would have to change the return statement to

return df_plot.to_json(date_format='iso', orient='split')

in the update_data function.

Then in update_graph you would now need to convert the JSON back into Pandas DataFrame. The first few lines of that function would then look like this instead

def update_graph(main_data):
    df_plot = pd.read_json(main_data, orient='split')
    pv = pd.pivot_table(
        df_plot,
        index=['Name'],
        columns=["Status"],
        values=['Quantity'],
        aggfunc=sum,
        fill_value=0)

I hope this helps, and that it's not too late.

Answer 2

You probably want to read more about Chained callbacks...
Docs - https://dash.plotly.com/basic-callbacks
Scroll down to the section: Dash App With Chained Callbacks

In the docs-example, you'll notice that the data is not really passed between two callbacks.
Rather they work like event listeners, listening to updates in the DOM.

In your case, there's nothing called "main-data" in the layout, which the second callback is trying to listen to.
Try to play around with 'funnel-graph' or 'Div2' or setup another element whose updates can be tracked by these callbacks.