Search code examples
pythonhtmldjango-templatesplotly-dashblocked

The browser blocks Dash component inside Django

I have made a Django project which I tried to insert a Dash component in, using django_plotly_dash module, that part related to Dash component won't show and gets blocked by browser:

enter image description here

This is the Dash graph code I used (simpleexample.py):

import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from django_plotly_dash import DjangoDash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = DjangoDash('SimpleExample', external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.H1('Square Root Slider Graph'),
    dcc.Graph(id='slider-graph', animate=True, style={"backgroundColor":"#1a2d46",'color':'#ffffff'}),
    dcc.Slider(
        id='slider-updatemode',
        marks={i: '{}'.format(i) for i in range(20)},
        max=20,
        value=2,
        step=1,
        updatemode='drag',
    ),
    html.Div(id='updatemode-output-container', style={'margin-top':20})
])

@app.callback([ 
    Output('slider-graph', 'figure'),
    Output('updatemode-output-container', 'children')
    ],
    [Input('slider-updatemode', 'value')])

def display_value(value):

    x = []
    for i in range(value):
        x.append(i)

    y = []
    for i in range(value):
        y.append(i*i)

    graph = go.Scatter(
        x=x,
        y=y,
        name= 'Manipulate Graph'
    )
    layout = go.Layout(
        paper_bgcolor='#27293d',
        plot_bgcolor='rgba(0,0,0,0)',
        xaxis=dict(range=[min(x),max(x)]),
        yaxis=dict(range=[min(y),max(y)]),
        font=dict(color='white'),
    )

    return {'data':[graph], 'layout':layout}, f'Value: {round(value,1)} Square: {value*value}'


if __name__ == '__main__':
    app.run_server(debug=True)

And this is my html template (welcome.html):

{% extends 'base.html' %}
{% load static %}
{% block content %}
{% load plotly_dash %}
<h1>Home Page</h1>

<div class="{% plotly_class name='SimpleExample' %} card" style="height: 100%; width: 100%">
{% plotly_app name='SimpleExample' ratio=0.65 %}

</div>

{% endblock %}

Note: I don't have plotly_class in css file, I just used it in the template.

Please let me know how I can load Dash part inside Django project without getting blocked by browser. Thank you!

Solution

  • I found the answer, in MIDDLEWARE section of settings.py.

    Remove:

    django.middleware.clickjacking.XFrameOptionsMiddleware