Consolidating multiple Python Charts into one Dashboard with Plotly-Dash - callback

Question

I have two different Python Dashboards, both of which visualize different types of financial data. I would like to have both figures on one single dashboard, one above the other. Would you happen to know if that is possible? If so, I'm sure one has to extend the entire app structure, including the layout and, more importantly, callback part. Has anyone any experience with merging two apps into one dashboard? Below you'll find my code I've assembled so far.
First Dashboard:
# import relevant packages
import pandas as pd
import numpy as np
import matplotlib as mpl
import plotly
import dash
import pyodbc
import plotly.express as px
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
data = [['2020-01-31', 100, 100, 100], ['2020-02-28', 101, 107, 99], ['2020-03-31', 104, 109, 93], ['2020-04-30', 112, 115, 94], ['2020-05-31', 112, 120, 89]]
# Create the pandas DataFrame
df = pd.DataFrame(data, columns = ['DATE', 'A', 'B', 'C'])
df = df.set_index('DATE')
df
# create the Dash app
app = dash.Dash()
# Set up the app layout
app.layout = html.Div(children=[
html.H1(children='Index Dashboard'),
html.P('''Pick one or more stocks from the dropdown below.'''),
dcc.Dropdown(id='index-dropdown',
options=[{'label': x, 'value': x}
for x in df.columns],
value='A',
multi=True, clearable=True),
dcc.Graph(id='price-graph')
])
# Set up the callback function
#app.callback(
Output(component_id='price-graph', component_property='figure'),
[Input(component_id='index-dropdown', component_property='value')],
)
def display_time_series(selected_index):
dff = df[selected_index] # Only columns selected in dropdown
fig = px.line(dff, x=df.index, y=selected_index, labels={'x': 'x axis label'})
fig.update_layout(
title="Price Index Development",
xaxis_title="Month",
yaxis_title="Price",
font=dict(size=13))
return fig
# Run local server
if __name__ == '__main__':
app.run_server(debug=True, use_reloader=False)
Second Dashboard:
data2 = [['A', 'B', 0.4], ['A', 'C', 0.5], ['A', 'D', 0.1], ['X', 'Y', 0.15], ['X', 'Z', 0.85]]
df2 = pd.DataFrame(data2, columns = ['BM_NAME', 'INDEX_NAME', 'WEIGHT'])
df2
barchart = px.bar(
data_frame=df2,
x=df2.BM_NAME,
y="WEIGHT",
color="INDEX_NAME",
opacity=0.9,
barmode='group')
barchart
# create the Dash app
app = dash.Dash()
# set up app layout
app.layout = html.Div(children=[
html.H1(children='BM Composition'),
dcc.Dropdown(id='BM-dropdown',
options=[{'label': x, 'value': x}
for x in df2.BM_NAME.unique()],
value='A',
multi=False, clearable=True),
dcc.Graph(id='bar-chart')
])
# set up the callback function
#app.callback(
Output(component_id="bar-chart", component_property="figure"),
[Input(component_id="BM-dropdown", component_property="value")],
)
def display_BM_composition(selected_BM):
filtered_BM = df2[df2.BM_NAME == selected_BM] # Only use unique values in column "BM_NAME" selected in dropdown
barchart = px.bar(
data_frame=filtered_BM,
x="BM_NAME",
y="WEIGHT",
color="INDEX_NAME",
opacity=0.9,
barmode='group')
return barchart
# Run local server
if __name__ == '__main__':
app.run_server(debug=True, use_reloader=False)
Many thanks in advance!