Hi,
I have dcc.Upload successfully working but would like to also have a dropdown menu with datasets that the user can also use. The end goal would be that selecting the dropdown will result in that dataset to be plotted. I have written some code for it and when I run it there is no error however the graph doesn’t populate. I am a bit unsure of how to proceed so any help would be appreciated. My code is below:
import base64
import io
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.express as px
import flask
df1 = pd.read_csv('/Users/mythilisutharson/documents/cam_work/explorer_data/AAML_Oxygen_Data.csv')
df2 = pd.read_csv('/Users/mythilisutharson/documents/cam_work/explorer_data/CH4_GCMC_Data.csv')
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
server = flask.Flask(__name__)
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, server=server)
app.layout = html.Div([
html.Div([dcc.Upload(
id='data-table-upload',
children=html.Div(['Drag and Drop or ',
html.A('Select Files')
]),
style={
'width': '70%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px 15%'
},
multiple=False
),
]),
html.Div([dcc.Dropdown(id='data-set-upload', options=[{'label': 'AAML_Oxygen_Data.csv', 'value': 'AAML_Oxygen_Data.csv'},
{'label': 'CH4_GCMC_Data.csv', 'value': 'CH4_GCMC_Data.csv'},
])]),
html.Div([dcc.Graph(id='my-graph')], style={'display': 'inline-block', 'width': '70%', 'height':'75%'}),
html.Div([
html.Div([html.Label(["Select X variable:",
dcc.Dropdown(id='xaxis-anim', multi=False, placeholder="Select an option for X")],
className="six columns"
)], style={'width': '170%', 'display': 'inline-block'}),
html.Div([html.Label(["Select Y variable:",
dcc.Dropdown(id='yaxis-anim', multi=False, placeholder='Select an option for Y')],
className="six columns"
), ], style={'width': '170%', 'display': 'inline-block'}),
html.Div([html.Label(
["Select Size variable:",
dcc.Dropdown(id='saxis-anim', multi=False, placeholder='Select an option for Size')],
className="six columns"
)], style={'width': '170%', 'display': 'inline-block'}),
html.Div([html.Label(
["Select Color variable:",
dcc.Dropdown(id="caxis-anim", multi=False, placeholder='Select an option for Color')],
className="six columns"
)], style={'width': '170%', 'display': 'inline-block'})
],
style={'display': 'inline-block', 'width': '23%', })
])
def parse_contents(contents, filename):
content_type, content_string = contents.split(',')
decoded = base64.b64decode(content_string)
try:
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))
elif 'txt' or 'tsv' in filename:
return pd.read_csv(
io.StringIO(decoded.decode('utf-8')), delimiter=r'\s+'
)
except Exception as e:
print(e)
return html.Div([
'There was an error processing this file.'
])
# POPULATE X AXIS DROPDOWN ANIM
@app.callback(Output('xaxis-anim', 'options'),
[Input('data-table-upload', 'contents'),
],
[State('data-table-upload', 'filename'),
State('data-set-upload', 'value')])
def populate_xaxis_dropdown(contents, filename, dataset_upload):
df = parse_contents(contents, filename)
if dataset_upload is None:
return dash.no_update
if dataset_upload == 'AAML_Oxygen_Data.csv':
data = df1
elif dataset_upload == 'CH4_GCMC_Data.csv':
data = df2
else:
data = df
return [{'label': i, 'value': i} for i in data.columns]
# POPULATE Y AXIS DROPDOWN ANIM
@app.callback(Output('yaxis-anim', 'options'),
[Input('data-table-upload', 'contents'),
],
[State('data-table-upload', 'filename'),
State('data-set-upload', 'value')])
def populate_yaxis_dropdown(contents, filename, dataset_upload, ):
df = parse_contents(contents, filename)
if dataset_upload is None:
return dash.no_update
if dataset_upload == 'AAML_Oxygen_Data.csv':
data = df1
elif dataset_upload == 'CH4_GCMC_Data.csv':
data = df2
else:
data = df
return [{'label': i, 'value': i} for i in data.columns]
# POPULATE C AXIS DROPDOWN ANIM
@app.callback(Output('caxis-anim', 'options'),
[Input('data-table-upload', 'contents'),
],
[State('data-set-upload', 'value'),
State('data-table-upload', 'filename')])
def populate_caxis_dropdown(contents, dataset_upload, filename):
df = parse_contents(contents, filename)
if dataset_upload is None:
return dash.no_update
if dataset_upload == 'AAML_Oxygen_Data.csv':
data = df1
elif dataset_upload == 'CH4_GCMC_Data.csv':
data = df2
else:
data = df
return [{'label': i, 'value': i} for i in data.columns]
# POPULATE S AXIS DROPDOWN ANIM
@app.callback(Output('saxis-anim', 'options'),
[Input('data-table-upload', 'contents'),
],
[State('data-set-upload', 'value'),
State('data-table-upload', 'filename')])
def populate_saxis_dropdown(contents, dataset_upload, filename):
df = parse_contents(contents, filename)
if dataset_upload is None:
return dash.no_update
if dataset_upload == 'AAML_Oxygen_Data.csv':
data = df1
elif dataset_upload == 'CH4_GCMC_Data.csv':
data = df2
else:
data = df
return [{'label': i, 'value': i} for i in data.columns]
@app.callback(Output('my-graph', 'figure'),
[Input('data-table-upload', 'contents'),
Input('xaxis-anim', 'value'),
Input('yaxis-anim', 'value'),
Input('caxis-anim', 'value'),
Input('saxis-anim', 'value',
),
],
[State('data-set-upload', 'value'),
State('data-table-upload', 'filename')]
)
def update_figure(contents, x, y, color, size, dataset_upload, filename):
df = parse_contents(contents, filename)
if dataset_upload is None:
return dash.no_update
if dataset_upload == 'AAML_Oxygen_Data.csv':
data = df1
elif dataset_upload == 'CH4_GCMC_Data.csv':
data = df2
else:
data = df
return px.scatter(data, x=data[x], y=data[y], title="", animation_frame="Pressure (bar)",
animation_group=data.columns[0], size=data[size], color=data[color],
hover_name=data.columns[0], color_continuous_scale='Viridis',
hover_data={}, template="none",
).update_xaxes(showgrid=False, title=x, autorange=True, ticks='outside',
showline=True, showspikes=True, mirror=True).update_yaxes(
showgrid=False, title=y, autorange=True, ticks='outside', showspikes=True,
showline=True, mirror=True ).update_layout(
clickmode='event+select', hovermode='closest', margin={}, autosize=True
).update_traces(marker=dict(opacity=0.7, showscale=True, line=dict(width=0.5, color='DarkSlateGrey'),
colorbar=dict(title=color)))
app.run_server(debug=False)
Thank you!