Django and Dash - ead's Method

Dash Python
43

Given this method, how are variables passed from the pure Django app to the Dash app?

Take this for example:

A user is on a page called ‘profile’. This page contains a table with two cols. In col1 there is a company name and in col2 there is a button. Clicking a button will load the dash app connected to a dataframe, filtered by the company associated with that button.

What would be the best approach to passing the ‘company’ name between apps to a place such as server.URL_BASE_PATHNAME = /viz/company? Or accessing the variable in dashapp.

44

I followed the coding snippets of python, Django & Dash above by user ‘nedned’.
I also followed a similar tutorial on youtube, however, in both instances I received the error in the html “Error loading layout”. Does anybody knows what this would entail? If not then how would I go about tracing the error?

Maybe the following html source code would help ?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>Dash</title>
    <link rel="icon" type="image/x-icon" href="/as_dash/_favicon.ico">
    
</head>
<body>
    
<div id="react-entry-point">
    <div class="_dash-loading">
        Loading...
    </div>
</div>

    <footer>
        <script id="_dash-config" type="application/json">{"url_base_pathname": "/as_dash/", "requests_pathname_prefix": "/as_dash/"}</script>
        <script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"</script>
        <script src="https://cdn.plot.ly/plotly-1.44.3.min.js"></script>
        <script src="https://unpkg.com/dash-core- components@0.43.1/dash_core_components/dash_core_components.min.js"> </script>
        <script src="https://unpkg.com/dash-html-components@0.13.5/dash_html_components/dash_html_components.min.js"> </script>
        <script src="https://unpkg.com/dash-renderer@0.18.0/dash_renderer/dash_renderer.min.js"></script>
    </footer>
</body>
45

Hi there

I am trying to use your approach but running in to an error:

File "/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django_plotly_dash/dash_wrapper.py", line 67, in get_local_stateless_by_name
raise KeyError("Unable to find stateless DjangoApp called %s"%name)

KeyError: ‘Unable to find stateless DjangoApp called simpleexample’

I’ve created a new Django App (admin_dashboard) within my Django project, so my folder structure looks like this:

49
49499×1270 76.1 KB

In plotly_apps is test_chart.py, which is the “SimpleExample” lifted from Github main page.

In admin_dashboard/urls.py I have this:

from admin_dashboard import views

urlpatterns = [
    url(r'admin/dashboard/$', views.index, name='index')
]

In admin_dashboard/views.py I have this:

from django.shortcuts import render

def index(request):
    return render(request, 'admin_dashboard/index.html')

In main project urls.py I have included path(r'', include('admin_dashboard.urls'))

In index.html I have this where I want the chart to appear:

              {% load plotly_dash %}
              {% plotly_app name="SimpleExample" %}

I think all that is correct and what I’m missing is the import of my test_chart.py / plotly_apps directory but I’m not entirely sure how/where I put it it?

46

Think I may have the import in the right place now - from admin_dashboard.plotly_charts import test_chart in admin_dashboard/urls.py

When I now go to http://127.0.0.1:8000/admin/dashboard/ I’m getting a new error:

NoReverseMatch at /admin/dashboard/

‘the_django_plotly_dash’ is not a registered namespace

Extract from the error message trace:

Variable Value
args
current_app None
current_ns None
current_path None
kwargs {‘ident’: ‘SimpleExample’}
ns ‘the_django_plotly_dash’
ns_converters {}
ns_pattern ‘’
parts [‘app-main’, ‘the_django_plotly_dash’]
path
prefix ‘/’
resolved_path
resolver <URLResolver ‘reg_comparison.urls’ (None:None) ‘^/’>
urlconf ‘reg_comparison.urls’
view ‘app-main’
viewname ‘the_django_plotly_dash:app-main’

I’m not sure where the ns, view, view name, and parts are all coming from? That is not the name of my view, for example.

47

@Chris369 have a look at the installation and related docs - it looks like you’re missing some of the configuration steps.

If after setting things up, you still have an issue, then the django-plotly-dash project on github is probably the best place to raise it.

48

Thanks for the quick response. Which steps might I have missed?

I’ve pip installed the package and registered the package under installed apps in my projects settings.py

Does the package need to be within my project’s directory?

49

So you’ve done the first two steps on the configuration page whose link I posted. You should continue on with the other steps; you can skip the live updating part if you’re not using it.

50

Sorry but not sure what I’m missing - I have done the three steps here from your brief installation process.

From your more detailed documentation link, I’m not using header and footer tags so don’t need the middleware bit.

I’ve registered my app in my project’s urls.py - path(r'', include('admin_dashboard.urls'))

Have run migrations and included the appropriate tags in my html file

              {% load plotly_dash %}
              {% plotly_app name="SimpleExample" %}

I’m not using Live updating so the rest is not required.

What am I missing?

51

Have you also done this step?

The application’s routes need to be registered within the routing structure by an appropriate include statement in a urls.py file:

urlpatterns = [ … path(‘django_plotly_dash/’, include(‘django_plotly_dash.urls’)), ]

The name within the URL is not important and can be changed.

1 Like
52

Thank you - I totally misunderstood that step - I thought I was meant to be changing that to include the URLs of my own Django app that is handling my Plotly charts!

53

Just a heads up for anyone using my example: please refer to the Github code rather than the code in my post, as the Github code has some fixes for handling static assets.

But of course, you should be using a web server to handle to your static assets in production at least :wink:

1 Like
54

Is there a way I can do something like this?

in views.py:
def financials(request):
return render(request, ‘admin_dashboard/financials.html’, {
‘chart’ : ‘{% plotly_direct name=SearchBehaviour %}’,
})

in html file:

{{ chart }}

And then the Plotly Django tag gets inserted in to the page with the relevant chart? (If this is possible then name would be set depending on the URL that is visited).

My thinking is that I am designing a site with around 8 chart pages and individual URLs, and rather than creating 8 x html files with the app name hardcoded in each, I want a chart_layout_base.html, and I’d set my charts up as Objects (Chart title, chart description, chart app name (for Django plotly tag) etc

My initial attempt above does not have the desired effect and it just outputs {% plotly_direct name=SearchBehaviour %} as a string instead of the chart

01

Hope that makes sense!

55

Sounds like your template tag is just inserting the string (possibly also html-escaped). Any reason why you can’t put the plotly_direct tag in the html itself?

56

Yes I can do that, was just trying to find a more efficient way of having 8 x html pages for my charts (which all have the same attributes - title, about, source, Plotly app name etc).

The chart description etc would then be editable via Django admin rather than hard coding it all in the html.

So I then have one chart_base.html and have tags such as {{ title }}, {{ about }}, {{ plotly_app }}, and the relevant info will be passed to the html tags via view.py

I did also try {{ title | safe }} in the html but that didn’t work either.

57

The django-plotly-dash tags are the same as any other django ones, so you can do the same things - including pass arguments - to them. Also another possibility is to write your own template tag which can then either invoke one of the dpd ones, or even call the python template tag code directly.

58

Thanks - have cracked it now

In case anyone else needs to do something similar it works like this:

in my views:

def financials(request):
return render(request, 'admin_dashboard/financials.html', {
    'chart' : 'SearchBehaviour',
    })

(SearchBehaviour is the name of my plotly app)

in html file:

              {% plotly_direct name=chart %}
59

Have been building a Django site (with Plotly charts on some pages) on my local machine and recently uploaded it to PythonAnywhere. All non-plotly pages are loading fine but any of my pages containing Plotly charts are giving me this error. Any ideas?

AttributeError at /charts/chart1/

‘WrappedDash’ object has no attribute ‘_generate_renderer’

Request Method: GET
Request URL: http://www.lookintobitcoin.com/charts/chart1/
Django Version: 2.2.1
Exception Type: AttributeError
Exception Value: ‘WrappedDash’ object has no attribute ‘_generate_renderer’
Exception Location: /home/chris369/.virtualenvs/myvirtualenv/lib/python3.6/site-packages/django_plotly_dash/dash_wrapper.py in index, line 538
Python Executable: /usr/local/bin/uwsgi
Python Version: 3.6.6
60

Just in case, have you updated to the latest dash?

1 Like
61

Yes that’s working now l I’ve done a pip install dash —upgrade. Thanks

Bit strange though as I did pip install dash yesterday so would have expected that to install the latest version.

62

Thank you Nedned. Is there an ideal way to call the VIZ or fig1 and fig2 from Django? Let us say I have template that has baseline.html that I want to call teh VIZ (dash).

Thank you in advance for your help.