django-plotly-dash 0.0.4

Django use of plotly dash apps through template tags

django-plotly-dash

Expose plotly dash apps as django tags.

See the source for this project here: https://github.com/GibbsConsulting/django-plotly-dash

This README file provides a short guide to installing and using the package, and also outlines how to run the demonstration application.

More detailed information can be found in the online documentation at https://readthedocs.org/projects/django-plotly-dash

Installation

First, install the package. This will also install plotly and some dash packages if they are not already present.

pip install django_plotly_dash

Then, just add django_plotly_dash to INSTALLED_APPS in your Django settings.py file

INSTALLED_APPS = [
    ...
    'django_plotly_dash.apps.DjangoPlotlyDashConfig',
    ...
    ]

Demonstration

The source repository contains a demo application. To clone the repo and lauch the demo:

git clone https://github.com/GibbsConsulting/django-plotly-dash.git

cd django-plotly-dash

./make_env                # sets up a virtual environment for development
                          #   with direct use of the source code for the package

./prepare_demo            # prepares and launches the demo
                          #   using the Django debug server at http://localhost:8000

Usage

To use existing dash applications, first register them using the DelayedDash class. This replaces the dash.Dash class of plotly.py.

Taking a very simple example inspired by the excellent getting started documentation:

import dash
import dash_core_components as dcc
import dash_html_components as html

from django_plotly_dash import DelayedDash

app = DelayedDash('SimpleExample')

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)

a2 = DelayedDash("Ex2")
a2.layout = html.Div([
    dcc.RadioItems(id="dropdown-one",options=[{'label':i,'value':j} for i,j in [
    ("O2","Oxygen"),("N2","Nitrogen"),]
    ],value="Oxygen"),
    html.Div(id="output-one")
    ])

@a2.callback(
    dash.dependencies.Output('output-one','children'),
    [dash.dependencies.Input('dropdown-one','value')]
    )
def callback_c(*args,**kwargs):
    return "Args are %s and kwargs are %s" %("".join(*args),str(kwargs))

Note that the DelayedDash constructor requires a name to be specified. This name is then used to identify the dash app in templates:

{% load plotly_dash %}

{% plotly_item "SimpleExample" %}

The registration code needs to be in a location that will be imported into the Django process before any model or template tag attempts to use it. The example Django application in the demo subdirectory achieves this through an import in the main urls.py file; any views.py would also be sufficient.