Pygal is a very versatile library. It provides dynamic animated graphs or plots in SVG (Scalar Vector Graphics). It also provides multiple output formats that can come handy in different situations. In this guide, we will learn through examples of how to get each type of output. We will also look at how to embed pygal in a Flask app.
If you are new to pygal, please check out my previous guide on Charts in Pygal.
I assume you have a basic knowledge of Python, you have installed Python 3 and the pygal packaged library on your system, and you have a web browser. In this guide, we will learn how to generate output in the following formats:
Let's discuss each of these in detail.
This output format will provide us with vectorial output in SVG format.
1# Importing pygal
2import pygal
3# creating line chart object
4line_chart = pygal.Line()
5line_chart.title = 'A vs B'
6line_chart.x_labels = map(str, range(0, 20))
7line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
8line_chart.add('B', [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
9# this will render SVG as bytes
10line_chart.render()
This output format will also provide us with vectorial output of SVG in Unicode.
1# Importing pygal
2import pygal
3# creating line chart object
4line_chart = pygal.Line()
5line_chart.title = 'A vs B'
6line_chart.x_labels = map(str, range(0, 20))
7line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
8line_chart.add('B', [9.2, 19.4, 15.3, 8.9,None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
9# this will render ouput as unicode
10line_chart.render(is_unicode=True)
In this output format, your file will be saved in your current directory if you do not specify the location.
1# Importing pygal
2import pygal
3# creating line chart object
4line_chart = pygal.Line()
5line_chart.title = 'A vs B'
6line_chart.x_labels = map(str, range(0, 20))
7line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
8line_chart.add('B', [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
9# this will render output file in current directory
10line_chart.render_to_file('line_chart.svg')
Before starting, we have to install the dependencies if we want to output in png.
lxml
pip install: To install using pip
, open the terminal and run the following command:
1pip install lxml
conda Install: To install using conda
, open the terminal and run the following command:
1conda install -c anaconda lxml
cairosvg
pip install: To install using pip
, open the terminal and run the following command:
1pip install cairosvg
conda Install: To install using conda
, open the terminal and run the following command:
1conda install -c conda-forge/label/cf201901 cairosvg
cssselect
pip install: To install using pip
, open the terminal and run the following command:
1pip install cssselect
conda Install: To install using conda
, open the terminal and run the following command:
1conda install -c anaconda cssselect
tinycss
pip install: To install using pip
, open the terminal and run the following command:
1pip install tinycss
conda Install: To install using conda
, open the terminal and run the following command:
1conda install -c conda-forge/label/cf201901 tinycss
1# Importing pygal
2import pygal
3# creating line chart object
4line_chart = pygal.Line()
5line_chart.title = 'A vs B vs C'
6line_chart.x_labels = map(str, range(0, 20))
7line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
8line_chart.add('B', [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
9line_chart.add('C', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12, 5.7, 4.8, 6.2, 66, 36])
10# this will render output file in current directory
11line_chart.render_to_png('line_chart.png')
Note: There will be no animation in rendered png.
This output format will return the SVG root etree node.
1# Importing pygal library
2import pygal
3# creating line chart object
4line_chart = pygal.Line()
5line_chart.title = 'A vs B'
6line_chart.x_labels = map(str, range(0, 20))
7line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
8line_chart.add('B', [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
9# this will render output
10line_chart.render_tree()
1import pygal
2# creating line chart object
3line_chart = pygal.Line()
4line_chart.title = 'A vs B'
5line_chart.x_labels = map(str, range(0, 20))
6line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
7line_chart.add('B', [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
8# this will render output
9line_chart.render_data_uri()
Pygal can also render SVG in the browser directly using the render_in_browser
command. This becomes beneficial if you are using Jupyter notebook.
1# Importing pygal library
2import pygal
3# creating object
4xy_chart = pygal.XY(stroke=False)
5# adding title
6xy_chart.title = 'Correlation'
7# adding random data
8xy_chart.add('A', [(0, 0), (.1, .25), (.3, .1), (.5, .1), (.8, .6), (1, 1.08), (1.3, 1.1), (2, 3.23), (2.43, 2)])
9xy_chart.add('B', [(.1, .15), (.14, .3), (.5, .3), (.3, .4), (.21, .21), (.5, .3), (.6, .8), (.7, .8)])
10xy_chart.add('C', [(.5, .01), (.13, .02), (1.5, 1.7), (1.02, 1.6), (1.8, 1.63), (1.5, 1.82), (1.7, 1.23), (2.1, 2.23), (2.3, 1.98)])
11# render file in browser
12xy_chart.render_in_browser()
For PyQuery, you first have to install the pyquery library on your system.
pip
, open the terminal and run the following command:1pip install pyquery
conda
, open the terminal and run the following command:1conda install -c anaconda pyquery
After installing pyquery, you can get the pyquery object to wrap the chart by calling render_pyquery
.
1# Importing the pygal
2import pygal
3# creating line chart object
4line_chart = pygal.Line()
5line_chart.title = 'A vs B'
6line_chart.x_labels = map(str, range(0, 20))
7line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
8line_chart.add('B', [9.2, 19.4, 15.3, 8.9,None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
9# this will render output
10line_chart.render_pyquery()
For output in a Flask app, you should have installed the Flask and virtualenv libraries on your system .
Flask installation
pip
, open the terminal and run the following command:1pip install Flask
conda
, open the terminal and run the following command:1conda install -c anaconda flask
virtualenv library installation
pip
, open the terminal and run the following command:1pip install virtualenv
conda
, open the terminal and run the following command:1conda install -c anaconda virtualenv
In the given code, we are using pygal
in flask app
.
1# Importing flask module in the project is mandatory
2# An object of Flask class is our WSGI application.
3# We also have to import pygal library
4import pygal
5from flask import Flask
6
7# current module (__name__) as argument.
8app = Flask(__name__)
9
10# the associated function.
11@app.route('/')
12def line_route():
13 line_chart = pygal.Line()
14 line_chart = pygal.Line()
15 line_chart.title = 'A vs B vs C '
16 line_chart.x_labels = map(str, range(0, 20))
17 line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
18 line_chart.add('B', [91.2, 19.4, 5.3, None, None, 4, 0.4, 15, 7.8, 7, 2.8])
19 line_chart.add('C', [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
20 # this will render output in flask app
21 return line_chart.render_response()
22
23# main driver function
24if __name__ == '__main__':
25 # run() method of Flask class runs the application
26 # on the local development server.
27 app.run()
Open the URL circled above and you will get your rendered SVG in flask app.
Note: For Django, you can use the command render_django_response
in your code.
This guide was focused on the different output formats provided by pygal. In this guide, we looked at every kind of output format with examples. We also saw how to embed pygal in a Flask app. I hope that after reading this guide, you understand the different output formats and you're able to use any output format depending on your situation. If you have any questions, contact me at CodeAlphabet.