Time for action — a chart showing revenue versus units sold

1. 1. Create a copy of ActualVsProjected.html in the same folder and name it RevenueVsUnits.html.

2. 2. Change the reference of the chart SWF file in embedding code from MSCombi2D.swf to MSCombiDY2D.swf, to use a chart with dual axes.

3. 3. Change the XML URL to RevenueVsUnits.xml in the chart embedding code.

4. 4. Create an XML file with the name RevenueVsUnits.xml in the same folder and write the following data in it:

   <chart caption='Harry&apos;s SuperMart' subcaption='Revenue and Units Sold by Year' xAxisName='Year' PYAxisName='Amount' SYAxisName='Units Sold' numberPrefix='$'>
   <categories>
   <category label='2009' />
   <category label='2010' />
   <category label='2011' />
   </categories>
   <dataset seriesName='Revenue'>
   <set value='1487500' />
   <set value='2100600' />
   <set value='2445400' />
   </dataset>
   <dataset seriesName='Units Sold' parentYAxis='S' renderAs='Line' showValues='0' color='666666'>
   <set value='24355' />
   <set value='38998' />
   <set value='43987' />
   </dataset>
   </chart>
   

5. 5. Open RevenueVsUnits.xml in your browser. You should see a chart similar to the following screenshot:

What just happened?

We just enabled Harry to compare the revenues of Harry's SuperMart for the last three years, along with the units sold. This chart gives him a perspective on how the revenues are affected by the units sold. Note how this chart has two y-axes, one on the left called primary axis, and one on the right called secondary axis. Each axis has its title defined using two new attributes of the<chart> element, PYAxisName for the primary axis, and SYAxisName for the secondary axis. The attribute YAxisName is not applicable to this chart as there is no common y-axis.

<chart caption='Harry&apos;s SuperMart' subcaption='Revenue and Units Sold by Year' xAxisName='Year' PYAxisName='Amount' SYAxisName='Units Sold' numberPrefix='$'>

The numberPrefix attribute gets applied to the primary axes. If we had to specify a number prefix for the secondary axes, we would use the attribute sNumberPrefix.

There are two data series in the chart, the first representing the revenue, and the other containing data on the units sold. The second series, representing quantity, has a new attribute parentYAxis='S' that lets you configure whether this data series is plotted against the primary axis (parentYAxis='P', by default) or the secondary axis (parentYAxis='S'). In our example, as the units sold is to be plotted against the secondary axis, on the right, we have set parentYAxis='S', the other attributes remaining the same as before.

<dataset seriesName='Units Sold' parentYAxis='S' renderAs='Line' showValues='0' color='666666'>

If you were using a 3D chart such as MSColumn3DLineDY.swf, the renderAs attribute is not required, as the chart can only plot columns on the primary axis and lines on the secondary. Just setting parentYAxis='Y' plots the data series as a line against the secondary y-axis.