Django-Plotly-Dash - how to get URL or Slug?

Dash Python
1

I want to include plotly-dash within a Django framework. I want to have one app incorporated into one HTML template that will present line graphs read as pandas dataframe from csv based on the slug entered in the url. The csv files share the same name as the slug to make them easy (I thought) to open.

I want to be able to pull the url path, or the slug, and use that to determine which csv file my app opens and uses to present the data for the line plot.

This worked fine with only Dash. I could use the url and pathname in the callback and use the pathname as the name of the csv file and have the app dynamically open the proper csv file based on the url slug.

@app.callback(
    Output('indicator-graphic', 'figure'), 
    [Input('url', 'pathname'),])
def update_graph(pathname): 
    df=pd.read_csv('path/to/file/'+pathname+'.csv)

The above code worked fine in the Dash test server. When I incorporate this into Django, the url and pathname won’t work anymore.

I have tried everything I can think of to pass the slug or pathname as an Input to the Dash callback. I cannot get anything to work.

Then, I tried to set the dataframe as global variable outside the callbacks and use django’s HttpRequest function. But when I try that, it returns and empty path.

from django.http import HttpRequest

request = HttpRequest
filename = str(request.path) 

df = pd.read_csv('path/to/file'+filename+'.csv)

That returns an empty string.

How can I access the proper csv file? I need to get the slug from the Url and use it to open the proper csv file to render the proper graph.

urls.py

urlpatterns = [
    path('', views.home, name='home'), 
    url('^django_plotly_dash/', include('django_plotly_dash.urls')), 
    re_path(r'^(?P<slug>[\w-]+)/
```, views.coins, name='coins') ]

views.py

def home(request):
return render(request, ‘home/index.html’)
def coins(request, slug):
coin = Coins.objects.get(slug=slug)
return render(request, ‘home/coins.html’, {‘coin’:coin, ‘chart_twitter’: chart_twitter})

2

Your coins.html template is going to use a tag such as plotly_app to insert the Dash app. You can pass the slug as part of the initial_arguments.

There is an example here of its use.

3

I’m still confused. How do I reference the slug within the Dash app?

I don’t need to delcare a slug as an argument at the template tag. The slug should be delcared by the URL called. I need to retrieve the slug from the template or URL to the Dash app based on the URL call.

When coding my Dash app, how do I reference the slug?

4

Your template is going to have something in it like

{%plotly_app name="your-app-name" initial_arguments=some_dict %}

where your view creates some_dict as a python dictionary of dictionaries - the outer dict has a dash component id as key, and the inner dict the property on your component. So for example, if you are using a hidden div with id 'hidden-div-for-slug" and using the children node to store the slug, you would have something like

some_dict = {'hidden-div-for-slug': {'children': slug}}

in your view. Your dash app now has the slug, or whatever information you choose to propagate to it from the view, available to it in callback functions.

5

Boomshakalaka. Thank you.

1 Like