Algorithms
Articles
Libraries
Snippets
Groups
Users
Charts
Siafoo supports embedded charts using special reST directives. The charts are rendered using a server compatible with the Google Chart API and sent to the client in the form of images. Siafoo currently only supports Pie, Bar and Line charts. We are also working on introducing histograms and scatter plots.
1 Creating Charts
To create a chart, use one of the chart directives .. linechart::`, .. piechart::`, .. barchart::`
The following arguments are required for every chart type
| 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 |
| :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. To provide multiple datasets separate each dataset using a pipe (|) character.
1.2 Specifying Colors
The charting server will randomly pick colors for the chart data sets or pie slices. However these random colors are most likeley 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 is undefined.
2 Chart Types
2.1 PieCharts
PieChart specific arguments
| Argument | Purpose |
|---|---|
| :labels: | The labels for each pie slice |
| :3d: | Specifying this argument makes a 3D piechart |
Example:
.. 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:
Will produce the following:
2.2 Line Graphs
Line Chart specific arguments
| Argument | Purpose |
|---|---|
| :legend: | |
| :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 |
Example:
.. linechart:: :title: Test Line Chart :data: 1,2,3,4,5|10,17,19,20, 3|11,7,9,20,75 :colors: ee2000, DDDDAA, fF03f2 :range_left: 0, 100
will produce:
2.3 Bar Graphs
| 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: | |
| :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 |
Example:
.. 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
Will produce the following
And this:
.. 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:
will produce this