Linux

Put vector graphics in your Web pages with Pygal

Pygal is an open source program that allows you to create vector graphics for your website. Here is how to install it.

The most common formats for digital images, like Jpeg or PNG, represent them as matrices of pixels, all of the same size, orderly placed in rows and columns.

Besides this approach, called raster graphics, there is another, deeply different way to describe images, called vector graphics. Their most evident, but not unique, great feature is that they always have the same resolution and crispness, no matter how much you zoom! The reason is shown in Figure A: a vector graphic is something of which you can "view the source" in a browser, just as you do with textual Web pages. Dots are replaced by instructions like "draw a red line from one corner of the picture to the next". That's why there is no degradation when you zoom.

Figure A

Moving your mouse over the legend and lines of Figure B will show you another feature of vector graphics: you can embed some limited interactivity and metadata in a picture. Let's see how you may create similar charts, automatically!

Figure B

This is a screenshot of the SVG file. Click the thumbnail or this link to view in browser.

Let's play with Pygal!

The main open format for vector graphics is SVG. You can draw SVG charts from a Python script with the Open Source library called PyGal. Figure B comes from this very simple Python script:

  #! /usr/bin/python
  import pygal
  line_chart = pygal.StackedLine(fill=True)
  line_chart.title = 'Browser usage evolution (in %)'
  line_chart.x_labels = map(str, range(2002, 2013))
  line_chart.add('Firefox', [None, None, 0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
  line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
  line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
  line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
  line_chart.render_to_file('pygal_2_example.svg')

The first two lines mean that this is a Python script and, respectively, that it must load the Pygal library. The last line saves the chart to a file called pygal_2_example.svg. The rest of the script, which is fairly self-explanatory, comes straight from the corresponding Pygal example.

The Pygal chart types gallery and its online demo give a good idea of how many charts you can create with Pygal. Figure C shows some of the options for interpolation and different styles. You can also customize Pygal charts in lots of ways.

Figure C

However, the main reasons why I like Pygal are others. The first one is implicit in the listing above: Pygal greatly facilitates the quick creation of chart-drawing scripts... with any other script or software you may like! In real life, the data points in the line_chart.add commands can and should come, without intermediate manual steps, from automatic queries to some database, or running the formula(s) that produce the numbers you need to chart.

The other big feature of Pygal is the possibility to embed several metadata in a chart, including... links! Replacing the 14.2 value in the "Others" line of the listing above with exactly this snippet of code:

  {
    'value': 14.2,
    'label': 'TechRepublic rules!',
    'xlink': {
      'href': 'http://www.techrepublic.com',
      'target': '_blank'}
    }
produces what you see in Figure D: a chart in which clicking on "TechRepublic rules!" will open this website in a new browser tab. Of course, you may assign a different link to each point!

Figure D

Installing Pygal (and the tools it needs)

The installation of Pygal on Linux is simple, but may be a bit different from how the website explains it. You are supposed to use the pip package management tool for Python:

pip install pygal

On Fedora, however, that tool is called pip-python and distributed in a package called python-pip (isn't that wonderful?), so the procedure becomes:

  yum install python-pip
  pip-python install pygal

There may be similar small differences in your distribution, so be prepared. Besides this, the only thing you need to know is that some Pygal functions use other Python libraries. Interpolation, for example, requires scipy. Again, this is not a big deal, since those libraries are easily installable with the usual procedures.

Pygal limits

I see two limits in Pygal. First, there seems to be no way to mix different types of graphs (for example lines and histograms) in the same chart. In the second place, interoperability with other Free Software is still limited: LibreOffice 3.5.7 doesn't recognize metadata and legends (Figure E) and Inkscape just shows a black box (Figure F). Depending on your actual needs, these may be show-stoppers or totally irrelevant issues. In any case, if you need nice interactive charts on your website, give Pygal a try!

Figure E

Figure F

(*) please note that only Figure C is accurate! The numbers in all other figures were deliberately altered to show the look and feel of Pygal charts with non-normalized data!

About

Marco Fioretti is a freelance writer and teacher whose work focuses on the impact of open digital technologies on education, ethics, civil rights, and environmental issues.

1 comments
Douglas_DSilva
Douglas_DSilva

The great feature of vector graphics is that they always have the same resolution and crispness, no matter how much you zoom. Very true and now the free tool is available to help us to have vector graphics, especially charts in our web pages. Thanks a lot for such an informative post!

Editor's Picks