Hello Dash Community,
I am having a lot of trouble getting a single graph to update with multiple Inputs (not just the x and y axis).
TL;DR
Essentially, I am trying to get the multiple dropdowns/charts to behave like multiple slicers/charts in Excel.
Here is the situation:
- Bar Graph with categorical variables on the X axis and their frequency on the Y axis. I want the X axis to filter based on multiple dropdown selections
- 8 dropdowns (Shift, Group, Hour (of the work day), Quarter, Month, Week, Weekday, and Date)
- Reading a SQLite3 DB into a Pandas DF.
- One dropdown works perfectly, but when I try to add more, the graphs do not display and do not work.
Some Code (One Dropdown called and functioning):
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import plotly.offline as pyo
from dash.dependencies import Output, Input
import plotly.graph_objs as go
import pandas as pd
import sqlite3 as db
conn = db.connect('DB.db')
def sql(query):
df = pd.read_sql(query,conn)
return df
full = sql("""SELECT * FROM table""")
bar_default = sql("""
SELECT Group, COUNT(*) AS Count
FROM table
WHERE Shift = "1st" OR Shift = "2nd" OR Shift= "3rd"
GROUP BY Group
ORDER BY Count DESC""")
group_df = sql("""
SELECT DATE(Week) AS Week,
DATE(Date) AS Date,
Group,
COUNT(*) AS Count
FROM table
WHERE Shift = "1st" OR Shift = "2nd" OR Shift = "3rd"
GROUP BY Week, Date, Group
ORDER BY Date, Group
""")
header = #Header styling and code here
app = dash.Dash(__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[{"name": "viewport",
"content": "width=device-width"}]
)
dropdowns = dbc.Row(
[
dbc.Col(
dcc.Dropdown(
id="shift_dropdown",
options=[{'label':i,'value':i}for i in full['Shift'].unique()],
value = None,
placeholder="Shift")),
dbc.Col(
dcc.Dropdown(
id="hour_dropdown",
options=[{'label':i,'value':i}for i in full['Hour'].unique()],
value = None,
placeholder="Hour")),
dbc.Col(
dcc.Dropdown(
id="group_dropdown",
options=[{'label':i,'value':i}for i in full['Group'].unique()],
value = None,
placeholder="Group")),
dbc.Col(
dcc.Dropdown(
id="quarter_dropdown",
options=[{'label':i,'value':i}for i in full['Quarter'].unique()],
value = None,
placeholder="Quarter")),
dbc.Col(
dcc.Dropdown(
id="month_dropdown",
options=[{'label':i,'value':i}for i in full['Month'].unique()],
value = None,
placeholder="Month")),
dbc.Col(
dcc.Dropdown(
id="week_dropdown",
options=[{'label':i,'value':i}for i in full['Week'].unique()],
value = None,
placeholder="Week")),
dbc.Col(
dcc.Dropdown(
id="day_dropdown",
options=[{'label':'Mon','value':'Mon'},
{'label':'Tue','value':'Tue'},
{'label':'Wed','value':'Wed'},
{'label':'Thu','value':'Thu'},
{'label':'Fri','value':'Fri'}],
value = None,
placeholder="Day")),
dbc.Col(
dcc.Dropdown(
id="date_dropdown",
options=[{'label':i,'value':i}for i in full['Date'].unique()],
value = None,
placeholder="Date"))
],justify='center',style={'padding':'5px'},align="center",className="sticky-top")
body =html.Div([
dbc.Row(
dbc.Col(
# Bar Graph
dcc.Graph(id='bar'),style={'margin':'5px','border':'1px solid black',}),
className='twelve columns',
justify="center")
],style={'textAlign':'center','margin':'5px'})
footer = #Footer styling and code here
app.layout = html.Div([header,dropdowns,body,footer])
@app.callback(Output('bar','figure'),
[Input('week_dropdown','value')])
def update_bar(week):
if week == None:
df = bar_default
else:
df = group_df.loc[group_df['Week'] == week]
data = []
figure = go.Bar(x=df['Group'],
y=df['Count'],
name="Group Stats")
data.append(figure)
layout = {
'title':"Stats By Group",
'plot_bgcolor':'#f0f0ef',
'paper_bgcolor':'#d6d6d6'}
return {'data':data,
'layout':layout}
if __name__ == '__main__':
app.run_server()
Thank you in advance!