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. 

Area

...

Chart

...

Anchor
areachart
areachart

The area chart plots a set of values on a line per series, and fills the background of the plot area with the series color for each series in the given dataset.
Note: Unlike the ChartComponent (jFreeChart based), the Flash Area chart does not stack the area.

Dataset Guidelines

This chart expects its data as a categorical dataset.

Required Properties

The only property an area chart requires is the appropriate chart-type.

Code Block
XML
XML
<chart-type>AreaChart</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>AreaChart</chart-type>

  <!-- Specify the title of the chart -->
  <title>Chart Title</title>
  <title-font>
    <font-family>Arial</font-family>
    <size>18</size>
    <is-bold>true</is-bold>
  </title-font>

  <!--  Area Chart properties -->
  <line-width>2.0</line-width>
  <dot-style>hollow</dot-style> <!-- values: dot, normal, hollow -->
  <dot-width>5</dot-width>
  <alpha>.95</alpha>

  <!-- General Chart Propeties -->
  <chart-background type="color">#FFFFFF</chart-background>
  <plot-background type="color">#FFFFFF</plot-background>

  <!--  X-Axis properties (domain) -->
  <domain-title>Domain Title</domain-title>
  <domain-title-font>
    <font-family>Arial</font-family>
    <size>14</size>
    <is-bold>true</is-bold>
  </domain-title-font>
  <domain-color>#000000</domain-color>  <!-- color of x-axis -->
  <domain-grid-color>#CCCCCC</domain-grid-color>  <!-- color of vertical grid lines -->
  <domain-stroke>1</domain-stroke>  <!-- thickness of x-axis -->

  <!--  Y-Axis properties (range) -->
  <range-title>Range Title</range-title>
  <range-title-font>
    <font-family>Arial</font-family>
    <size>14</size>
    <is-bold>true</is-bold>
  </range-title-font>
  <range-minimum></range-minimum>  <!-- defines minimum starting point for y-axis range -->
  <range-maximum></range-maximum>  <!-- defines maximum ending point for y-axis range -->
  <range-color>#000000</range-color>  <!-- color of y-axis -->
  <range-grid-color>#CCCCCC</range-grid-color>  <!-- color of horizontal grid lines -->
  <range-stroke>1</range-stroke>  <!-- thickness of y-axis -->
  <range-steps>8</range-steps>  <!-- specify number of ticks, defaults to auto-calculated number -->

  <!-- Specify the color palette for the chart -->
  <color-palette>
    <color>#DB0000</color>
    <color>#B09A6B</color>
    <color>#2C00A8</color>
    <color>#C52F0D</color>
    <color>#123D82</color>
    <color>#4A0866</color>
    <color>#445500</color>
    <color>#FFAA00</color>
    <color>#1E8AD3</color>
    <color>#AA6611</color>
    <color>#772200</color>
    <color>#0f3765</color>
    <color>#B09A6B</color>
  </color-palette>

</chart>
{code}

Image Added