Introduction to Jinja Template and Google Chart

Introduction to Jinja Template


In this post you will learn

Why we need a template system

While string formatting in Python is pretty straight forward e.g. print(f"Hello {name}"), it could be quite troublesome when we are writing some long messages with many variables, or sometimes we want to use Python function like if or for loop in the paragraph.

A template system in Python, or any programming language, is a tool that allows you to separate the presentation logic (Template) from business logic (Code) in your applications. It provides a way to define and generate content, such as HTML, XML, or plain text, by combining static template files with dynamic data. In this post, we will demostrate how to generate some simple HTML report in the following section.

Basic Syntax of Jinja Template

Render your first jinja template

It looks very similar to string formatting at the first glance. We will first define a template t = Template(...) with variable {{ var_name }} , and then render it with the python variables t.render(var_name="sth").

from jinja2 import Template

t = Template('Hello, {{ name }}!')
print(t.render(name='John Doe'))
# Output:
"Hello, John Doe!"

Basic syntax

The syntax is almost the same as python with a little bit of syntactic sugar, we can use some conditional block via {% %}, and reference to the variable with {{ }}. And another useful thing to note is, we can add a dash - to the operator, so Jinja knows we dont want an additional line break, e.g. {%- -%} (No line break) vs {% %} (With line break).

Simple Reporting Templates with Google Chart

After the long syntax introduction, we will jump straight to the use cases.

Sometimes when the buisness users are asking for some advance/deep-dive adhoc reports, there are not much report choices for a quick study, you can use

Each of the option has it’s pros and cons, a static file (like HTML) provides you an other options, if other commercial tools or hosting a python server is not available.

Google Chart Library

Google chart tools are powerful, simple to use, and free. And usually these kinds of Javascript chart library provides a richer (and customizable) analytic gallery for you to use, which sometimes it is quite difficult to do it in excel, like Sankey Diagram, Interval Plots and Tree Map.

Here I will use a simple bar chart as an example. And you will see how we can create a simple HTML file with bar chart (or other graphs) easily if you know how to use Jinja Template.

This is the outline of the steps to create a standalone HTML file with Google Chart

Final Thoughts

There is a lot of other Javascript chart packages (e.g. Vega Chart, HighCharts, etc..), you can easily create some pretty charts with the techniques here with Jinja Template. As it is in HTML format, you can easily include some Insight session as well for some quick comments for your report.

Remarks: Just be careful for not leaking any sensitive data, as a static report is difficult to do access control or audit logging.

Happy Coding!

Recommended Readings

18 Useful Pandas Functions for Data Science

Here is my list of useful pandas functions for your day to day tasks.

Getting HKEX data with Quandl in Python

Getting HKEX data with Quandl in Python. Historical daily HKEX data using API. Stock exchange in Yahoo Finance Hong Kong.