Charts

2013-08-27 18:20

Charts

If you are using reStructuredText and install pygal, Nikola has support for rather nice charts with little effort, and i's even semi-interactive (hover your pointer over the legend!):

.. chart:: StackedLine
   :title: 'Browser usage evolution (in %)'
   :fill: True
   :x_labels: ['2002','2003','2004','2005','2006','2007','2008','2009','2010','2011','2012']
   :width: 600
   :height: 400
   :explicit_size: True
   :style: BlueStyle

   ('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
   ('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
   ('Firefox', [None, None, None, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
   ('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
Browser usage evolution (in %) 10102020303040405050606070708080909010010020022003200420052006200720082009201020112012Browser usage evolution (in %)14.28.676923076923076281.03846153846155200215.452.06153846153847277.1923076923077200315.395.44615384615383277.512820512820520048.9138.83076923076922298.02564102564120059182.21538461538464297.7051282051282200610.4225.6293.2179487179487320078.9268.9846153846153298.02564102564120085.8312.36923076923074307.9615384615384520096.7355.75384615384615305.076923076923120106.8399.1384615384615304.756410256410320117.5442.52307692307687302.51282051282052012100 (+85.8)8.6769230769230766.0384615384615472002100 (+84.6)52.061538461538476.0384615384615472003100 (+84.7)95.446153846153836.038461538461547200483.4 (+74.5)138.8307692307692259.24358974358972200575 (+66)182.2153846153846486.16666666666669200669 (+58.6)225.6105.39743589743591200763.6 (+54.7)268.9846153846153122.7051282051282200850.6 (+44.8)312.36923076923074164.3717948717949200942.9 (+36.2)355.75384615384615189.05128205128204201033.4 (+26.6)399.1384615384615219.5201127.6 (+20.1)442.52307692307687238.08974358974362012100 (+0)8.6769230769230766.0384615384615472002100 (+0)52.061538461538476.0384615384615472003100 (+0)95.446153846153836.0384615384615472004100 (+16.6)138.830769230769226.0384615384615472005100 (+25)182.215384615384646.0384615384615472006100 (+31)225.66.0384615384615472007100 (+36.4)268.98461538461536.038461538461547200896.1 (+45.5)312.3692307692307418.538461538461547200989.2 (+46.3)355.7538461538461540.65384615384613201076.2 (+42.8)399.138461538461582.32051282051287201164.7 (+37.1)442.52307692307687119.179487179487152012100 (+0)8.6769230769230766.0384615384615472002100 (+0)52.061538461538476.0384615384615472003100 (+0)95.446153846153836.0384615384615472004100 (+0)138.830769230769226.0384615384615472005100 (+0)182.215384615384646.0384615384615472006100 (+0)225.66.0384615384615472007100 (+0)268.98461538461536.0384615384615472008100 (+3.9)312.369230769230746.0384615384615472009100 (+10.8)355.753846153846156.0384615384615472010100 (+23.8)399.13846153846156.0384615384616042011100 (+35.3)442.523076923076876.0384615384615472012OthersIEFirefoxChrome

Here's how it works:

Easy, right? Please explore the pygal site for more information, and just take this example and tweak stuff.

Comments powered by Disqus