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

Dash Dropdown - Auto-Validation

Hi Everyone , I had a problem With my Dropdown it’s auto-validate and I can’t choose multiple values here is my code :

`def create_dashboard(server):
dash_app = dash.Dash(server=server,
routes_pathname_prefix=’/dashapp/’,
external_stylesheets=[’/static/dist/css/styles.css’,
https://fonts.googleapis.com/css?family=Lato’]
)

db = pymysql.connect("localhost", "root", "password", "pokemon")
sql_query = pd.read_sql_query("SELECT * FROM pkmn", db)
df = pd.DataFrame(sql_query)


dash_app.index_string = html_layout

dash_app.layout = html.Div(
    children=[dcc.Dropdown(
        id='histogram-graph',
         options=[{'label': i, 'value': i} for i in df['Name']
                  ],
         
         placeholder="Select Pokemon",
         multi=True,
        
    ),

],
    id='dash-container'
)

@dash_app.callback(
                dash.dependencies.Output('dash-container', 'children'),
                [dash.dependencies.Input('histogram-graph', 'value')])`

Did you see an issue?

Thank you for your reply…

Welcome to the Dash Community @AshSepiol

Can you please explain more about the problem. Are the values inside the dropdown showing up, but you can’t choose mulitple values?

Adam

Hi @AshSepiol,
I am using multi property in my code and it does work.
Could you please confirm if the actual data shows up in dropdown as mentioned by @adamschroeder.
You can please refer my code snippet:-
dcc.Dropdown(id=‘apis’,
clearable=True,
multi=True,
options=[
{‘label’: name.capitalize(), ‘value’: name}
for name in allAPIs
],
style={‘margin’: ‘10px 10px’,‘width’:‘50%’}
)
image

Tried your dropdown code and works fine.

Hello thank for your reply and your interest !

All the value showing up but when I selected one data , my plot generate.
I want to select multi data before validation to generate a plot with many data you think I need to add a Export buttons like in the code Shefali2909?

The Export button is for the dash data table i have in place.
So that should not make any difference.
Is that your complete code?
And do you see any console errors popping up? just in case to understand the problem better.

pandas.io.sql.DatabaseError: Execution failed on sql ‘SELECT * FROM pkmn WHERE Name in None’: (1064, “You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘None’ at line 1”)

When i just landed to the the page that generate my SQL query

db = pymysql.connect(“localhost”, “root”, “password”, “pokemon”)

def create_dashboard(server):
dash_app = dash.Dash(server=server,
routes_pathname_prefix=’/dashapppkmn/’,
external_stylesheets=[’/static/dist/css/styles.css’,
https://fonts.googleapis.com/css?family=Lato’]
)

db = pymysql.connect("localhost", "root", "password", "pokemon")
sql_query = pd.read_sql_query("SELECT * FROM pkmn", db)
df = pd.DataFrame(sql_query)


dash_app.index_string = html_layout

dash_app.layout = html.Div(
    children=[dcc.Dropdown(
        id='histogram-graph',
         options=[{'label': i, 'value': i} for i in df['Name']
                  ],
         
         placeholder="Select Pokemon",
         multi=True,
        clearable=True
    ),
        create_data_table(df)
],
    id='dash-container'
)

@dash_app.callback(
                dash.dependencies.Output('dash-container', 'children'),
                [dash.dependencies.Input('histogram-graph', 'value')])

def update_output(value):
                                query = pd.read_sql_query("SELECT * FROM pkmn WHERE Name in {}".format(value).replace("[", "(").replace("]" , ")"), db)
                                fig = go.Figure(data=[
                                go.Bar(name='Sp Atk', y=query['SpAtk'], x=value),
                                go.Bar(name='Sp Def', y=query['SpDef'], x=value),
                                go.Bar(name='Speed', y=query['Speed'], x=value),
                                go.Bar(name='Attack', y=query['Attack'], x=value),
                                go.Bar(name='Defense', y=query['Defense'], x=value),
                                go.Bar(name='HP', y=query['HP'], x=value)
                        ])
                                fig.update_layout(barmode='group')
                                return fig.show()
        
return dash_app.server

This is my code but I think I do a mistake in the code and the dash run by himself …

Will i used your code and did tweak it at places to make it work for me.
It’s not exactly the same but hoping it might help you understand the issue in your code.
Code:-
import dash
import dash_html_components as html
import dash_core_components as dcc

db = pymysql.connect(“localhost”, “root”, “password”, “pokemon”)

sql_query = pd.read_sql_query(“SELECT * FROM pkmn”, db)

df = pd.DataFrame(sql_query)

Initialise the app

dash_app = dash.Dash(name)

dash_app.layout = html.Div(
[
dcc.Dropdown(
id=‘histogram-graph’,
options=[{‘label’: i, ‘value’: i} for i in [‘A’,‘B’]
],
placeholder=“Select Pokemon”,
multi=True,
clearable=False
),
# create_data_table(df)
],
id=‘dash-container’
)

@dash_app.callback(

dash.dependencies.Output(‘dash-container’, ‘children’),

[dash.dependencies.Input(‘histogram-graph’, ‘value’)])

def update_output(value):

print(“fff”)

Run the app

if name == ‘main’:
dash_app.run_server(debug=True)

Hope this helps you.
Thanks