Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin
Wiki Markup
{scrollbar}

----
h2. Pie Chart

{anchor:piechart}
The pie chart plots a single value per series in a pie shape.

h3. Dataset Guidelines

The pie chart dataset typically contains two columns. The first column's values are the series names, and the second column contains the data values. If the dataset has multiple rows for each series, the row values will be aggregated, so that each series appears only once in the pie.

The pie chart also supports the *by-row* property, meaning that the dataset can be row based. In this case, you may have multiple numeric columns in your dataset, whose headers will become the series names, and the data values would aggregate across the rows to formulate the series value.

here is a sample pie dataset:
|| DEPARTMENT || ACTUALS ||
| Sales | 11,168,773 |
| Executive Management | 6,299,022 |
| Finance | 12,224,220 |
| Human Resource | 13,075,463 |
| Marketing & Communication | 13,910,753 |
| Product Development | 10,644,102 |
| Professional Services | 76,317,649 |

h3. Required Properties

The only property a pie chart requires is the appropriate chart-type.
{code:XML}

...

Pie Chart

Anchor
piechart
piechart

The pie chart plots a single value per series in a pie shape.

Dataset Guidelines

The pie chart dataset typically contains two columns. The first column's values are the series names, and the second column contains the data values. If the dataset has multiple rows for each series, the row values will be aggregated, so that each series appears only once in the pie.

The pie chart also supports the by-row property, meaning that the dataset can be row based. In this case, you may have multiple numeric columns in your dataset, whose headers will become the series names, and the data values would aggregate across the rows to formulate the series value.

here is a sample pie dataset:

DEPARTMENT

ACTUALS

Sales

11,168,773

Executive Management

6,299,022

Finance

12,224,220

Human Resource

13,075,463

Marketing & Communication

13,910,753

Product Development

10,644,102

Professional Services

76,317,649

Required Properties

The only property a pie chart requires is the appropriate chart-type.

Code Block
XML
XML
<chart-type>PieChart</chart-type>
{code}

The

...

example

...

below

...

contains

...

the

...

full

...

set

...

of

...

additional

...

supported

...

properties

...

with

...

comments

...

on

...

its

...

purpose

...

and

...

valid

...

values.

...

  It

...

is

...

recommended

...

that

...

new

...

users

...

start

...

with

...

this

...

example

...

as

...

a

...

starting

...

place

...

for

...

building

...

your

...

first

...

flash

...

chart.

...

Example

The following chart definition will produce the chart you see below:

Code Block
XML
XML
<chart>

  <!-- Define the chart type -->
  <chart-type>PieChart</chart-type>

  <!-- Define title and title formatting -->
  <title>Chart Title</title>
    <title-font>
      <font-family>Arial</font-family>
      <size>16</size>
      <is-bold>true</is-bold>
    </title-font>

  <!-- General Chart Propeties -->
  <chart-background type="color">#FFFFFF</chart-background>
  <animate>true</animate>  <!-- turns on or off animation of pie -->
  <alpha>.90</alpha>  <!-- sets the transparency of pie slices -->
  <start-angle>0</start-angle>  <!-- sets the angle from which the pie begins rendering -->

  <!-- Define what to display in hover tips -->
  <tooltip>
    #label#
    #key#
    #val#
  </tooltip>

  <!-- Specify the color palette for the chart -->
  <color-palette>
    <color>#880a0f</color>
    <color>#0f3765</color>
    <color>#5d7e33</color>
    <color>#795687</color>
    <color>#AF3335</color>
    <color>#41747e</color>
    <color>#FDC446</color>
    <color>#5d7e33</color>
    <color>#1E8AD3</color>
    <color>#AA6611</color>
    <color>#772200</color>
    </color-palette>

</chart>
{code}

Image Added