Flash Bubble Chart

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>