I can see a lot of post with similar or even same problem but I am still unable to solve the issu, sorry for spamming. With plotly-dash I am able to plot a figure by selecting a column of a hard-coded csv. I have tried different examples and now I am also able to print/plot csv from an uploaded file. However, I want to upload a csv and in a dropdown menu, I want to be able to select a column and plot it.
With this I was able to plot line as well as box plot from a hard coded csv by choosing a column from a dropdown menu.
df = pd.read_csv('df_anomaly.csv')
html.Div([
html.H3([
dcc.Dropdown(
id = 'Dropdown',
options=[{'label': k, 'value': k} for k in list(df.columns.values)[1:]],
value='a',
placeholder="Name"),
]),
], className = "filter"),
html.Div([
html.Div([
html.Div([
dcc.Graph(id='Lineplot'),
], style={'width': '75%','display': 'inline-block', 'marginLeft': '15', 'marginTop': '15'}),
html.Div([
dcc.Graph(id='Boxplot')
], style={'width': '23.8%', 'display': 'inline-block', 'marginRight': '15','marginTop': '15','float':'right'})], style={
'padding': '10px 15px'
}),
], style={'padding': '5px 0px','backgroundColor': colors['grey'], 'marginTop': '8', 'marginBottom': '8'})
])
# Updating Observed Data Plot
@app.callback(
dash.dependencies.Output('Lineplot', 'figure'),
[dash.dependencies.Input('Dropdown', 'value')])
def update_graph(selector):
df_selected = init_calc(selector)
return {
'data': [go.Scatter(
y = np.array(df_selected['selected']),
mode = 'lines',
line = dict(
color = colors['red']
)
)],
'layout': go.Layout(
height=400,
title=go.layout.Title(
text='Line Plot',
font=dict(
color = colors['black'],
)
),
xaxis=dict(
title='x',
linecolor = colors['black'],
color = colors['black'],
ticks='inside',
zeroline = False,
),
yaxis=dict(
title='y',
linecolor = colors['black'],
color = colors['black'],
ticks='inside',
zeroline = False,
),
hovermode='closest',
)
}
# Updating Boxplot
@app.callback(
dash.dependencies.Output('Boxplot', 'figure'),
[dash.dependencies.Input('Dropdown', 'value')])
def update_boxplot(selector):
df_selected = init_calc(selector)
return {
'data': [go.Box(
name='',
y=df_selected['selected'],
marker = dict(
color = colors['orange']
)
)],
'layout': go.Layout(
height=400,
title=go.layout.Title(
text='Boxplot',
font=dict(
color = colors['black'],
)
),
xaxis=dict(
linecolor = colors['black'],
color = colors['black'],
zeroline = False,
),
yaxis=dict(
title='Traffic',
linecolor = colors['black'],
color = colors['black'],
zeroline = False,
ticks='inside',
),
),
}
def init_calc(selector):
df_selected = pd.DataFrame(columns=['selected'])
df_selected['selected'] = df[str(selector)]
return df_selected
#------------------------------------------------------------------------------------
# Running the App
if __name__ == '__main__':
app.run_server(debug=False)
Also, If I add this bit of code I can print the uploaded csv:
html.Div([
dcc.Upload(
id='upload-data',
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': '2px'
},
# 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(filename),
# html.H6(datetime.fromtimestamp(date)),
dash_table.DataTable(
data=df[:5].to_dict('records'),
columns=[{'name': i, 'id': i} for i in df.columns]
),
html.Hr(), # horizontal line
# For debugging, display the raw contents provided by the web browser
# html.Div('Raw Content'),
# html.Pre(contents[0:200] + '...', style={
# 'whiteSpace': 'pre-wrap',
# 'wordBreak': 'break-all'
# })
])
@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
with the little tweak I can also manually choose the column and plot the column of the uploaded csv but I want to be able to select a column of uploaded csv as I did with the hardcoded one. How can I do that?
Thanks in advance