Integrate Dash Plotly to your existing Django and Docker project.
By: Poojan Shah
Tags: Django, Dashboard, Pandas, Dash, Plotly

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