{scrollbar}

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 the chart in 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}&#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>