HTML Template
To create an HTML page, we will use the most popular Bootstrap framework. It has pre-defined CSS and JS classes which will help us to create a good-looking form with minimal code. For our purpose, we are using Bootstrap and CSS along with Bokeh JS. Bokeh JS contains all the required JavaScript functions to help the graphs with the required functionalities like loading data, zooming in or out, saving the graphs, etc. Please note that anything written within double curly braces ({{…}}) is interpreted as python code within the HTML template.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin = "anonymous" > <!-- <link href="https://www.w3wiki.nethttp://cdn.bokeh.org/bokeh/release/bokeh-3.0.1.min.css" rel="stylesheet" type="text/css"> --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/bokeh/3.0.1/bokeh.min.js" integrity = "sha512-p7EUyPmeDeOwHiu7fIZNboAcQLxei3sWtXoHoShWWiPNUSRng/Xs5JPcaFPRa4dKy9IuHjyIQuLE4caGCwuewA==" crossorigin = "anonymous" referrerpolicy = "no-referrer" ></ script > < title >Bokeh Charts</ title > </ head > < body > < div class = "container" > < h1 class = "text-center py-4" >Responsive Chart with Bokeh, Flask and Python</ h1 > < div class = "row mb-5" > < div class = "col-md-6" > < h4 class = "text-center" >Scatter Plot</ h4 > {{ div[0] | safe }} {{ script[0] | safe }} </ div > < div class = "col-md-6" > < h4 class = "text-center" >Bar Chart</ h4 > {{ div[1] | safe }} {{ script[1] | safe }} </ div > </ div > < div class = "row" > < div class = "col-md-12" > < h4 class = "text-center" >Line Chart</ h4 > {{ div[2] | safe }} {{ script[2] | safe }} </ div > </ div > </ div > </ body > </ html > |
Responsive Chart with Bokeh, Flask and Python
In this post, we will use the Flask framework to create our web application in Python. The Bokeh library will be used to create interactive graphs and we will visualize this graph through a simple frontend HTML page. For this, we will first write the endpoints in Flask which will help us to create Bokeh charts, and then we will create HTML templates that will utilize these Bokeh charts to display them to the user.
Flask is a web framework that offers libraries for creating simple web applications in Python. It is built using the Jinja2 template engine and the WSGI tools. Flask is considered a micro-framework. Web server gateway interface, sometimes known as WSGI, is a standard for creating web applications in Python. It is regarded as the specification for the common interface between the web application and server. Jinja2 is a web template engine that renders dynamic web pages by fusing a template with a specific data source. You can install Flask using the below command:
pip install flask
For building interactive visualizations for current web browsers, the Python library Bokeh is a good choice. It enables you to create stunning visualizations, from straightforward plots to interactive dashboards with streaming datasets. Without writing any JavaScript yourself, you may build visualizations that are powered by JavaScript using Bokeh. To install Bokeh use the below command:
pip install bokeh
Steps to Follow:
- Create a python file ‘main.py‘ that will contain the Flask App.
- Create a directory named ‘templates‘ and add an HTML file ‘charts.html‘.
- Run the Flask App and view the output in a browser.
- This is the file structure we will follow: