I have 2 pretty simple dashboards and I would like to run this two dashboards with flask using main.py for routing.
app1.py
import dash
from dash import html, dcc
app = dash.Dash(__name__)
app.layout = html.Div(
children=[
html.H1('App 1'),
dcc.Graph(
id='graph1',
figure={
'data': [{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'App 1'}],
'layout': {
'title': 'App 1 Graph'
}
}
)
]
)
and
app2.py
import dash
from dash import html, dcc
app = dash.Dash(__name__)
app.layout = html.Div(
children=[
html.H1('App 2'),
dcc.Graph(
id='graph2',
figure={
'data': [{'x': [1, 2, 3], 'y': [2, 4, 1], 'type': 'bar', 'name': 'App 2'}],
'layout': {
'title': 'App 2 Graph'
}
}
)
]
)
main.py
# main_app.py
from flask import Flask, render_template
import app1
import app2
app = Flask(__name__)
@app.route('/')
def index():
return 'Main App'
@app.route('/app1')
def render_dashboard1():
return render_template('dashboard1.html')
@app.route('/app2')
def render_dashboard2():
return render_template('dashboard2.html')
if __name__ == '__main__':
app.run(debug=True)
dashboard1.html
<!-- dashboard1.html -->
<!DOCTYPE html>
<html>
<head>
<title>Dashboard 1</title>
</head>
<body>
<h1>Dashboard 1</h1>
<iframe src="/app1" width="1000" height="800"></iframe>
</body>
</html>
dashboard2.html
<!-- dashboard2.html -->
<!DOCTYPE html>
<html>
<head>
<title>Dashboard 2</title>
</head>
<body>
<h1>Dashboard 2</h1>
<iframe src="/app2" width="1000" height="800"></iframe>
</body>
</html>
structure
/ app1.py app2.py main.py /templates dashboard1.html dashboard2.html
but when I run my main.py and route for app1 I can see frame for the app1 but there is no graph. Could someone please explain how to use iframe to for me to be able to see output?
from HTML iframe with dash output
No comments:
Post a Comment