How to create a loop that will create traces for bar graph based on multi-value dropdown

Dash Python
1

So I am trying to create an app the user can upload a file and choose multiple columns of uploaded CSV file to plot in x-axis and one column for y-axis of the bar chart using the multi-value dropdown. So, the question I want to ask is how to create new traces for x-axis based on the columns user choose in the multi-value dropdown.

Thanks a mil!

Below is my code:

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 dash_table
import pandas as pd
from dash.exceptions import PreventUpdate
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__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'), 
    html.Div(id='output-data-upload'),
    dcc.Dropdown(
        id='data_selector1',
        options=[       
            {'label': '', 'value': ''}
        ],
         value=[],
         multi=True
    ),
   dcc.Dropdown(
        id='data_selector2',
        options=[       
            {'label': '', 'value': ''}
        ],         
         value=[]
    ),
    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('data_selector1', 'options'),
              [Input('datatable-upload-container', 'data')])

def update_dropdown(rows):
    if rows is None:
        raise PreventUpdate
    df = pd.DataFrame(rows)
    print('updating menus')
    columns=df.columns
    col_labels=[{'label' :k, 'value' :k} for k in columns]
    return col_labels

@app.callback(Output('data_selector2', 'options'),
              [Input('datatable-upload-container', 'data')])

def update_dropdown1(rows):
    if rows is None:
        raise PreventUpdate
    df = pd.DataFrame(rows)
    print('updating menus')
    columns=df.columns
    col_labels=[{'label' :k, 'value' :k} for k in columns]
    return col_labels

@app.callback(Output('datatable-upload-container', 'data'),
              [Input('datatable-upload', 'contents')],
              [State('datatable-upload', 'filename')])
def update_output(contents, filename):
    if contents is None:
        return [{}]
    df = parse_contents(contents, filename)
    data = df.to_dict('records')
    return data

@app.callback(Output('datatable-upload-graph', 'figure'),
              [Input('data_selector1', 'value'),
              Input('data_selector2', 'value')],
              [State('datatable-upload-container', 'data')])
def display_graph(value1, value2, rows):   
    df = pd.DataFrame(rows)
    trace1 = go.Bar(x=df[value1], y=df[value2], name='Active')
    return {
            'data': [trace1]
 }
 


if __name__ == '__main__':
    app.run_server(debug=False)
2

Hi Yuechean,

I would do the following in the scenario:

  • Add a storage component to store a dataframe.
  • Make sure that dropdown1 and dropdown2 update that storage component with the selected values.
  • Next make a callback that updates the graph using the storage.

Hopefully this gets you up to speed.