Confluence

Overview:

The {chart} macro creates pie, line and bar charts quickly and easily...

This superb macro allows you to take tabular data and quickly turn it in to eye catching and easy to understand graphical charts on your pages.

Parameters:

The basic use of the macro is as follows:

{chart:title=t|type=pie|width=w|height=h|displayData=d|legend=l}
||      || table || containing || data || and || headings ||
||Value | 234 | 54 | 346 | 142 | 839 |
{chart}

Parameter	Default	Notes
title		An optional title to display at the top of the chart.
type	pie	The type of chart to display: pie - a pie chart, good for showing ratios line - a line chart, good for showing changes over time bar - a bar chart, good for showing related data sets area - an area chart (line chart with filled areas) There are also a number of "x/y" plots which have numerical X and Y axes. You can optionally make these time based (see timeSeries parameter). xyArea - An "x/y" area chart xyBar - An "x/y" bar chart xyLine - An "x/y" line chart xyStep - An "x/y" step chart xyStepArea - An "x/y" step area chart scatter - A scatter plot timeSeries - A time series chart
dateFormat		A mask that defines the format of dates when using type=timeSeries charts (see Date Formats tab above).
timePeroid	Day	Specify the time period for the type=timeSeries charts: Millisecond - 1/1000th of a second Second - 1/60th of a minute Minute - 1/60th of an hour Hour - 1/24th of a day Day - 1/7th of a week Week - 7 days Month - a calendar month Quarter - 3 calendar months Year - 12 calendar months
timeSeries	false	If set to true, the X values in an "x/y" plot will be treated as a time series and as such will be subject to the settings defined by the dateFormat and timePeriod parameters.
3D	false	If set to true then a pie, line or bar chart will be shown with 3D perspective.
orientation	vertical	By default the line, bar and area charts are shown vertically unless you set this parameter to horizontal.
stacked	false	If set to true then a bar or area chart will be shown as stacked.
width	300	The width of the chart in pixels.
height	300	The height of the chart in pixels.
dataDisplay	false	If set to true the table containing the raw data will be shown beneath the chart.
dataOrientation	horizontal	By default, the data table contains chart data in columns from left to right. If you set this parameter to vertical, however, the chart will take it's data in rows from top to bottom.
xlabel		The label to show on the x axis.
ylabel		The label to show on the y axis.
legend	true	By default a legend is shown for a chart, unless you set this parameter to false (reccommended for pie charts).
bgColor	white	The background colour of the chart panel. The colour can be specified by a hexidecimal colour code or a colour name: blue, cyan, gray, green, maroon, navy, purple, red, silver, teal, violet, white, yellow.
borderColor	gray	By default, the chart panel does not have a border. If you would like a border, specify it's color. The colour can be specified by a hexidecimal colour code or a colour name: blue, cyan, gray, green, maroon, navy, purple, red, silver, teal, violet, white, yellow.
opacity	Dependant on cart type	A number between 0 (transparent) and 100 (opaque) defining the transparency of areas, bars or lines in the chart. Defaults vary depending on the type of chart: 75 for 3D charts 50 for non-stacked area charts 100 for all other charts

Note: The "dataDisplay" parameter used to be called "displayData" prior to version 1.2 of this plugin.

Examples:

Pie Chart

To create a simple pie chart, use the following format:

{chart}
|| ||Trout||Kippers||
||Caught|15|26|
{chart}

Which results in:

Because the pie chart already lables the segments, you can safely remove the legend from the chart:

{chart:legend=false}
|| ||Trout||Kippers||
||Caught|15|26|
{chart}

Which results in:

Bar Chart

To create a simple bar chart use more than one row of data, for example:

{chart:type=bar}
|| ||Trout||Kippers||Total||
||John|15|26|41|
||David|21|8|29|
{chart}

Which results in:

You can also stack the bar chart using the stacked parameter as shown below:

{chart:type=bar|stacked=true}
|| ||Trout||Kippers||Total||
||John|15|26|41|
||David|21|8|29|
{chart}

Which results in:

Line Chart

To create a simple line chart use more than one row of data (one for each line), for example:

{chart:type=line}
|| ||Monday||Tuesday||Wednesday||
||Cars|52|33|24|
||Busses|10|18|46|
{chart}

Which results in:

Area Chart

The area chart is similar to the line chart only it fills in the area beneath the lines:

{chart:type=area}
|| ||Monday||Tuesday||Wednesday||
||Cars|52|33|24|
||Busses|10|18|46|
{chart}

Which results in:

You can use the stacked parameter to get round this problem:

{chart:type=area|stacked=true}
|| ||Monday||Tuesday||Wednesday||
||Cars|52|33|24|
||Busses|10|18|46|
{chart}

Which results in:

Chart Title and Raw Data

In example #3, it wasn't immediately clear what the chart related to or what the actual values were. To convey such information you can add a custom title, axis labels and/or show the raw data with the chart:

{chart:type=line|title=Effect of Car Clamping|ylabel=Vehicles
on Road|xlabel=Day|displayData=true}
|| ||Monday||Tuesday||Wednesday||
||Cars|52|33|24|
||Busses|10|18|46|
{chart}

Which results in:

	Monday	Tuesday	Wednesday
Cars	52	33	24
Busses	10	18	46

Beautification

In our last example, things were starting to look a little messy, so here's some tips on improving the display:

Only use headings and axis labels where they are required (eg. there is no point in labelling the x-axis because its meaning is obvious already)
Use a heading style to improve the look of the title
Use the center macro to center the chart, table and heading on the page
Adjust the width and height to provide the optimum dimensions for the chart data being used
Set the background colour to match the rest of the page

{center}h3. Effect of Car Clamping
{chart:type=line|displayData=true|width=400|height=250|bgColor=#F9F9F7|ylabel=Vehicles on Road}
|| ||Monday||Tuesday||Wednesday||
||Cars|52|33|24|
||Busses|10|18|46|
{chart}{center}

The result:

Effect of Car Clamping

	Monday	Tuesday	Wednesday
Cars	52	33	24
Busses	10	18	46

3D Charts and Opacity

You can easily apply a 3D effect to charts as follows:

{chart:type=bar|stacked=true|bgColor=#F9F9F7|3D=true}
|| ||Trout||Kippers||Total||
||John|15|26|41|
||David|21|8|29|
{chart}

Resulting in:

3D charts are 75% opaque by default - in other words, they are 25% transparent. You can change the opacity of charts using the opacity parameter - for example, to set 50% opacity use the following:

{chart:type=bar|stacked=true|bgColor=#F9F9F7|3D=true|opacity=50}
|| ||Trout||Kippers||Total||
||John|15|26|41|
||David|21|8|29|
{chart}

Resulting in:

Chart and Data Orientation

You can flip the x-y axis of the chart display as follows:

{chart:type=bar|stacked=true|bgColor=#F9F9F7|orientation=horizontal}
|| ||Trout||Kippers||Total||
||John|15|26|41|
||David|21|8|29|
{chart}

Resulting in:

You can flip the data axis as follows:

{chart:type=bar|stacked=true|bgColor=#F9F9F7|dataOrientation=vertical}
|| ||Trout||Kippers||Total||
||John|15|26|41|
||David|21|8|29|
{chart}

Resulting in:

For an example of when this is useful, see our rate-table macro tutorial.

Examples of various "x/y" plots will be added at a later date.

Time Series Chart

Time series charts plot one or more series of data against time. The date/time format of the X axis is set by the dateFormat parameter and the display units of time are set by the timePeriod parameter as shown below:

{chart:type=timeSeries|dateFormat=MM.yyyy|timePeriod=Month|width=700|dataOrientation=vertical|rangeAxisLowerBound=0|colors=blue,red}
|| Month || Revenue ||
| 1.2005 | 31.8 |
| 2.2005 | 41.8 |
| 3.2005 | 51.3 |
| 4.2005 | 33.8 |
| 5.2005 | 27.6 |
| 6.2005 | 49.8 |
| 7.2005 | 51.8 |
| 8.2005 | 77.3 |
| 9.2005 | 73.8 |
| 10.2005 | 97.6 |
| 11.2005 | 101.2 |
| 12.2005 | 113.7 |

|| Month || Expenses ||
| 1.2005 | 41.1 |
| 2.2005 | 43.8 |
| 3.2005 | 45.3 |
| 4.2005 | 45.0 |
| 5.2005 | 44.6 |
| 6.2005 | 43.8 |
| 7.2005 | 51.8 |
| 8.2005 | 52.3 |
| 9.2005 | 53.8 |
| 10.2005 | 55.6 |
| 11.2005 | 61.2 |
| 12.2005 | 63.7 |
{chart}

Which results in:

As you can see, we've specified custom colours for the data series to make the lines more distinctive.

Frequently Asked Questions:

Q	Can I change the colours of the background, etc?
A	No, not at present.

Confluence

chart macro

Overview:

Parameters:

Examples:

Pie Chart

Bar Chart

Line Chart

Area Chart

Chart Title and Raw Data

Beautification

Effect of Car Clamping

3D Charts and Opacity

Chart and Data Orientation

Time Series Chart

Frequently Asked Questions:

See Also:

Ask questions, get help and report bugs & issues on our Community Site

Comments (6)

Anonymous says:

Guy Fraser says:

James Lowry says:

Anonymous says:

Anonymous says:

Mark Daysh says:

Adaptavist

Try for Free

Quick Links

Stay in Touch