Close modal

Blog Post

Adding charts to Pelican

Development
Wed 16 November 2016
0 Comments


As you might be aware, this blog is powered using the awesome that is pelican (a markdown generator that runs on python). Another awesome piece of software that is built using python is pygal, which creates beautiful graphs (read morehere).

The setup

There is a great github projects for Pelican plugins already here and I'm going to extend it, until my merge request is accepted - please check here to use it.

Setup your pelicanconf.py appropriately

PLUGIN_PATHS = ['<PATH_TO_PLUGINS>']
PLUGINS = ['liquid_tags.pygalcharts']

Some examples

In my last article I wrote about the various sizes of Docker images, now the information was presented in a table like so:

Application Debian 8.4 Alpine 3.4
Linux 125.1 mb 4.803 mb
Nginx-11 181.5 mb 54.23 mb
Python-2.7 673.3 mb 71.37 mb
PHP-7.0 362.9 mb 58.66 mb

However, this information can be much more impactful in a graph like this:

Pretty nifty, huh? Let's see how we did it (I'm skipping the liquid tags and pygal specifier and just writing the JSON payload as per the trailing note):

    {
        "type": "bar",
        "title": "Size of Docker images (mb)",
        "x-labels" : ["Linux", "Nginx 11.0", "Python 2.7", "PHP 7.0"],
        "data" : [
        {"title": "Debian 8.4",
         "values": [125.1, 181.5, 673.3, 362.9]},
         {"title": "Alpine 3.4",
         "values": [4.803, 54.23, 71.37, 58.66]}
        ]
    }

Now you might find this funny but I can't actually include the opening and closing tags for liquid tags here because the parser tries to interpret it, even inside code blocks. They look like this { % pygal json_payload % } except without the space between { and %.
With the exception of the opening pygal tag, everything inside liquid tags is JSON, and is hopefully fairly straight forward.

I've only added the basics so far from pygal: bar (vertical or horizontal), pie and line. However these will be quite useful on their own, let's see another way we could look at the data.

Great for a comparison!

Conclusion

I won't go on too much, as I don't want to be seeming to plug my own github fork - however suffice to say I'll be using it alot (and will probably write some articles on pygal itself - which is well worth writing about).

The benefits of pygal are that the graphs are clean, scalable vector graphics with modern and pleasing styling. Arbitrarily making a chart out of some figures in a blog without saving/loading external images is very convenient.