Hello Dash Community,
As a new user I have read the Dash tutorial numerous times, run many of the examples, and looked for solutions to my particular needs. I am excited to use Dash but I’m having trouble understanding callbacks and the order in which Dash executes.
The code below is the tutorial dcc.Upload example to which I added dcc.Dropdown and dcc.Graph functions. I can successfully read a simple csv file (a few columns with headers and many rows) into a dataframe and display the column headings in the dropdown box. When I try updating the dcc.Graph (which initially displays the first and second columns, named “TIMESTAMP” and “BattV_Min”, of data in my dataframe) through the dropdown box selection, I get a callback error stating that the dataframe name (df) is not defined. I’ve tried and tried without success. Can someone please explain what I am doing wrong?
Thank you.
import base64
import datetime
import io
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import plotly.express as px
import pandas as pd
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.config.suppress_callback_exceptions = True
Line_1=“BattV_Min”
app.layout = html.Div([
dcc.Upload(
id=‘upload-data’,
children=html.Div([
'Drag and Drop or ',
html.A(‘Select File’)
]),
style={
‘width’: ‘50%’,
‘height’: ‘60px’,
‘lineHeight’: ‘60px’,
‘borderWidth’: ‘1px’,
‘borderStyle’: ‘dashed’,
‘borderRadius’: ‘5px’,
‘textAlign’: ‘center’,
‘margin’: ‘10px’
},
# Allow multiple files to be uploaded
multiple=True
),
html.Div(id=‘output-data-upload’),
])
def parse_contents(contents, filename, date):
content_type, content_string = contents.split(’,’)
decoded = base64.b64decode(content_string)
try:
if ‘csv’ in filename:
# Assume that the user uploaded a CSV file
df = pd.read_csv(io.StringIO(decoded.decode(‘utf-8’)))
elif ‘xls’ in filename:
# Assume that the user uploaded an excel file
df = pd.read_excel(io.BytesIO(decoded))
except Exception as e:
print(e)
return html.Div([
‘There was an error processing this file.’
])
return html.Div([
html.H5("File loaded: " + filename ),
###----------- Add a dropdown box
dcc.Dropdown(id = “sensor-drop”,
options =[{‘label’: i, ‘value’: i} for i in df],
value=[0],
placeholder = “Select a sensor”,
multi=True,
style = {‘width’:‘70%’}
),
html.Hr(), # horizontal line
###-------- Add graph -----------
dcc.Graph(id =“sensor-plot”,
figure = px.line(df, x=‘TIMESTAMP’, y=df[Line_1])
),
###--------------------------
html.Hr(), # horizontal line
])
###----------Update file selection and dropdown box
@app.callback(Output(‘output-data-upload’, ‘children’),
[Input(‘upload-data’, ‘contents’)],
[State(‘upload-data’, ‘filename’),
State(‘upload-data’, ‘last_modified’)])
def update_output(list_of_contents, list_of_names, list_of_dates):
if list_of_contents is not None:
children = [
parse_contents(c, n, d) for c, n, d in
zip(list_of_contents, list_of_names, list_of_dates)]
return children
###-----------------Update Figure
@app.callback(Output(‘sensor-plot’, ‘value’),
[Input(‘sensor-drop’, ‘value’)])
def update_graph(df):
Line_2 = px.line(df,x = ‘TIMESTAMP’, y=df[value])
fig = px.line(data = [Line_1, Line_2], layout = layout)
return fig
if name == ‘main’:
app.run_server(debug=True)
