Page Comparison

{scrollbar}

h2. Bubble Chart

{anchor:bubblechart}
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.

h3. Dataset Guidelines

This chart expects its data as an [XYZ dataset|The XYZ Dataset].

h3. Required Properties

The following properties are required:

*chart-type*
{code:XML}
<chart-type>BubbleChart</chart-type>
{code}
*dataset-type*
{code:XML}
<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:XML}
<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.&nbsp; It is recommended that new users start with this example as a starting place for building your first flash chart.

h3. Example

The following chart definition will produce the chart in the example below.
{code:XML}
<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}&#13;{1}&#32;In Stock&#13;{2}&#32;Ordered&#13;{3}&#32;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</chart-background>
  	<plot-background type="color">#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-color>#000000</domain-color>
 	 <domain-grid-color>#ffffff</domain-grid-color>
  	<domain-stroke>1</domain-stroke>

  	<!--  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>
  	<range-maximum></range-maximum>
 	 <range-color>#000000</range-color>
  	<range-grid-color>#eaeaea</range-grid-color>
	  <range-stroke>1</range-stroke>
	  <range-steps>6</range-steps>

	  <!-- 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}
!sampleflash_bubble_chart.png|width=32,height=32.jpg!