How to Add Graphs to Flask apps

Flask, being a lightweight web framework, does not have built-in support for graphing. However, it can easily integrate with powerful visualization libraries to generate dynamic and interactive charts because graphs and visualizations are an essential part of any web application that deals with data representation.

There are multiple ways to add graphs to Flask applications, but the two most common approaches that we are going to discuss in this article are:

1. Using Chart.js – A JavaScript-based charting library that allows embedding graphs in HTML pages while passing data from Flask.
2. Using Bokeh – A Python-based visualization library that enables interactive graphs without needing JavaScript coding.

Installation and Setup

To create a basic flask app, refer to- Create Flask App

After creating and activating a virtual environment install Flask and other libraries required in this project using this command-

pip install bokeh

Let's discuss both ways of adding graphs one by one.

Using Chart.js

Chart.js is a popular JavaScript library for creating interactive charts. It works well with Flask by passing data from the backend to the frontend using Jinja2 templating. This approach is simple, lightweight, and ideal for real-time data visualization in Flask applications.

Chart.js Integration in HTML

Create a chartjs-example.html file in the templates folder and in that file we include chart.js CDN link in the HTML template and define a <canvas> element to render the graph.

chartjs-example.html code:

Code Explanation:

• Includes Chart.js using the <script> tag.
• Retrieves labels and data from Flask using {{ labels | tojson }}.
• Configures a line chart with a dataset representing sales.
• Renders the chart on the <canvas> element.

Flask Backend for Chart.js

The Flask app sends data to the HTML template (chartjs-example.html), which Chart.js then renders into a graph.

app.py (for chart.js)

Run the above Flask code using the following command in terminal and visit the development URL.

python app.py

Output:

Using Bokeh

The Bokeh library has a components() method which returns HTML components to embed a Bokeh plot. Here is a stepwise working-

• Bokeh's components() method helps embed Bokeh plots into HTML by generating the necessary script and div elements.
• The plot data is directly stored in the returned HTML, ensuring smooth integration without additional requests.
• The returned components assume that BokehJS resources are already loaded in the HTML document.
• To ensure proper rendering, the HTML template must include BokehJS script tags, which can be loaded in two ways:
  • From a local URL (if BokehJS is downloaded and hosted locally).
  • From Bokeh’s CDN, which is the easiest approach. Simply add this script tag -

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.0.1.min.js"></script>

• Once the components are generated and the script is included, the Bokeh plot can be displayed within a Flask app.

Syntax

components(models: Model | Sequence[Model] | dict[str, Model], wrap_script: bool = True, wrap_plot_info: bool = True, theme: ThemeLike = None)

Parameters:

• models (Model|list|dict|tuple: A single Model, a list/tuple of Models, or a dictionary of keys and Models.
• wrap_script (boolean, optional): If True, the returned javascript is wrapped in a script tag. (default: True)
• wrap_plot_info (boolean, optional) : If True, returns <div> strings. Otherwise, return RenderRoot objects that can be used to build your own divs. (default: True)
• theme: constitute the full set of roots of a document, applies the theme of that document to the components. Otherwise applies the default theme.

Let's create an app to demonstrate adding graph to flask app using bokeh.

HTML File

Unlike Chart.js, Bokeh requires a JavaScript script to be included for rendering graphs. We use the following script in the HTML file to load Bokeh’s JavaScript resources:

index.html

Explanation:

• <script src="https://cdn.bokeh.org/bokeh/release/bokeh-3.7.0.min.js"></script> - Loads the Bokeh JavaScript library.
• {{ div | safe }} - Inserts the div component containing the Bokeh chart.
• {{ script | safe }} - Embeds the necessary JavaScript to render the Bokeh visualization.

Note: Ensure the BokehJS script version matches your installed Bokeh version. Check your version using "python show bokeh" command and update the script tag accordingly: <script src="https://cdn.bokeh.org/bokeh/release/bokeh-X.X.X.min.js"></script>. Replace X.X.X with your installed version to avoid rendering issues.

app.py (for bokeh)

Now, let’s write the Flask backend that generates a Bokeh scatter plot and passes it to the HTML template.

Explanation:

• figure() - Creates a responsive figure with adjustable width.
• p.circle() - Generates a scatter plot with random Y-axis values.
• components(p) - Extracts JavaScript (script) and HTML (div) components for embedding.
• render_template("bokeh-example.html", script=script, div=div) - Passes the components to the HTML file for rendering.

Run the above Flask code using the following command in terminal and visit the development URL.

python app.py

Output: