import pandas as pd
import dash
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
import plotly.graph_objects as go
import plotly.express as px
from dash import Dash, no_update, dcc, html
app = Dash(__name__) # Create a dash application
# Clear the layout and do not display exception till callback gets executed
app.config.suppress_callback_exceptions = True
your_data = pd.read_csv('your_file.csv') # Load data
def compute_data_choice_1(df):
# You calculations
return bar_data, map_data, tree_data
def compute_data_choice_2(df):
# You calculations
return data1, data2, data3
# Application layout
app.layout = html.Div(children=[
html.H1('Your Title, style={'textAlign': 'center', 'font-size': 24, 'color': '#503D36'}),
html.Div([
# Holder of two dropdowns
html.Div([
# Dropdown 1 Div Area
html.Div([html.H2('Dropdown 1 choices:', style={'margin-right': '2em'}),]),
dcc.Dropdown(id='input-dropdown-1',
options=[{'label': 'Option 1','value': 'OPT1'},
{'label': 'Option 2','value': 'OPT2'}],
placeholder='Choose option for dropdown 1',
style={'textAlign': 'center', 'font-size': 20, 'color': '#503D36', 'padding': 3, 'width': '80%'})
], style={'display': 'flex'}), # Place them next to each other using the division style
# Dropdown 2 Div Area
html.Div([
# Create an division for adding dropdown helper text for choosing year
html.Div([html.H2('Dropdown 2 choices:', style={'margin-right': '2em'})]),
dcc.Dropdown(id='input-dropdown-2',
options=[{'label': i, 'value': i} for i in range(1,10)],
placeholder="Choose option for dropdown 2", style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}),
], style={'display': 'flex'}), # Place them next to each other using the division style
]),
# Divs for graphs
# id of each Div will be updated during callback
html.Div([], id='plot1'), # Plot-1 Div
html.Div([ html.Div([], id='plot2'), html.Div([], id='plot3')], style={'display': 'flex'})]) # Plot-2 and Plot-3 Div
# Callback function definition
@app.callback([Output(component_id='plot1', component_property='children'), Output(component_id='plot2', component_property='children'),Output(component_id='plot3', component_property='children')],
[Input(component_id='input-dropdown-1', component_property='value'),Input(component_id='input-dropdown-2', component_property='value')],
# Holding output state till user enters all the form information. In this case, it will be chart type and year
[State("plot1", 'children'), State("plot2", "children"), State("plot3", "children")])
# Add computation to callback function and return graph
def get_graph(option_dropdown_1, option_dropdown_2, c1, c2, c3):
# Select data
df = df[df['col'] == int(option_dropdown_2)]
if option_dropdown_1 == 'OPT1':
# Extract necessary dataframe for plotting
bar_data, map_data, tree_data = compute_data_choice_1(df)
# Bar plot
bar_fig = px.bar(bar_data, .... , title='Title for barchart')
bar_fig.update_layout(transition_duration=500)
# Choropleth Plot
map_fig = px.choropleth(map_data, .... , range_color=[0, map_data['Flights'].max()])
map_fig.update_layout( title_text='Title for Choropleth',geo_scope='usa') # Plot only the USA instead of globe
# Treemap Plot
tree_fig = px.treemap(tree_data..... ,title='Title for treemap')
tree_fig.update_layout(transition_duration=500)
# Return dcc.Graph component to the empty division
return [dcc.Graph(figure=tree_fig), dcc.Graph(figure=map_fig),dcc.Graph(figure=bar_fig)]
else:
data1, data2, data3 = compute_data_choice_2(df) # Extract necessary dataframe for plotting
# Create graph for line plots
data1_fig = px.line(data1, x='x', y='y', color='z',title='Line chart 1')
data2_fig = px.line(data2,....)
data3_fig = px.line(data3,....)
return[dcc.Graph(figure=data1_fig), dcc.Graph(figure=data2_fig),dcc.Graph(figure=data3_fig)]
# Run the app
if __name__ == '__main__':
app.run_server(port=8002, host='127.0.0.1', debug=False)