Flask main.py
Here, we have created three Bokeh charts (scatter plot, bar chart, and line chart). We have used a single endpoint which is the root endpoint for our Flask application. For each chart, we get the HTML components to embed the charts in our template using the components() function. It returns the script and an HTML div tag assuming that the required JS files from Bokeh are already loaded in our template through the local URL or Bokeh’s CDN. The charts will be responsive due to the attribute ‘sizing_mode=”stretch_width”‘ used in each of the figures.
Python3
# Importing required functions import random from flask import Flask, render_template from bokeh.embed import components from bokeh.plotting import figure # Flask constructor app = Flask(__name__) # Root endpoint @app .route( '/' ) def homepage(): # First Chart - Scatter Plot p1 = figure(height = 350 , sizing_mode = "stretch_width" ) p1.circle( [i for i in range ( 10 )], [random.randint( 1 , 50 ) for j in range ( 10 )], size = 20 , color = "navy" , alpha = 0.5 ) # Second Chart - Line Plot language = [ 'Python' , 'JavaScript' , 'C++' , 'C#' , 'Java' , 'Golang' ] popularity = [ 85 , 91 , 63 , 58 , 80 , 77 ] p2 = figure( x_range = language, height = 350 , title = "Popularity" , ) p2.vbar(x = language, top = popularity, width = 0.5 ) p2.xgrid.grid_line_color = None p2.y_range.start = 0 # Third Chart - Line Plot p3 = figure(height = 350 , sizing_mode = "stretch_width" ) p3.line( [i for i in range ( 10 )], [random.randint( 1 , 50 ) for j in range ( 10 )], line_width = 2 , color = "olive" , alpha = 0.5 ) script1, div1 = components(p1) script2, div2 = components(p2) script3, div3 = components(p3) # Return all the charts to the HTML template return render_template( template_name_or_list = 'charts.html' , script = [script1, script2, script3], div = [div1, div2, div3], ) # Main Driver Function if __name__ = = '__main__' : # Run the application on the local development server app.run() |
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: