✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Graph With Multiple Dropdown Inputs Not Working

Hi all,

I’m trying to create a time-series Dash line graph that has multiple interactive dropdown user input variables. I would ideally like each of the dropdown inputs to allow for multiple selections.

While I’m able to create the drop down menus successfully, the chart isn’t updating like I’d like. When I allow the dropdowns to have multiple selections, I get an error that arrays are different lengths. And when I limit the dropdowns to one selection, I get an error that [‘Vendor_Name’] is not in index. So this may be two separate problems.

Graph that doesn’t work is here:

Snippet of data frame:
image

Code is below:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
#import plotly.graph_objs as go 
df = pd.read_csv("Data.csv", sep = "\t")
df['YearMonth'] = pd.to_datetime(df['YearMonth'], format = '%Y-%m')
cols = ['Product_1', 'Product_2', 'Product_3']
vendor = df['Vendor'].unique()

app = dash.Dash('Data')

app.layout = html.Div([
html.Div([
    html.Div([
        
        html.Label('Product'),
        dcc.Dropdown(
             id = 'product',
             options = [{
                     'label' : i, 
                     'value' : i
             } for i in cols],
#                multi = True,
            value = 'Product_1'
 
             ),
            ]),

    html.Div([
            
        html.Label('Vendor'),
        dcc.Dropdown(
         id = 'vendor',
         options = [{
                 'label' : i, 
                 'value' : i
         } for i in vendor],
#            multi = True,
         value = 'ABC')
         ,
    ]),
        ]),

dcc.Graph(id = 'feature-graphic')
])


@app.callback(Output('feature-graphic', 'figure'),
[Input('product', 'value'),
 Input('vendor', 'value')])


def update_graph(input_vendor, input_column):


df_filtered = df[df['Vendor'] == input_vendor]

##also tried setting an index because of the error I was getting. Not sure if necessary
df_filtered = df_filtered.set_index(['Vendor']) 

traces = []

df_by_col = df_filtered[[input_column, 'YearMonth']]

traces.append({

    'x' :pd.Series(df_by_col['YearMonth']),
    'y' : df_by_col[input_column],
    'mode' : 'lines',
    'type' : 'scatter',
    'name' :'XYZ'}
    )

fig = {
                'data': traces,
                'layout': {'title': 'Title of Chart'}
                }
return fig


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

Thanks in advance for helping! Still new-ish to Python, but very excited about Dash’s capabilities. I’ve been able to create other graphs with single inputs, and have read through documentation.

2 Likes

hi~ i am unfortunately faced the same problem with you,could you please give me a slice of hint about the way to conquer the problem~
Many Thanks In Advance ~