Demo Site

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:

  • Next to the directive, use the chart type you want

  • Any option you can set in a chart? Use it like :title: in this example. Syntax on the value is just like in the pygal examples.

  • For each data series do it like the line that says Firefox in this example. The first element is the label, then comes the data.

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