Creating Charts > Combination Chart

We will create a dual Y-axis combination chart to compare revenue with percentage of profit. We will plot a combination chart in which revenue is plotted as columns and profit percentage is plotted as a line, both revenue and profit percentage will be plotted along a separate Y axis. Data from the following table will be used for creating the combination chart.

QuarterRevenue Profit %
Quarter 1$100,000 30%
Quarter 2$120,000 35%
Quarter 3$110,000 33%
Quarter 4$108,000 34%

Following steps will guide you through the process of creating a Combination Chart:

  1. For creating a combination chart begin by, opening the interface using the 'Insert Composed Chart' button which is located on the 'FusionChartsforDW' toolbar. For all earlier examples that were discussed in this module we had used the 'Insert Simple Chart' button for opening the interface, however for creating a combination chart you must use the 'Insert Composed Chart' button.
  2. Create a table in the 'Data Grid' screen with 3 columns and 4 rows and then fill it up by referring the data table (above).
  3. Designate column 'A' as 'Categories' and column 'B' and 'C' as 'Series'. In the lower portion of the 'Data Grid' screen - name column 'B' as 'Revenue' and column 'C' as 'Profit %'.
  4. Switch to the 'Chart Selection' screen and select the '2D Dual Y' chart as your chart type.
  5. Notice - that a 'Render Series Options' section has been displayed in the 'Chart Selections' screen. In this section you can choose the type of data plot for each series and also select a Y axis for each series. The Y axis that is displayed on the left side is referred to as primary Y axis and the one which is displayed on the right side is referred to as secondary Y axis. For our example we will be plotting 'Revenue' as 'Columns' along the primary Y axis, and 'Profit %' as a 'Line' along the secondary Y axis. The following steps show how to choose a data plot and an axis:

    • For column 'B' - Click the 'Render As' button and select 'Columns' from the drop down list, next click the 'Render Axis' button and select 'Primary' from the drop down list.
    • For column 'C' - set the 'Render As' parameter to 'Line' and the 'Render Axis' parameter to 'Secondary'.
  6. In the 'Titles & Axia Nmaes' panel - enter 'Quarter' in the 'xAxisNmme' field, 'Revenue' in the 'PYAxisName' filed and 'Profit %' in the 'SYAxisName' field.
  7. Check the 'Show Advanced Options' check box which is located in the upper portion of the 'Chart Options' screen. Scroll down a bit and open the 'Chart Limits' panel by clicking on it and set the 'SYAxisMaxValue' to 100. By doing this we have set the maximum limit of the secondary Y axis to 100.
  8. Switch to the 'General Options' tab and set the chart name to 'myfirstCombiChart', and then set the height and width to 400 pixels and 300 pixels respectively.
  9. In the 'Caption, Subcaption' panel - enter ''Financial Analysis for 2008' in the 'Caption' field and 'Revenue vs Profit %' in the 'Subcaption' field.
  10. Check the 'Show Advanced Options' check boc which is located in the upper portion of the 'General Options' screen. Now, go to the 'Number Formatting and Scaling' panel and enter '$' into the 'NumberPrefix' field and '%' into the 'sNumberSuffix' field.
  11. Preview the chart using 'Open Preview' button and then click 'OK' to embed the chart into your web page.

You can now open the page in a browser to see your fist combination chart in action.