Friday, 26 May 2023

HTML iframe with dash output

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