Bokeh | Interactive Visualization Library | Use Graph with Django Template

In the previous chapter we learned about the Bokey library and how to plot Graph using Bokeh. It is recommended to check the previous note before reading this one.

Bokeh | Interactive Visualization Library | Graph Plotting

Integrating Bokeh Graphs with Django template

First install the required dependencies in Virtual Environment of your project.

pip install django-toolbelt bokeh numpy

We will skip the Django Configuration part here. We assume that you are aware of the basics of Django. So, lets start with writing our Views.

views.py

from django.shortcuts import render, render_to_response

from bokeh.plotting import figure, output_file, show 
from bokeh.embed import components

def index(request):
    x= [1,3,5,7,9,11,13]
    y= [1,2,3,4,5,6,7]
    title = 'y = f(x)'

    plot = figure(title= title , 
        x_axis_label= 'X-Axis', 
        y_axis_label= 'Y-Axis', 
        plot_width =400,
        plot_height =400)

    plot.line(x, y, legend= 'f(x)', line_width = 2)
    #Store components 
    script, div = components(plot)

    #Feed them to the Django template.
    return render_to_response( 'bokeh/index.html',
            {'script' : script , 'div' : div} )

Here you have to import components method from bokeh.plotting. This function returns a script that contains the data for your plot, together with an accompanying div tag that the plot view is loaded into.

The script tag will return code similar to the one in the following gist:

https://gist.github.com/askprateek/cf4b180e1f2074ca5e34b5b97d1ce80d

The div tag will return something like this:

<div class="bk-root">
    <div class="plotdiv" id="15635bff-fca0-4e67-b8d9-5d63cc8723f8"></div>
</div>

These two elements can be inserted or templated into your HTML text, and the script, when executed, will replace the div with the plot.

Using these components assumes that BokehJS has already been loaded, for instance either inline in the document text, or from CDN. To load BokehJS from CDN, add the following lines in your HTML text or template.

<link href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.0.min.css" rel="stylesheet" type="text/css">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.css" rel="stylesheet" type="text/css">
....
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.0.min.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.0.min.js"></script>

Bokey-widgets files are optional. Include them if you want to include the functions like PAN ZOOM, SAVE etc.

Now lets embed these variables in django template. Here is the basic template in HTML for embedding our plot.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bokeh Scatter Plots</title>
   <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.css" type="text/css" />
 </head>
 <body>
     {{ div | safe }}
</body>
    <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.9.0.min.js"></script>
    {{ script | safe }}
</html>

Use safe if you were not able to see the plot in your template. Now you know the basic of using Bokeh with django. You can improve the UI by using forms. Ask user to enter any polynomial equation and range. Then generate the plot using the values. Here is the repository of my implementation of bokeh.

Django Graph Plotter

If you have any doubt. Feel free to leave a comment.

Digital Artist Prateek | Visit My Website