CALLBACKS_I tried to replicate an example to understand how callbacks work, got an error

Dash Python
1

Hi everyone! i’m new on dash and on this nice community. Here below my script that doesn’t work.

ERROR

dash.exceptions.InvalidCallbackReturnValue: The callback …piechart.figure… is a multi-output.
Expected the output type to be a list or tuple …:

CSV

The csv it’s like this one below (how can I upoad csv also? is it possible)

|RIDEID|REASONCODE|DEVICECLASSID|

|linea1|54|12|
|linea2|55|13|
|linea3|56|14|
|linea4|57|15|
|linea5|58|16|
|linea6|59|17|

–

SCRIPT

import dash_core_components as dcc
import dash
import dash_html_components as html
import dash_table
import pandas
import plotly
import plotly.express as px
from dash.dependencies import Input, Output

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)

csv = pandas.read_csv(‘C:\Users\acer\Desktop\Lorenzo\GTT\convalide\esportazione716_3.csv’, sep=’;’, low_memory = False)

app.layout = html.Div([
html.H1(children=‘Hello World’,
style = {
‘textAlign’ : ‘center’,
‘color’ : ‘#ff0000’
}
),

html.Div('prova'),

html.Div([
dash_table.DataTable(
id=‘table’,
columns=[{“name”: i, “id”: i, “deletable”: False, “selectable”: False} for i in csv.columns],
data=csv.to_dict(‘records’),
page_size=10,
editable=False,
filter_action=“native”,
sort_action=“native”,
sort_mode=“multi”,
row_selectable=“multi”,
row_deletable=False,
selected_rows=,
page_action=“native”,
page_current=0,
style_cell_conditional=[
{‘if’: {‘column_id’: ‘VALIDATIONSERIALNO’},
‘width’: ‘30%’, ‘textAlign’: ‘right’},
{‘if’: {‘column_id’: ‘ISSUINGDATE’},
‘width’: ‘30%’, ‘textAlign’: ‘left’},
{‘if’: {‘column_id’: ‘DATEANDTIME’},
‘width’: ‘30%’, ‘textAlign’: ‘left’},
],
),
], className=‘row’),

html.Div([
    html.Div([
        dcc.Dropdown(id='linedropdown',
            options=[
                     {'label': 'REASONCODE2', 'value': 'REASONCODE'},
                     {'label': 'DEVICECLASSID2', 'value': 'DEVICECLASSID'}
            ],
            value='DEVICECLASSID',
            multi=False,
            clearable=False
        ),
    ],className='six columns'),

    html.Div([
        dcc.Dropdown(id='piedropdown',
            options=[
                 {'label': 'REASONCODE1', 'value': 'REASONCODE'},
                 {'label': 'DEVICECLASSID1', 'value': 'DEVICECLASSID'}
            ],
            value='DEVICECLASSID',
            multi=False,
            clearable=False
        ),
    ],className='six columns'),

],className='row'),

html.Div([
    html.Div([
        dcc.Graph(id='linechart'),
    ],className='six columns'),

    html.Div([
        dcc.Graph(id='piechart'),
    ],className='six columns'),

],className='row'),

html.H2(children='Arrivederci'),

])

@app.callback(
[Output(‘piechart’, ‘figure’)],
#Output(‘linechart’, ‘figure’)],
[Input(‘table’, ‘selected_rows’),
Input(‘piedropdown’, ‘value’)]
#Input(‘linedropdown’, ‘value’)]
)
def update_data(chosen_rows,piedropval):
if len(chosen_rows)==0:
df_filterd = csv[csv[‘RIDEID’].isin([‘linea1’, ‘linea2’])]
else:
print(chosen_rows)
df_filterd = csv[csv.index.isin(chosen_rows)]

pie_chart=px.pie(
        data_frame=df_filterd,
        names='RIDEID',
        values=piedropval,
        hole=.3,
        labels={'RIDEID':'RIDEID1'}
        )



return (pie_chart)

if name == ‘main’:
app.run_server(debug=True)

2

hi Lorenzo,
welcome to the community and thanks for sharing. It’s very hard to work with the code the way you pasted it. Can you please insert your code inside Preformatted Text (see the </> icon in your editing box). I think I can work with the example data your shared. But if you want to share the original file, just use google share.

And can you please tell us what error comes up when you try to run the code.

Thanks,
Adam

3

Hi Adam! thx for hints, also to help me to behave according community rules!

Here below the error i get: it’s about callbacks

script_error

Here below the csv file (is it ok this way?)

csv file

https://drive.google.com/drive/folders/1ItPsuy1OFRxLvGpixJeGoaBVisQ9WMNL?usp=sharing

here below the script

import dash_core_components as dcc
import dash
import dash_html_components as html
import dash_table
import pandas
import plotly
import plotly.express as px
from dash.dependencies import Input, Output


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

csv = pandas.read_csv('C:\\Users\\acer\\Desktop\\Lorenzo\\GTT\\convalide\\esportazione716_3.csv', sep=';', low_memory = False)

app.layout = html.Div([
    html.H1(children='Hello World',
            style = {
                'textAlign' : 'center',
                 'color' :  '#ff0000'
            }
    ),

    html.Div('prova'),
html.Div([
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i, "deletable": False, "selectable": False} for i in csv.columns],
        data=csv.to_dict('records'),
        page_size=10,
        editable=False,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        row_selectable="multi",
        row_deletable=False,
        selected_rows=[],
        page_action="native",
        page_current=0,
        style_cell_conditional=[
            {'if': {'column_id': 'VALIDATIONSERIALNO'},
            'width': '30%', 'textAlign': 'right'},
            {'if': {'column_id': 'ISSUINGDATE'},
            'width': '30%', 'textAlign': 'left'},
            {'if': {'column_id': 'DATEANDTIME'},
            'width': '30%', 'textAlign': 'left'},
            ],
        ),
], className='row'),

    html.Div([
        html.Div([
            dcc.Dropdown(id='linedropdown',
                options=[
                         {'label': 'REASONCODE2', 'value': 'REASONCODE'},
                         {'label': 'DEVICECLASSID2', 'value': 'DEVICECLASSID'}
                ],
                value='DEVICECLASSID',
                multi=False,
                clearable=False
            ),
        ],className='six columns'),

        html.Div([
            dcc.Dropdown(id='piedropdown',
                options=[
                     {'label': 'REASONCODE1', 'value': 'REASONCODE'},
                     {'label': 'DEVICECLASSID1', 'value': 'DEVICECLASSID'}
                ],
                value='DEVICECLASSID',
                multi=False,
                clearable=False
            ),
        ],className='six columns'),

    ],className='row'),

    html.Div([
        html.Div([
            dcc.Graph(id='linechart'),
        ],className='six columns'),

        html.Div([
            dcc.Graph(id='piechart'),
        ],className='six columns'),

    ],className='row'),

    html.H2(children='Arrivederci'),
])


@app.callback(
    [Output('piechart', 'figure')],  
    [Input('table', 'selected_rows'),
     Input('piedropdown', 'value')]
     
)
def update_data(chosen_rows,piedropval):
    if len(chosen_rows)==0:
        df_filterd = csv[csv['RIDEID'].isin(['linea1', 'linea2'])]
    else:
        print(chosen_rows)
        df_filterd = csv[csv.index.isin(chosen_rows)]

    pie_chart=px.pie(
            data_frame=df_filterd,
            names='RIDEID',
            values=piedropval,
            hole=.3,
            labels={'RIDEID':'RIDEID1'}
            )
    return (pie_chart)


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

When you only have a single output in a callback, it should not be written as a list, i.e. you should drop the square brackets.

5

great! it works!
could you tell me why? i’m new in coding so it helps me…

6

Lorenzo,
@Emil is correct. It worked because you only have one output. If you had 2 or more, you would need to put it inside a list.

Your app looks really nice.

Congratulations :clap:

7

thanks adam, i’m following your tutorial! for sure i’ll post lots of script to ask for help :slight_smile:

ok, but could you explain why i don’t need a list? probably it’s the basic of callbacks. I mean: my callback output is the input to the figure property. right?

is this output a dictionary?

could anyone explain how this work?