Hi,
I’m trying to create a dashboard with some dropdowns to filter but also have the ability to filter by selecting a part of the graph (actually several graphs), but whenever I use selectedData as input I get an Error loading dependencies in the page.
I haven’t got to the point of filtering by selectedData values in the code, I’m stuck when I call the input in the callback.
I’m pasting the whole code so you know where everything is coming from.
Any idea where I got it wrong?
Thanks a mil!
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
df = pd.read_csv("item2.txt", sep=',')
app = dash.Dash()
app.css.append_css({'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'})
app.config['suppress_callback_exceptions']=True
app.layout = html.Div(
html.Div(
children=[
#First row
html.Div(
children=[
# Location Dropdown
html.Div(
children=[
html.Label('Location'),
dcc.Dropdown(id='location',
options=[{'label': i, 'value': i} for i in df.Location.unique()],
)
], className="one columns"),
# Site Dropdown
html.Div(
children=[
html.Label('Site'),
dcc.Dropdown(id='site',
options=[{'label': i, 'value': i} for i in df.Site.unique()],
)
], className="one columns"),
# Items
html.Div(
children=[
html.Label('Items'),
html.Div(id='items_container')
#df.shape[0])
], className="one columns"),
# Quantity
html.Div(
children=[
html.Label('Quantity'),
html.Div(id='quantity_container')
], className="one columns"),
]),
html.Div(
children=[
html.Div(
children=[
# BarChart with stock by type
html.Div(id='bar_current_stock_by_type_container'),
], className="six columns", style={'width':'80%'}),
]),
html.Div(
children=[
html.Div(
children=[
# Table with data
html.Div(id='table-container')
], className="twelve columns"),
])
])
)
def get_filtered_df(location, site):
if location is None and site is None:
dff = df
elif site is None:
dff = df[df.Location == location]
elif location is None:
dff = df[df.Site == site]
else:
dff = df[(df.Location == location) & (df.Site == site)]
return dff
def generate_table(df, max_rows=10):
return html.Table(
[html.Tr([html.Th(col) for col in df.columns])] +
[html.Tr([html.Td(df.iloc[i][col]) for col in df.columns])
for i in range(min(len(df), max_rows))], id='full_table'
)
def generate_bar_stock_by_type(df, byStockType):
line = go.Scatter(
x=byStockType.sum()['Inventory Value']/1000,
y=df['Stock Type'],
name = 'Inventory value (k)'
)
bar = go.Bar(
x= byStockType.count()['Current Balance'],
y= df['Stock Type'],
orientation='h',
name = 'Num Stock Units'
)
graph_stock= dcc.Graph(
id='bar_stock_by_type',
figure=go.Figure(
data= [bar,line],
),
selectedData={'points': [], 'range': None},
config={'displayModeBar': False},
style={'width': '40%', 'display': 'inline-block'}
)
#print (graph_stock.selectedData)
return graph_stock
@app.callback(
dash.dependencies.Output('items_container', 'children'),
[dash.dependencies.Input('location', 'value'),
dash.dependencies.Input('site', 'value'),
# This is the line that causes the error
dash.dependencies.Input('bar_stock_by_type', 'selectedData')
])
def display_metric_items(location, site):
dff = get_filtered_df(location, site)
return html.H3(dff.shape[0])
@app.callback(
dash.dependencies.Output('quantity_container', 'children'),
[dash.dependencies.Input('location', 'value'),
dash.dependencies.Input('site', 'value')])
def display_metric_quantity(location, site):
dff = get_filtered_df(location, site)
return html.H3(dff['Current Balance'].sum())
# Table
@app.callback(
dash.dependencies.Output('table-container', 'children'),
[dash.dependencies.Input('location', 'value'),
dash.dependencies.Input('site', 'value'),
])
def display_table(location, site):
dff = get_filtered_df(location, site)
return generate_table(dff)
# Horizontal Bar Chart
@app.callback(
dash.dependencies.Output('bar_current_stock_by_type_container', 'children'),
[dash.dependencies.Input('location', 'value'),
dash.dependencies.Input('site', 'value')])
def display_bar_current_stock_by_type(location, site):
dff = get_filtered_df(location, site)
byStockType = dff.groupby('Stock Type')
return generate_bar_stock_by_type(dff, byStockType)
if __name__ == '__main__':
app.run_server(debug=True)
