Hide
Bored? Check out the Recent Activity on Siafoo Join Siafoo Now or Learn More

Charts Atom Feed 0

Siafoo reStructured Text supports embedded charts using special reST directives. Charts are rendered on the fly by our Google Chart API-compatible chart server and displayed as an image. We're currently working on more dynamic charts.

Siafoo supports Pie, Bar and Line charts. If you need a different type of chart let us know.

You can follow along using the Siafoo reST demo if you'd like.

1   Creating Charts

To create a chart, use the .. linechart::, .. piechart::, or .. barchart:: directive.

These arguments are used for every chart type. Only the 'data' is required. At least some of these are self-explanatory, I hope:

Argument Purpose
:title: The title of the chart
:data: Data points, comma separated, with datasets separated by pipes
:colors: RGB hex colors, comma-separated
:bg_fill: The background color for the chart
:chart_fill: The color for the chart
:w: Chart width
:h: Chart height

1.1   Specifying Data

To specify the data for the chart, use the :data: argument and provide a comma-separated list of data point values.

The line and bar charts allow multiple datasets, resulting in multiple graphs on the same chart canvas. You separate each dataset using the pipe (|) character.

When specifying labels or legends, make sure to do it in the same order as the data points and datasets.

1.2   Specifying Colors

The charting server will randomly pick colors for the chart data sets or pie slices. However these random colors are probably not what you want.

To specify custom colors use the :colors: argument with a comma separated list of color values in the standard RGB hex format, as used in HTML (but without the pound character (#).

For pie charts, each color is assigned to a pie slice. For line and bar graphs, the colors are assigned to each dataset. Providing more or less color values than there are pie slices or graph datasets will result in weird behavior (so don't do that).

2   Chart Types

2.1   Pie Charts

Pie charts also accept the arguments:

Argument Purpose
:labels: The labels for each pie slice, comma separated
:3d: Specifying this argument makes a 3D piechart

For example (based on real, but old, data):

.. piechart::
    :title: Visitors with Firefox
    :data: 36.30, 55.40, 8.3
    :colors: f5f700, 0087f7, f79b00
    :labels: Firefox 3 (36.0%), Firefox 2.0.0.14 (55.40%), Other Firefox 2 (8.3%)
    :3d:

This code produces:

http://charts.siafoo.net/chart?cht=p3&chs=500x200&chd=s:o9J&chtt=Visitors%20with%20Firefox&chco=f5f700,0087f7,f79b00&chf=bg,s,ffffff|c,s,ffffff&chl=Firefox%203%20%2836.0%25%29|%20Firefox%202.0.0.14%20%2855.40%25%29|%20Other%20Firefox%202%20%288.3%25%29

2.2   Line Charts

Line charts also except these arguments:

Argument Purpose
:legend: A label for each dataset, pipe-separated
:range_left: The range for the left axis
:range_right: The range for the right axis
:range_top: The range for the top axis
:range_bottom: The range for the bottom axis
:labels_left: The labels for the left axis
:labels_right: The labels for the right axis
:labels_top: The labels for the top axis
:labels_bottom: The labels for the bottom axis

For example:

.. linechart::
    :title: Fictional Oil Price vs Happiness
    :data: 45,41,46,43,50,45,57,53,58,51,55,50,51,46,61,57,67,62,70, 62, 67, 61, 56, 62, 57|43, 40, 38, 39, 41, 33, 35, 34, 33, 35
    :colors: ee2000, DDDDAA, fF03f2
    :range_left: 40, 70
    :range_right: 20, 100
    :labels_left: Price $
    :labels_right: %
    :legend: Price per Barrel|Happiness

will produce:

http://charts.siafoo.net/chart?cht=lc&chs=500x200&chd=t:64.3,58.6,65.7,61.4,71.4,64.3,81.4,75.7,82.9,72.9,78.6,71.4,72.9,65.7,87.1,81.4,95.7,88.6,100.0,88.6,95.7,87.1,80.0,88.6,81.4|61.4,57.1,54.3,55.7,58.6,47.1,50.0,48.6,47.1,50.0&chtt=Fictional%20Oil%20Price%20vs%20Happiness&chdl=Price%20per%20Barrel%7CHappiness&chco=ee2000,DDDDAA,fF03f2&chf=bg,s,ffffff|c,s,ffffff&chxt=y,r,y,r&chxl=2:|Price%20%24|3:|%25&chxr=0,40,70|1,20,100

2.3   Bar Graphs

Bar graphs of course also have their own arguments:

Argument Purpose
:orientation: The orientation of the bars, vertical or horizontal
:grouped: If specified the data set bars are grouped, otherwise they are stacked on top of eachother
:bar_width: The width of each bar in pixels
:legend: The label for each dataset, pipe-separated
:range_left: The range for the left axis
:range_right: The range for the right axis
:range_top: The range for the top axis
:range_bottom: The range for the bottom axis
:labels_left: The labels for the left axis
:labels_right: The labels for the right axis
:labels_top: The labels for the top axis
:labels_bottom: The labels for the bottom axis

Here's an example of a stacked bar chart:

.. barchart::
    :title: Test Py Stacked
    :data: 1,2,3,4,5|10,17,19,20, 3|11,7,9,20,75
    :colors: ee2000, DDDDAA, fF03f2
    :orientation: vertical
    :bar_width: 5

This code produces:

http://charts.siafoo.net/chart?cht=bvs&chs=500x200&chd=t:1.3,2.7,4.0,5.3,6.7|13.3,22.7,25.3,26.7,4.0|14.7,9.3,12.0,26.7,100.0&chtt=Test%20Py%20Stacked&chco=ee2000,DDDDAA,fF03f2&chf=bg,s,ffffff|c,s,ffffff&chbh=5

This is the same data, but as a grouped bar chart:

.. barchart::
    :title: Test Py Grouped
    :data: 1,2,3,4,5|10,17,19,20, 3|11,7,9,20,75
    :colors: ee2000, DDDDAA, fF03f2
    :orientation: vertical
    :bar_width: 5
    :grouped:

That code produces:

http://charts.siafoo.net/chart?cht=bvg&chs=500x200&chd=t:1.3,2.7,4.0,5.3,6.7|13.3,22.7,25.3,26.7,4.0|14.7,9.3,12.0,26.7,100.0&chtt=Test%20Py%20Grouped&chco=ee2000,DDDDAA,fF03f2&chf=bg,s,ffffff|c,s,ffffff&chbh=5