Bubble Chart
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 XYZ dataset.
Required Properties
The following properties are required:
chart-type
<chart-type>BubbleChart</chart-type>
dataset-type
<dataset-type>XYZSeriesCollection</dataset-type>
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.
<max-bubble-size>90</max-bubble-size>
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.
<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},{2},{3}</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</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>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</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</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>
