Integrating Bokeh visualisations into Django Projects.

Despite being a python developer for years only recently have I needed to interact with Django. While exploring Django, I decided I wanted to learn a little more about Bokeh the visualisation library. I tried to integrate it into my django project and found it challenging to find a complete tutorial. I thought I would create a post outlining the steps to integrate Bokeh into Django in case anyone finds it useful. Pre-Requisties: — I used python 3 Python Pip I developed the project on a Mac using . This may mean if you are using another OS, we may have slightly different commands. Sublime Text 3 Setting Up Django Project Before we can work with bokeh, we need to setup our django project. If you are already familiar with setting up django projects, feel free to skip ahead. Let’s open the command line/terminal. Typically it will already be pointing to your home directory when you open it. Navigate to your preferred directory area through use of the command. I am going to store the project in a directory called codeprojects. cd I then make a new directory for the project using the command. mkdir mkdir bokeh_project Then navigate into the directory you created. cd bokeh_project We then need to make a virtual environment for this project. A virtual environment allows for python projects to have an isolated environment in which each project can store there own dependencies regardless of other project dependencies. python3 -m venv myvenv Activate your virtual environment source myvenv/bin/activate Now we have our virtual environment, we can install django within it using the pip command. python -m pip install django Create the Django project directories django-admin startproject bokeh_example Open the project in your IDE. You will see the project structure has been created. Now in the terminal navigate into bokeh_example using cd cd bokeh_example Create the sqlite3 database using the following command in the terminal. python manage.py migrate Now check the website has been created by running the server command python manage.py runserver Navigate to the browser and enter this address http://127.0.0.1:8000 You should see a page like the below confirming you created the website correctly! To keep everything tidy, we want to create a new area inside the project that will store all the site files. Run the following command python manage.py startapp mysite This will create a new directory structure. Directory Structure The next step is to create the base.html file which will store the web page and bokeh visualisations. Add a folder called templates inside the mysite folder. Add another directory within it called pages and then create a file called base.html inside it. This base.html file will contain our core html code. We can put some basic html inside it for now Hello Medium! We then need to link the html file to a view. Open mysite/views.py and create a new method called homepage. def homepage(request):return render(request, ‘pages/base.html’, {}) This method will redirect the view to the base.html file based on a request. For this to work we need to change You must add a line to include the mysite.urls bokeh_project/urls.py. urlpatterns = [path(‘admin/’, admin.site.urls),path(‘’, include(‘mysite.urls’)),] We now need to create a url connection mysite.urls file. This will point a url to our view which results in the base.html file. from django.urls import pathfrom . import views urlpatterns = [path(‘’, views.homepage, name=’homepage’)] The final step is to add ‘mysite’ to INSTALLED_APPS in the settings.py file. Settings.py Now we have our base.html linked up. We can run our server again and we can see our html page displayed saying Hello Medium! Homepage Integrating Bokeh Into Project Now we have our django project, we can now integrate Bokeh into the html page. First we must install Bokeh using pip in our virtual env. python -m pip install bokeh Now it’s ready to go. Check the version of bokeh installed by firstly entering the below into the command line python This will open the python interactive environment. We can then enter the following commands to find out the bokeh version import bokeh bokeh.__version___ Once you have the version, you can quit the interactive environment by typing quit(). For reference I have version 1.0.4. This is important for when you integrate bokeh into the homepage. Let’s go back to the base.html file. We need to include bokeh dependencies in the header of the file. Make sure the dependencies reference the version of bokeh you own. http://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.css http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.css {{ script | safe }} http://cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.js http://cdn.pydata.org/bokeh/release/bokeh-widgets-1.0.4.min.js We also need to the html file to contain a div where the visualisation will be displayed base.html We then need to modify the views.py file to create a graph. We will first implement a basic line graph. Edit your views.py to include the following information views.py Once you have made these changes, run the server and you should see a graph like below: Bokeh Line Graph We can take it to the next level by implementing a fancier graph from . I chose to implement the nested bar graph and modified the homepage method in views.py. Bokeh’s user guide views.py This results in the following graph. base.html view CSS Makeover The webpage looks quite bland. We can make the webpage look more realistic by leveraging and css. Firstly let’s include bootstrap in our base.html file. bootstrap Copy and paste the stylesheet and javascript links for bootstrap into the base.html section. https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css https://code.jquery.com/jquery-3.3.1.slim.min.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js Let’s firstly add a navigation bar as a header for the webpage. base.html Once integrated into the file the result on the webpage should look like the following: base.html Let’s now focus on filling out the content of the website. I am going to create a style that makes graph look as though it is part of a blog post. We will use containers. The container will contain one small column which will be the side bar and one larger column which be the blog feed. Before adding containers in the html page we need to create our css document. Add a new folder called static, the same way we did for templates. Within static create another folder called css and a new file in called mysite.css Folder directory Now we have our css file, let’s go back to our base.html and include the file in the header. You must also make reference to loading static files at the beginning of the head tag. {% load static %} We also must make some changes in settings.py file. We must point the static directory to the correct area so the css file gets picked up. settings.py Let’s go back to the base.html and create the containers which will store the site content. Under the navigation bar enter: base.html — content containers Firstly let’s populate the side bar. We will add a vertical navigation bar and a side widget. base.html — sidebar We can then add some styling within the css file. mysite.css The webpage should now look like this: 127.0.0.1:8000 Now let’s focus on creating the blog content. We must add information like a header and some Lorem Ipsum content for the post. We do so below: base.html We can improve the blog post by adding additional styles and importing . From google fonts I selected Oswald and Open Sans for use in the blog post. google fonts Firstly you must include the link to the fonts in the head. https://fonts.googleapis.com/css?family=Open+Sans|Oswald Now we can add the font families and additional styles in the css file. mysite.css Once these changes are made the site should look like the following: base.html You can now take it from here to experiment and build out the site with real content, different styles or more Bokeh visualisations!