I’ve made a change so I now have a dcc.dropdown, and I have a callback which takes the dcc.dropdown in addition to a slider to change the figure of a pie chart. It works!
The only issue I have now is, I would like to do the same and update all my graphs depending on this input (the pie chart takes the slider input, but the other graphs do not).
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
df = pd.read_csv(‘pcl-sales-jan.csv’)
df2 = pd.read_csv(‘pcl-sales-feb.csv’)
app.layout = html.Div([
# Div1 - Heading
html.Div([
html.H1(‘PCL Performance Dashboard’),
dcc.Dropdown(
id=‘month-selector’,
placeholder=‘Select a month to view’,
options=[
{‘label’: ‘Jan’, ‘value’: ‘Jan’},
{‘label’: ‘Feb’, ‘value’: ‘Feb’},
{‘label’: ‘March’, ‘value’: ‘March’},
])]),
# Div2 - Output Display from Month Selector
html.Div(id='output-selection'),
# Div3 - Table
html.Div([
html.P([html.Br()]),
dash_table.DataTable(
id='table',
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict('records'))
], className="row"),
# Div4 - Pie chart and slider
html.Div([
dcc.Graph(id='pcl-sales-pie',
style={'width': '120%'}),
dcc.Slider(
id='date-slider',
min=df['Date'].min(),
max=df['Date'].max(),
value=df['Date'].min(),
marks={str(Date): str(Date) for Date in df['Date']},
step=None
)
], className= "five columns"),
# Div5 - History Graph
html.Div([
dcc.Graph(
id='history-graph',
figure={
'data': [
{'x': df['Date'], 'y': df['Orders Raised'], 'type': 'scatter', 'name': 'Orders Raised'},
{'x': df['Date'], 'y': df['Orders Shipped'], 'type': 'scatter', 'name': 'Orders Shipped'},
],
'layout': {
'title': 'Sales History for Selected Month'
}
}),
], className="six columns"),
# Div6 - Forward Order/Back Order
html.Div([
dcc.Graph(
id='forward-back-orders',
figure={
'data': [
{'x': df['Date'], 'y': df['Forward Sheets'], 'type': 'scatter', 'name': 'Forward Orders'},
{'x': df['Date'], 'y': df['Back Sheets'], 'type': 'scatter', 'name': 'Back Orders'},
],
'layout': {
'title': 'Sheets from Forward Orders vs Back Orders'
}
}),
], className="eleven columns"),
])
def find_date(dayofmonth):
for index, item in enumerate(df[‘Date’]):
if item == dayofmonth:
return index
return 0
@app.callback(
Output(‘pcl-sales-pie’, ‘figure’),
[Input(‘date-slider’, ‘value’),
Input(‘month-selector’, ‘value’)])
def update_figure(date_slider_value, month_selector_value):
ndx = find_date(date_slider_value)
# if None is selected
if month_selector_value == 'None':
df = pd.read_csv('pcl-sales-jan.csv')
# if Jan is selected
if month_selector_value == 'Jan':
df = pd.read_csv('pcl-sales-jan.csv')
# if Feb is selected
if month_selector_value == 'Feb':
df = pd.read_csv('pcl-sales-feb.csv')
shipped = df['Orders Shipped'][ndx]
open = df['Orders Open'][ndx]
info = [shipped, open]
return {
"data": [go.Pie(labels=["Shipped", "Open"],
values=info,
textinfo='label')],
"layout": go.Layout(title=f'Shipped Performance for Selected Day',
margin={"l": 300, "r": 300, },
legend={"x": 1, "y": 0.7})}
@app.callback(
Output(‘output-selection’, ‘children’),
[Input(‘month-selector’, ‘value’)])
def update_output(value):
chosenmonth = value
print (chosenmonth)
return 'You have selected "{}"'.format(value)
if name == ‘main’:
app.run_server(debug=True,host=‘0.0.0.0’)