Integrating PlotLy into Django

Notes

Updated to use Django 3.0

Intructions

Very simple introduction of using PlotLy in a Django webapp.

Create your plot using the Plotly Figure with data and layout :

fig = go.Figure(data=data, layout=layout)

Import the function from plotly.offline import plot which creates a <div>(...)</div> to be rendered in the template:

plot_div = plot(fig, output_type='div', include_plotlyjs=False)

In the view append the div above to the context_data:

context['plot'] = plot_div

Then in the respective template:

Add to the HTML head:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Somewhere in the HTML body, call the context variable and render it as safe:

<div class="col-md-12">{{plot|safe}}</div>

Note that I used include_plotlyjs=False in the plotly.offline.plot, and in the top of my template, I explcity include the PlotLy JavaScript. In the case you want to display several plots in same webapp, the browser should be smart enough to cache the plotly-latest.min.js thus speeding up the the graphic display process.

TLTR;

Tests using Plot.ly inside Django.

Testing

1D
2D
3D surface plot
1D generated from Ajax (to test plotly speed)
1D from CSV files
Live 2D Plot
3D scatter plot to test PlotLy speed with multiple 3D points

Installation

Requirements are in the requirements.txt file.

Use virtualenv:

virtualenv -p python3 venv
source venv/bin/activate
pip install -U -r requirements.txt

Run it:

cd site1/
./manage.py makemigrations
./manage.py migrate
./manage.py runserver 0.0.0.0:8000

Go to: http://127.0.0.1:8000

Code:

The main code is in:

site1/app1

Views:

site1/app1/views.py

Code for plots is here:

site1/app1/plots.py