Rationale

Setup

1. FusionCharts has a free and open source edition as well as a commercial product. Neither is bundled with Orbeon Forms. So first, either download the free and open source edition or download a trial of the commercial edition.
   
   
2. Unzip the distribution, and copy the directory that contains all the swf files somewhere in your resources directory, for instance in the resources/FusionCharts directory.
   
   
3. Add the following property to your properties-local.xml, to specify the path to the directory that contains the FusionCharts swf files (here assuming that the swf files are under FusionCharts inside the resources):
   
   
   <property as="xs:string" name="oxf.xforms.xbl.fr.fusion-charts.uri-to-swf"
                         value="/FusionCharts"/>
   
   
4. Starting with Orbeon Forms 3.9, also add the following property to your properties-local.xml. You need this as starting with 3.9, when serving resources (say /foo/bar.png), Orbeon Forms automatically looks up the file for that resource adding /apps to the path (say /apps/foo/bar.png). You can tell Orbeon Forms you don't want this to be done for certain paths, which is what the following property does.
   
   
   <property as="xs:string" name="oxf.url-rewriting.app-paths"
                         value="^/(apps|xbl|forms|FusionCharts)/.*$"/>
   

Usage

1. Store the XML defining the chart in an instance (see the FusionChart free documentation and the FusionCharts commercial documentation).
   
   
2. Use the following markup to insert the chart in your form:
   
   
   <fr:fusion-charts ref="column-3d/chart" swf="Column3D" width="600" height="400"/>
   
   All the attributes on <fr:fusion-charts> are required:
   
   
• ref points to a node which is the root of your chart definition, which can be stored anywhere in an instance.
• swf defines what type of chart you want to use. It is the name of the swf file to use, without the extension. I.e. if the file name is FCF_Area2D.swf, the attribute value must be FCF_Area2D.
• width and height define the size of the chart.
• [SINCE 201110-03] chart-id is an optional attribute. By default, the id of the <embed> corresponding to the chart is generated based on the id on your <fr:fusion-charts> by adding the -fusion suffix. If you have, say, id="my-chart", then the id on the <embed> will be my-chart-fusion. If you'd like to specify your own id for the <embed> instead of using the automatically generated one, you can specify one with the chart-id attribute.
  
  

If the values for swf, width, or height are not statically defined but come from an instance, instead of the attribute you can use a nested element of the same name, with a single node binding pointing to the node containing the value. But note that those values are used when the chart is rendered (when the component receives xforms-enabled), and that they can't be changed at a later time.

If you are using the commercial edition of FusionCharts, the XML defining the chart (pointed to by ref) can change at any time. The component will react to changes and will automatically update the chart. [SINCE: 2011-04-08] This feature also works if you are using the free edition of FusionCharts.