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.

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}

Parameters

Parameter	Required	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.

© 2005 Atlassian Software Systems Pty Ltd.

This macro must be manually installed if using Confluence 1.4.x and is likely to be a standard part of the Confluence 2.0 distribution.

• Download and Installation Instructions

If you would like this macro installed on your Builder Account, please contact our Support Desk.

Atlassian maintain a JIRA Project for tracking bug reports and feature requests for this macro. The currently reported items are shown below:

• Download and Installation Instructions

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:

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.