Integrating Bokeh Visualizations in Django Application

Bokeh is an interactive visualization library that helps us to create a visual representation of data set and interact with it. You can create various types of visualizations such as bar charts, horizontal plots,time-series, etc. There are various methods to include Bokeh apps and widgets into web apps and pages.  

In this tutorial, we are going to create a basic bokeh graph and embed it into our Django web app. For that, we will be importing components from bokeh.embed which returns the individual components. The function bokeh.embed.components() returns a script that contains that data for your plot with a <div> tag in which the plot view is loaded. We will look in detail at the step-by-step procedure.

Step 1: Setting up a basic Django project

For this project, we are using PyCharm IDE. PyCharm is one of the most popular IDE used for the python Scripting language.

• Open PyCharm and create a new project and save it as BokehProject.
• Go to the terminal and install Django using the command:

pip install django

• In the same way, we will install bokeh in our project as:

pip install bokeh

Step 2: Create the Django project  

• Create a Django project using the following command:

django-admin startproject BokehDjango

• Change the project folder using the below command:

cd BokehDjango

• Run manage.py to initially migrate data changes to our project by using migrate as below

python manage.py migrate

• Create a superuser using the following command to create a superuser account

python manage.py createsuperuser  

• Add the name, email, and password.
• At this stage, the directory structure is as shown below:

• Now let us run the command below command to check if Django is installed successfully.

python manage.py runserver

• Navigate to the address http://127.0.0.1:8000/ and you will see something like this.

• Now we create a Django application using the following command

python manage.py startapp BokehApp

• The directory structure at this stage will be as shown below:

• Since we have created an app we need to add it to settings. Open settings.py and add the following in installed apps:

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'BokehApp',
]

• Update urls.py file and add URL patterns. Open urls.py from our project folder i.e.,BokehDjango, and add the include function in the import statement. Also, add the path to include the URLs of our new application as shown below:

• Now create a new file in our app folder i.e., BokehApp, and save it as urls.py.
• Open the file and add the path to route for your home page as below and also don’t forget to import path and views.

• Next, we create the view for our home page that will render our first Bokeh Graph. Open views.py and create a new method called home() and before that we import HttpResponse..HttpResponse is most frequently used as a return object from a Django view.
• As of now, we are simply displaying a welcome message as below:

• Let us run the server using python manage.py runserver and look at the result:

Great! So this was all about setting our Django website.

Step 3:Complete Bokeh Setup into our project:

• Go to your python shell and check the version of Bokeh as:

bokeh.__version__  

• As shown in the image below:

• Now let’s create a template folder in our BokehApp directory and save it as templates. Create a new file in the templates directory and save it as base.html.
• Add the following links of CSS in your base.html file in the head tag and replace the version of your bokeh at the place bokeh-x.y.z.min (underlined place x.y.z.)

• And the JavaScript links below the ending body tag i.e., after </body>  and similarly replace your bokeh version at x.y.z

• The base.html file looks like

• Let us now replace the view function home so that it renders our first graph. Add the below code which creates basic circle scatter marks on our plot:

• The components method returns a script that contains the data for your plot and provides a <div>tag to display the plot view. These two elements can be inserted into the HTML text and the <script> when executed will replace the div with the plot.
• The circle method is a glyph method which is a method of the figure object. Glyphs are the basic visual building blocks of Bokeh plots. This includes elements such as lines, rectangles, squares, wedges, or the circles of a scatter plot
• The plot variable enables us to create a plot that holds all the various objects such as glyphs, annotations, etc. of a visualization.

So let us refresh our page after saving all the files and the output will be as shown below.

To enhancing the look of the page we are adding bootstrap to our base.html file. We have added a few of the components and the final HTML will be as shown below:

 Output: