Serving a Dash dashboard from Django hosted app to an external webpage

Dash Python
1

I am currently hosting my dashboard on a url like the following: https://xxx.herokuapp.com/dashboard/ExternalDashboard using Django and serving an HTML page with the following contents:

<!DOCTYPE html>
<html>
<head>
    <title>External Dashboard</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #plotly-app-container {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="plotly-app-container">
        {% load plotly_dash %}
        {% plotly_app name="ExternalDashboard" ratio=1 %}
    </div>
</body>
</html>

This works very well and my dash dashboard is interactable and everything is good.

Now I want to serve this Dashboard on another website say https://YYY.herokuapp.com/FetchDashBoard, here I also want to send back some information such as an authentication token which i will use on my dashboard to check which plots to display.

From the official dash documentation (Embed Your Dash App in Other Websites | Dash for Python Documentation | Plotly) on integrating dash I gather zero useful information. Im not a frontend developer and simply creating an html page on https://YYY.herokuapp.com/FetchDashBoard with the following contents just yields a blank page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Dashboard</title>
</head>
<body>
    <div id="dash-app"></div>
    <script>
        var setter = window.dash_embedded_component.renderDash(
            { url_base_pathname: "https://xxx.herokuapp.com/dashboard/ExternalDashboard" },
            'dash-app',
            sharedData
        );
    </script>
</body>
</html>

Bear in mind that im not sending any data to begin with, I just want to see if I can even fetch the dashboard without shared state and then move onto implementing shared state once the base case works.

So how do I show the externally hosted dashboard on website YYY and next up, how do I share a state between the two websites?

For reference my views.py in django which hosts the dash app looks like the following:

from datetime import datetime
from .models import *
import dash
from dash import dcc, html, dash_table, dcc, callback, Output, Input
from django_plotly_dash import DjangoDash
import pandas as pd
import plotly.express as px
import dash_mantine_components as dmc
import plotly.graph_objects as go
from datetime import datetime
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template, ThemeSwitchAIO
import numpy as np
from django.db import connections
import warnings
warnings.filterwarnings("ignore")

load_figure_template("darkly")
app = DjangoDash("ExternalDashboard", external_stylesheets=[dbc.themes.DARKLY])

app.layout = dbc.Container(
    children=[
        dmc.Title("External Dashboard", size="h3"),
        dcc.DatePickerSingle(id="Report-Thru", date=datetime.now().date()),
        dcc.Graph(id="usersession-per-week"),
        dcc.Graph(id="usersession-per-month"),
        html.Div([
            dbc.Row([
                dbc.Col([
                    html.H3("Average Sessions per Day", style={"fontFamily": "Arial", "fontSize": "24px", "fontWeight": "bold", "color": "#FFFFFF"}),
                    dcc.Graph(id="Ave-sessions-per-day"),
                ], width=6),
                dbc.Col([
                    html.H3("Gross Utilization", style={"fontFamily": "Arial", "fontSize": "24px", "fontWeight": "bold", "color": "#FFFFFF"}),
                    dcc.Graph(id="Gross-utilization"),
                ], width=6),
            ])
        ]),
        dcc.Graph(id="route-arrivals")
    ],
    className="darkly"
)
2

I built a different framework than django-plotly-dash. Instead of combining the two I’ve separated the two hosting both a Django application and a plotly application. Ideally the reasoning for my use case was I wanted django to be the website and plotly to be the mobile app. I’ve connected both of these applications with a ninja API to communicate which could also be used to expand or communicate to as many other sites as needed. This is a base template with an example of user login between plotly and django that could be expanded to fit your needs.

1 Like
3

I appreciate the reply, but I am using MS SQL as my database solution. Besides it would be preferable with a solution that doesnt require a new custom installation of Django but instead builds on top of the existing Django