Running the Flask App

We can run the flask application (assuming the filename to be main.py) using the python main.py command in the terminal.

$ python main.py 
 * Serving Flask app 'main'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

Output:

Then go to the URL http://127.0.0.1:5000 and you should be able to see the HTML template and the three Bokeh charts as shown below.

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:

1. Create a python file ‘main.py‘ that will contain the Flask App.
2. Create a directory named ‘templates‘ and add an HTML file ‘charts.html‘.
3. Run the Flask App and view the output in a browser.
4. This is the file structure we will follow: