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:

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!

0
X 5 أشهر 2022-07-10T12:06:15+03:00 0 إجابة 5 مشاهدات مبتدئ 0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب