Integrate Dash Plotly to your existing Django and Docker project.

Developers are always looking around to integrate solutions in existing projects rather than creating a separate app or project for analytics and visualizations. Dash and Plotly provides a huge support to integrate graphs and create an interactive dashboard for your existing project.

Prerequisites

• Django
• Docker
• Plotly
• Redis
• Dash

#requirements.txt
Django==3.0.5
pandas
requests
django-plotly-dash==1.5.0
django-redis==4.10.0
dpd-components==0.1.0
redis==3.3.11
plotly==4.14.3
channels==2.3.0
channels-redis==2.4.0
daphne==2.3.0
dash==1.19.0
aioredis==1.3.0
asgiref==3.2.2
async-timeout==3.0.1
attrs==19.3.0
autobahn==19.10.1
Automat==0.7.0
cffi==1.13.0
dash-bootstrap-components==0.11.1

Setting up Docker and Docker-compose

• Dockerfile

#Dockerfile
FROM python:3.6
LABEL maintainer="Developer"
ENV PYTHONBUFFER 1
COPY ./requirements.txt /requirements.txt
RUN pip install -r /requirements.txt
RUN mkdir /app
WORKDIR /app
COPY ./app /app

• Docker-Compose file

Here we are using local host so, network_mode points to host value.

version: "3.3"
#if you want to create a new user add MYSQL_USER and MYSQL_PASSWORD for addding new user on to mysql container
services:
        app:
            network_mode: host #comment this if you are using mysql docker image. This specifies that container with run with local host mode without ip
            build:
                context: .
            ports:
                - '5000:5000'
            env_file:
                - .env  # include .env file in your root directory to add up database variables
            volumes:
                - ./app:/app
            command: sh -c "python manage.py runserver 0.0.0.0:5000"
            depends_on:
                - redis
       redis:
            restart: always
            image: redis:latest
            expose:
                 - "6379"

settings.py configuration

INSTALLED_APPS = [
    ...
    'apps.plotlydash',
    'django_plotly_dash.apps.DjangoPlotlyDashConfig',
    'channels',
    'channels_redis',
    ...
]
X_FRAME_OPTIONS = 'SAMEORIGIN'
WSGI_APPLICATION = 'core.wsgi.application'
ASGI_APPLICATION = 'core.routing.application'
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
              'hosts': [('127.0.0.1', 6379),],
       }
    } 
}
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django_plotly_dash.finders.DashAssetFinder',
    'django_plotly_dash.finders.DashComponentFinder',
    'django_plotly_dash.finders.DashAppDirectoryFinder',
]
PLOTLY_COMPONENTS = [
    'dash_core_components',
    'dash_html_components',
    'dash_renderer',
    'dpd_components'
]

Creating app file

#simpleexample.py
import dash_core_components as dcc
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([
    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',
     ),
])
@app.callback(
     Output('slider-graph', 'figure'),
     [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}

Create routing.py file

#routing.py
from django_plotly_dash.routing import application

Create urls.py or add the below code in urls.py file of your app.

#urls.py
from .path import simpleexample or import simpleexample #set it according to your relative path.

Create index.html to view your app

#index.html
<div class="{% plotly_class name='SimpleExample' %} col-md-12 card shadow mb-4">
{% plotly_app name='SimpleExample' ratio=0.45 %}
</div>

Run command

$docker-compose up -d --build #This will run 2 containers and install dependencies
$docker exec -it <container-id> /bin/bash #this will let you execute commands in container
$python manage.py migrate #this command will add all the tables into database
$python manage.py collectstatic --no-input #this will add all the static files into static folder