FusionCharts for Flex > Chart XML Structure > Combination Charts

Combination charts are helpful when you want to plot multiple chart types on the same chart or use two different scales for each of the y-axis. FusionCharts offers two categories of Combination Chart:

  1. Single Y Axis Combination Chart: In these charts, there is only one y-axis and all the data sets are plotted against this axis.
  2. Dual Y Axis Combination Chart: In these charts, there are two y-axis, which can represent different scales (e.g., revenue and quantity or visits and downloads etc.). The axis on the left of the chart is called primary axis and the one on right is called secondary axis.

FusionCharts has 2D and 3D charts for both the above categories. Shown below is a 2D Single Y Combination Chart.
 


In the above chart, all the data-series are plotted against the same (primary) y-axis. Different data-sets have different renderAs property to render the data-sets are columns, lines, or areas.

The XML for the above chart is:

<chart caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue' showValues='0' numberPrefix='$'>

   <categories>
      <category label='Jan' />
      <category label='Feb' />
      <category label='Mar' />
      <category label='Apr' />
      <category label='May' />
      <category label='Jun' />
      <category label='Jul' />
      <category label='Aug' />
      <category label='Sep' />
      <category label='Oct' />
      <category label='Nov' />
      <category label='Dec' />
   </categories>

   <dataset seriesName='2006'>
      <set value='27400' />
      <set value='29800'/>
      <set value='25800' />
      <set value='26800' />
      <set value='29600' />
      <set value='32600' />
      <set value='31800' />
      <set value='36700' />
      <set value='29700' />
      <set value='31900' />
      <set value='34800' />
      <set value='24800' />
   </dataset>

   <dataset seriesName='2005' renderAs='Area'>
      <set value='10000'/>
      <set value='11500'/>
      <set value='12500'/>
      <set value='15000'/>
      <set value='11000' />
      <set value='9800' />
      <set value='11800' />
      <set value='19700' />
      <set value='21700' />
      <set value='21900' />
      <set value='22900' />
      <set value='20800' />
   </dataset>

   <dataset seriesName='2004' renderAs='Line'>
      <set value='7000'/>
      <set value='10500'/>
      <set value='9500'/>
      <set value='10000'/>
      <set value='9000' />
      <set value='8800' />
      <set value='9800' />
      <set value='15700' />
      <set value='16700' />
      <set value='14900' />
      <set value='12900' />
      <set value='8800' />
   </dataset>

   <trendlines>
      <line startValue='22000' color='91C728' displayValue='Target' showOnTop='1'/>
   </trendlines>

   <styles>

      <definition>
         <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />
      </definition>

      <application>
         <apply toObject='Canvas' styles='CanvasAnim' />
      </application>   

   </styles>

</chart>

 
Shown below is an example of a 2D Dual Y Combination Chart:

In the chart above, we have plotted sales and quantity. There are two y-axis in the chart.

  • The primary y axis (left) represents the Revenue, which is plotted as columns.
  • The secondary y axis (right) represents the Quantity, which is plotted as area.

For Dual Y Axis combination charts, it is necessary to provide at-least 2 datasets - one for the primary axis and the other for the secondary axis. If you do not provide this, the chart will not render properly.

The XML for the above Dual Y Axis chart is:

<chart caption='Sales Volume' PYAxisName='Revenue' SYAxisName='Quantity' showvalues='0' numberPrefix='$'>
<categories>
<category label='Jan' />
<category label='Feb' />
<category label='Mar' />
<category label='Apr' />
<category label='May' />
<category label='Jun' />
<category label= 'Jul' />
<category label='Aug' />
<category label='Sep' />
<category label='Oct' />
<category label='Nov' />
<category label='Dec' />
</categories><dataset seriesName='Revenue' parentYAxis='P'>
<set value='1700000' />
<set value='610000' />
<set value='1420000' />
<set value='1350000' />
<set value='2140000' />
<set value='1210000' />
<set value='1130000' />
<set value='1560000' />
<set value='2120000' />
<set value='900000' />
<set value='1320000' />
<set value='1010000' />
</dataset><dataset seriesName='Quantity' parentYAxis='S'>
<set value='340' />
<set value='120' />
<set value='280' />
<set value='270' />
<set value='430' />
<set value='240' />
<set value='230' />
<set value='310' />
<set value='430' />
<set value='180' />
<set value='260' />
<set value='200' />
</dataset><trendLines>

<line startValue='2100000' color='009933' displayvalue='Target' />
</trendLines><styles><definition>
<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />
</definition><application>
<apply toObject='Canvas' styles='CanvasAnim' />
</application>   </styles>
</chart>
 
Brief Explanation
The XML structure for a combination chart is very similar to that of a multi-series chart. Therefore, we won't be discussing it all over again. What we'll be discussing are the differences between them.
 
Single Y Axis Combination Charts

Single Y Axis Combination Charts allows you to plot multiple data-sets as different types of plots (columns, lines or areas), but against the same y-axis (primary). Since all the data-sets belong to the same primary axis, the number formatting properties do NOT change.

To select, which data-set should be rendered as what plot type, you use the renderAs property as shown below:
<dataset seriesName='2005' renderAs='Area'>
<dataset seriesName='2004' renderAs='Line'>
<dataset seriesName='2003' renderAs='Column'>

 
Dual Y Axis Combination Charts

In Dual Y Axis Combination Charts, you've two y-axes. Each y-axis can have it's own scale and number formatting properties. You can also explicitly set y-axis lower and upper limits for both the axes.

You choose the axis for each dataset using the parentYAxis property of <dataset> element. This attribute can take a value of 'P' or 'S'. 'P' denotes primary axis and 'S' denotes secondary axis. Like, in our above example, we have the revenue dataset set on primary axis:

<dataset seriesName='Revenue' parentYAxis='P'>

and the quantity dataset set on secondary axis:

<dataset seriesName='Quantity' parentYAxis='S'>

In Dual Y 3D Combination Charts, the column chart always plots on the primary axis and lines on the secondary. You can have more than one primary or secondary datasets but atleast one of each is required.

Each trend-line also needs to be associated with an axis, against which it will be plotted.

Example:

<trendLines>
<line parentYAxis='S' or 'P' ... startValue='324' .../>
</trendLines>

By default, they conform to the primary axis.