dcc.Upload dataframe and selected_rows for change graphs

I’m new in dash and i do not find a solution for this issue. I want to upload the file with dcc.Upload and when the table is displayed i would like to select the desired rows (selected_rows) in order to graph and compare the values. If I do this without the dcc.Upload component works well the app. i followed the examples at this link (dcc.Upload | Dash for Python Documentation | Plotly) but i’m not able to call the id of the table and then the selected_rows. Here my last version, can anyone help me?

import base64
import io
from jupyter_dash import JupyterDash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
import plotly.express as px

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
dataBatch = [‘Eff. [%]’, ‘FF [%]’, ‘Voc [V]’, ‘Jsc[mA/cm²]’, ‘Rsries [Ohm]’, ‘Rshnt [Ohm]’]

#app = dash.Dash(name, external_stylesheets=external_stylesheets)
app = JupyterDash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
dcc.Upload(
id=‘datatable-upload’,
children=html.Div([
'Drag and Drop or ',
html.A(‘Select Files’)
]),
style={
‘width’: ‘100%’, ‘height’: ‘60px’, ‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’, ‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘5px’, ‘textAlign’: ‘center’, ‘margin’: ‘10px’
},
),
dash_table.DataTable(
id=‘datatable-upload-container’, filter_action=‘native’, sort_action=“native”), #, row_selectable=‘multi’, selected_rows=),
# ############################################# First Line Menu and Graph
# menu for first line

html.Div([
    html.Div([
        dcc.Dropdown(id='boxdropdown',
                     options=[
                         {'label': 'Eff', 'value': 'Eff. [%]'},
                         {'label': 'FF', 'value': 'FF [%]'},
                         {'label': 'Voc', 'value': 'Voc [V]'},
                         {'label': 'Jsc', 'value': 'Jsc[mA/cm²]'},
                         {'label': 'Rs', 'value': 'Rsries [Ohm]'},
                         {'label': 'Rsh', 'value': 'Rshnt [Ohm]'},
                     ],
                     value='Voc [V]',
                     multi=False,
                     clearable=False
                     ), ], className='six columns'),
], className='row'),
# Graph for first menu drop
html.Div([
    html.Div([
        dcc.Graph(id='boxchart'), ], className='six columns'),

], className='row'),
dcc.Graph(id='datatable-upload-graph')

])

def parse_contents(contents, filename):
content_type, content_string = contents.split(’,’)
decoded = base64.b64decode(content_string)
if ‘csv’ in filename:
# Assume that the user uploaded a CSV file
return pd.read_csv(
io.StringIO(decoded.decode(‘utf-8’)))
elif ‘xls’ in filename:
# Assume that the user uploaded an excel file
return pd.read_excel(io.BytesIO(decoded))

@app.callback([Output(‘datatable-upload-container’, ‘data’),
Output(‘datatable-upload-container’, ‘columns’)],
[Input(‘datatable-upload’, ‘contents’)],
[State(‘datatable-upload’, ‘filename’)])
def update_output(contents, filename):
if contents is None:
return [{}],
df = parse_contents(contents, filename)
global dff
dff = df.groupby(‘Device ID’, as_index=False)[dataBatch].mean().round(decimals=2)
# children = filter_action=“native”, row_selectable=“multi”, selected_rows=
return dff.to_dict(‘records’), [{“name”: i, “id”: i} for i in dff.columns]

################################################ CallBacks

example callback graph

@app.callback(Output(‘datatable-upload-graph’, ‘figure’),
[Input(‘datatable-upload-container’, ‘data’),
Input(‘boxdropdown’, ‘value’)])
def display_graph(rows, boxdropval):
df = pd.DataFrame(rows)
print(df.head(3))

if (df.empty or len(df.columns) < 1):
    return {'data': [{'x': [],'y': [],'type': 'bar'}]}

return {
    'data': [{
        'x': df[df.columns[0]],
        'y': df[boxdropval],
        'type': 'bar'
    }]
}

if name == ‘main’:
# app.run_server(debug=True)
app.run_server(mode=‘external’, port=8053)

1 Like

I’m having a similar problem…did you ever solve this?