| Wiki Markup |
|---|
{scrollbar}
h2. |
Bubble
...
Chart
...
| Anchor | ||||
|---|---|---|---|---|
|
A bubble chart draws bubbles for each point in a series. The chart expects three values per bubble: the domain (commonly the X-axis)
...
value,
...
the
...
range
...
(commonly
...
the
...
y-axis)
...
value,
...
and
...
a
...
third
...
value
...
(the
...
Z
...
value)
...
that
...
determines
...
the
...
size
...
of
...
the
...
bubble
...
to
...
draw
...
around
...
the
...
point.
...
The
...
size
...
of
...
the
...
bubble
...
is
...
derived
...
from
...
an
...
algorithm
...
that
...
takes
...
the
...
Z
...
value,
...
divides
...
it
...
by
...
the
...
maximum
...
Z
...
value
...
in
...
the
...
dataset,
...
then
...
multiplies
...
that
...
number
...
by
...
the
...
max-bubble-size
...
property
...
value.
...
See
...
the
...
section
...
on
...
required
...
properties
...
below
...
for
...
more
...
information
...
on
...
the
...
max-bubble-size
...
property.
...
Dataset
...
Guidelines
...
This
...
chart
...
expects
...
its
...
data
...
as
...
an
...
...
...
.
Required Properties
The following properties are required:
chart-type
| Code Block | ||||
|---|---|---|---|---|
| ||||
<chart-type>BubbleChart</chart-type>
{code}
* |
dataset-type
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<dataset-type>XYZSeriesCollection</dataset-type>
{code}
* |
max-bubble-size
...
The
...
max-bubble-size
...
property
...
is
...
defaulted
...
to
...
zero,
...
so
...
in
...
order
...
to
...
see
...
your
...
bubbles,
...
you'll
...
need
...
to
...
set
...
this
...
property
...
!
...
The
...
value
...
should
...
be
...
between
...
1
...
and
...
100,
...
as
...
a
...
percentage
...
of
...
smaller
...
to
...
larger.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<max-bubble-size>90</max-bubble-size>
{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 a chart similar to the example below.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<chart>
<!-- Define the chart type -->
<chart-type>BubbleChart</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>
<!-- General Chart Attributes -->
<dataset-type>XYSeriesCollection</dataset-type>
<!-- formatted label, using {0} - series name, {1} - x , {2} - y, {3} - z -->
<bubble-label-content>{0} ,{1} In Stock ,{2} Ordered ,{3} Total Price<</bubble-label-content>
<bubble-label-z-format>$#,###</bubble-label-z-format> <!-- formatted using java decimal format, ie #,### -->
<!-- General Chart Formatting Propeties -->
<chart-background type="color">#FFffff<>#FFFFFF</chart-background>
<plot-background type="color">#ffffff<>#FFFFFF</plot-background>
<alpha>.70</alpha>
<!-- X-Axis properties (domain)-->
<domain-title>Domain Title</domain-title>
<domain-title-font>
<font-family>Arial</font-family>
<size>14</size>
<is-bold>false</is-bold>
</domain-title-font>
<domain-minimum></domain-minimum> <!-- defines the minimum starting point for x-axis -->
<domain-maximum></domain-maximum> <!-- defines the maximum ending point for x-axis -->
<domain-color>#000000</domain-color> <!-- color of x-axis -->
<domain-grid-color>#ffffff<color>#FFFFFF</domain-grid-color> <!-- color of vertical grid lines -->
<domain-stroke>1</domain-stroke> <!-- thickness of the x-axis -->
<domain-steps>6</domain-steps> <!-- specify the number of ticks, defaults to auto-calculated number -->
<!-- Y-Axis properties (range) -->
<range-title>Range Title</range-title>
<range-title-font>
<font-family>Arial</font-family>
<size>14</size>
<is-bold>false</is-bold>
</range-title-font>
<range-minimum></range-minimum> <!-- defines minimum starting point for y-axis -->
<range-maximum></range-maximum> <!-- defines maximum ending point for y-axis -->
<range-color>#000000</range-color> <!-- color of y-axis -->
<range-grid-color>#eaeaea<color>#EAEAEA</range-grid-color> <!-- color of horizontal grid lines -->
<range-stroke>1</range-stroke> <!-- thickness of y-axis -->
<range-steps>6</range-steps> <!-- specify number of ticks, defaults to auto-calculated number -->
<!-- Specify the color palette for the chart -->
<color-palette>
<color>#0f3765</color>
<color>#880a0f</color>
<color>#B09A6B</color>
<color>#772200</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>#8b2834</color>
</color-palette>
</chart>
{code}
!flash_bubble.jpg! |
