Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SimpleExample not rendering

See original GitHub issue

Hi,

I’m trying to start learning Plotly Dash with Django via django-plotly-dash app. Thank you for the great work!

I’m running Django 3.0 in an Anaconda environment. I’ve installed Dash from the conda-forge channel:

https://github.com/conda-forge/dash-feedstock#installing-dash

and django-plotly-dash with pip into the Anaconda:

https://stackoverflow.com/a/43729857

I’ve then tried to follow the installation guide and added django_plotly_dash to INSTALLED_APPS in the Django settings.py file as well as registered routing in urls.py file and run manage.py migrate.

Finally, I’ve copied the code from the Simple usage into my views.py:

from django.shortcuts import render

import dash
import dash_core_components as dcc
import dash_html_components as html

from django_plotly_dash import DjangoDash


app = DjangoDash('SimpleExample')   # replaces dash.Dash

app.layout = html.Div([
    dcc.RadioItems(
        id='dropdown-color',
        options=[{'label': c, 'value': c.lower()} for c in ['Red', 'Green', 'Blue']],
        value='red'
    ),
    html.Div(id='output-color'),
    dcc.RadioItems(
        id='dropdown-size',
        options=[{'label': i,
                  'value': j} for i, j in [('L', 'large'), ('M', 'medium'), ('S', 'small')]],
        value='medium'
    ),
    html.Div(id='output-size'),
])


@app.callback(
    dash.dependencies.Output('output-color', 'children'),
    [dash.dependencies.Input('dropdown-color', 'value')])
def callback_color(dropdown_value):
    return "The selected color is %s." % dropdown_value


@app.callback(
    dash.dependencies.Output('output-size', 'children'),
    [dash.dependencies.Input('dropdown-color', 'value'),
     dash.dependencies.Input('dropdown-size', 'value')])
def callback_size(dropdown_color, dropdown_size):
    return "The chosen T-shirt is a %s %s one." % (dropdown_size,
                                                   dropdown_color)


def index(request):

    return render(
        request=request,
        template_name='web/hello_world.html'
    )

My hello_world.html template looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Django Dash Example</title>
</head>
<body>
    {% load plotly_dash %}
    {% plotly_app name="SimpleExample" %}

    <p>Hello World!</p>
</body>
</html>

All seems good. I don’t get any error messages and after loading the view, I can see the SimpleExample StatelessApp instance in the Django admin. However, the loaded page has only empty space before the Hello World! text. The source of the page looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Django Dash Example</title>
</head>
<body>
    
    <div style="
    position: relative;
    padding-bottom: 10.0%;
    height: 0;
    overflow:hidden;
    ">
  <iframe src="/django_plotly_dash/app/SimpleExample/" style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    " frameborder="0"></iframe>
</div>


    <p>Hello World!</p>
</body>
</html>

So, the iframe is there but nothing shows in the page.

I’ve checked the issues 116 and 102 but they seem different.

What am I missing?

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

8reactions

EvdH0commented, Jan 12, 2020

To make it more general X_FRAME_OPTIONS = 'SAMEORIGIN' in settings.py should work as described in https://docs.djangoproject.com/en/3.0/ref/clickjacking/#how-to-use-it

1reaction

Duwevanscommented, Dec 19, 2019

I was experiencing an issue that might be similar - I was getting a refused connection when trying to load my dash app. I added X_FRAME_OPTIONS = 'ALLOW-FROM localhost:8000' in settings.py which now allows my app to load.