Author avatar

Gaurav Singhal

Outputs in Pygal

Gaurav Singhal

  • Feb 6, 2020
  • 10 Min read
  • 138 Views
  • Feb 6, 2020
  • 10 Min read
  • 138 Views
Data
Pygal

Introduction

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.

Types of Output

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:

  • Output as strings
    • Output in bytes
    • Output in Unicode
  • Output in file
  • Output as png
  • Output as etree
  • Output as base 64 data URI
  • Output in browser
  • Output in PyQuery
  • Output In Flask app

Let's discuss each of these in detail.

Output as Strings

Output in Bytes

This output format will provide us with vectorial output in SVG format.

1
2
3
4
5
6
7
8
9
10
# Importing pygal
import pygal
# creating line chart object
line_chart = pygal.Line()
line_chart.title = 'A vs B'
line_chart.x_labels = map(str, range(0, 20))
line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
line_chart.add('B',  [9.2, 19.4, 15.3,  8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
# this will render SVG as bytes
line_chart.render()
python

Output in Unicode

This output format will also provide us with vectorial output of SVG in Unicode.

1
2
3
4
5
6
7
8
9
10
# Importing pygal
import pygal
# creating line chart object
line_chart = pygal.Line()
line_chart.title = 'A vs B'
line_chart.x_labels = map(str, range(0, 20))
line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
line_chart.add('B',  [9.2, 19.4, 15.3,  8.9,None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
# this will render ouput as unicode
line_chart.render(is_unicode=True)
python

Output in file

In this output format, your file will be saved in your current directory if you do not specify the location.

1
2
3
4
5
6
7
8
9
10
# Importing pygal
import pygal
# creating line chart object
line_chart = pygal.Line()
line_chart.title = 'A vs B'
line_chart.x_labels = map(str, range(0, 20))
line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
line_chart.add('B',  [9.2, 19.4, 15.3,  8.9, None, 9, 10.4,  10, 5.8, 6.7, 6.8, 7.5])
# this will render output file in current directory
line_chart.render_to_file('line_chart.svg')
python

Output as Png

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:

    1
    pip install lxml
    terminal
  • conda Install: To install using conda, open the terminal and run the following command:

    1
    conda install -c anaconda lxml 
    terminal

cairosvg

  • pip install: To install using pip, open the terminal and run the following command:

    1
    pip install cairosvg
    terminal
  • conda Install: To install using conda, open the terminal and run the following command:

    1
    conda install -c conda-forge/label/cf201901 cairosvg
    terminal

cssselect

  • pip install: To install using pip, open the terminal and run the following command:

    1
    pip install cssselect
    terminal
  • conda Install: To install using conda, open the terminal and run the following command:

    1
    conda install -c anaconda cssselect 
    terminal

tinycss

  • pip install: To install using pip, open the terminal and run the following command:

    1
    pip install tinycss
    terminal
  • conda Install: To install using conda, open the terminal and run the following command:

    1
    conda install -c conda-forge/label/cf201901 tinycss
    terminal
1
2
3
4
5
6
7
8
9
10
11
# Importing pygal
import pygal
# creating line chart object
line_chart = pygal.Line()
line_chart.title = 'A vs B vs C'
line_chart.x_labels = map(str, range(0, 20))
line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
line_chart.add('B',  [9.2, 19.4, 15.3,  8.9, None, 9,  10.4,  10, 5.8, 6.7, 6.8, 7.5])
line_chart.add('C',  [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12, 5.7, 4.8, 6.2, 66, 36])
# this will render output file in current directory
line_chart.render_to_png('line_chart.png')
python

Note: There will be no animation in rendered png.

Output as Etree

This output format will return the SVG root etree node.

1
2
3
4
5
6
7
8
9
10
# Importing pygal library
import pygal
# creating line chart object
line_chart = pygal.Line()
line_chart.title = 'A vs B'
line_chart.x_labels = map(str, range(0, 20))
line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
line_chart.add('B',  [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
# this will render output
line_chart.render_tree()
python

Output as Base 64 Data URI

1
2
3
4
5
6
7
8
9
import pygal
# creating line chart object
line_chart = pygal.Line()
line_chart.title = 'A vs B'
line_chart.x_labels = map(str, range(0, 20))
line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
line_chart.add('B',  [9.2, 19.4, 15.3, 8.9, None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
# this will render output
line_chart.render_data_uri() 
python

Output in Browser

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
2
3
4
5
6
7
8
9
10
11
12
# Importing pygal library
import pygal
# creating object
xy_chart = pygal.XY(stroke=False)
# adding title
xy_chart.title = 'Correlation'
# adding random data
xy_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)])
xy_chart.add('B', [(.1, .15), (.14, .3), (.5, .3), (.3, .4), (.21, .21), (.5, .3), (.6, .8), (.7, .8)])
xy_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)])
# render file in browser
xy_chart.render_in_browser()
python

Output in PyQuery

For PyQuery, you first have to install the pyquery library on your system.

  • pip install: To install using pip, open the terminal and run the following command:
1
pip install pyquery
terminal
  • conda Install: To install using conda, open the terminal and run the following command:
1
conda install -c anaconda pyquery
terminal

After installing pyquery, you can get the pyquery object to wrap the chart by calling render_pyquery.

1
2
3
4
5
6
7
8
9
10
# Importing the pygal
import pygal
# creating line chart object
line_chart = pygal.Line()
line_chart.title = 'A vs B'
line_chart.x_labels = map(str, range(0, 20))
line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
line_chart.add('B',  [9.2, 19.4, 15.3,  8.9,None, 9, 10.4, 10, 5.8, 6.7, 6.8, 7.5])
# this will render output
line_chart.render_pyquery()
python

Output in Flask

For output in a Flask app, you should have installed the Flask and virtualenv libraries on your system .

  • Flask installation

    • pip install: To install using pip, open the terminal and run the following command:
    1
    pip install Flask
    terminal
    • conda Install: To install using conda, open the terminal and run the following command:
    1
    conda install -c anaconda flask 
    terminal
  • virtualenv library installation

    • pip install: To install using pip, open the terminal and run the following command:
    1
    pip install virtualenv
    terminal
    • conda Install: To install using conda, open the terminal and run the following command:
    1
    conda install -c anaconda virtualenv 
    terminal

In the given code, we are using pygal in flask app.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# Importing flask module in the project is mandatory 
# An object of Flask class is our WSGI application.
# We also have to import pygal library
import pygal
from flask import Flask 
  
# current module (__name__) as argument. 
app = Flask(__name__) 
    
# the associated function. 
@app.route('/')
def line_route(): 
    line_chart = pygal.Line()
    line_chart = pygal.Line()
    line_chart.title = 'A vs B vs C '
    line_chart.x_labels = map(str, range(0, 20))
    line_chart.add('A', [None, None, 0, 1, 1, 2, 3, 5, None, 13, 21, 34, 55])
    line_chart.add('B',  [91.2, 19.4, 5.3, None, None, 4, 0.4, 15, 7.8, 7, 2.8])
    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])
    # this will render output in flask app
    return line_chart.render_response()
  
# main driver function 
if __name__ == '__main__': 
    # run() method of Flask class runs the application  
    # on the local development server. 
    app.run()
python

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.

Conclusion

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.

1