Combination chart has two Y-axes. The Y-axis on the left hand side is called Primary Y-Axis and that on the right hand side is called Secondary Y-Axis. Combination charts are used when we intend to compare two different types of data on the same chart, e.g., if we want to plot Weekly Sales Revenue of two consecutive months and total units sold on the same chart, we have to use a Combination Chart. See the image below and note that the two Y-axes are representing different data units.
Let's add some more data to the existing Table for Multi-series chart. We would add a column that tabulates Total Quantity Sales.
| Week | Current Month | Previous Month | |
|
Sales |
Sales |
Total Quantity | |
| Week 1 |
$40800 |
$38300 |
64 |
| Week 2 |
$31400 |
$28400 |
70 |
| Week 3 |
$26700 |
$15700 |
52 |
| Week 4 |
$54400 |
$48100 |
81 |
Before you go further with this page, we recommend you to please see the previous pages Creating First Chart & Creating Multi-series chart as we start off from concepts explained in that page.
Here is the code that builds up this Combination chart:
<%@LANGUAGE="VBSCRIPT"%>
<%
'Include FusionCharts ASP Class
%>
<!--#include file="../Class/FusionCharts_Gen.asp"-->
<%
dim FC
'Create FusionCharts ASP class object
set FC = new FusionCharts
'Set chart type to Column 3D + Line Dual Y-Axis Combination Chart
Call FC.setChartType("MSColumn3DLineDY")
'Set chart size
Call FC.setSize("450","350")
'Set the relative path of the SWF file
Call FC.setSWFPath("../FusionCharts/")
dim strParam
'Define chart attributes
strParam="caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;
pYAxisName=Revenue;sYAxisName=Total Quantity;
numberPrefix=$;sNumberSuffix= U"
'Set chart attributes
Call FC.setChartParams(strParam)
'Add category names
Call FC.addCategory("Week 1", "", "")
Call FC.addCategory("Week 2", "", "")
Call FC.addCategory("Week 3", "", "")
Call FC.addCategory("Week 4", "", "")
'Add a new dataset with dataset parameters
Call FC.addDataset("This Month","showValues=0")
'Add chart data for the above dataset
Call FC.addChartData("40800", "", "")
Call FC.addChartData("31400", "", "")
Call FC.addChartData("26700", "", "")
Call FC.addChartData("54400", "", "")
'Add another dataset with dataset parameters
Call FC.addDataset("Previous Month","showValues=0")
'Add chart data for the second dataset
Call FC.addChartData("38300", "", "")
Call FC.addChartData("28400", "", "")
Call FC.addChartData("15700", "", "")
Call FC.addChartData("48100", "", "")
'Add third dataset for the secondary axis
Call FC.addDataset("Total Quantity","parentYAxis=S")
'Add data values for the secondary axis
Call FC.addChartData("64", "", "")
Call FC.addChartData("70", "", "")
Call FC.addChartData("52", "", "")
Call FC.addChartData("81", "", "")
%>
<html>
<head>
<title>Column 3D + Line Dual Y-Axis Combination Chart Using FusionCharts ASP Class</title>
<script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
</head>
<body>
<%
'Render Chart with JS embedding Method
Call FC.renderChart(false)
%>
</body>
</html> As you can see in the above code, the process of creating Combination charts Multi-Series charts is same. Here also we use multiple datasets. Some datasets are specified for primary Y-Axis and some for the secondary Y-Axis. We need to specify which dataset belongs to which Y-Axis. Let's see what we have done to render a combination chart. The steps are mentioned below.
- We include FusionCharts_Gen.asp.
- We create Multiseries Column 3D - Line Combination chart object and set relative path to SWF file.
set FC = new FusionCharts Call FC.setChartType("MSColumn3DLineDY") Call FC.setChartSize("450","350") Call FC->setSWFPath("../FusionCharts/")
- Next, we store chart attributes in strParam variable :
strParam="caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;pYAxisName=Revenue;sYAxisName=Total Quantity;numberPrefix=$;sNumberSuffix= U";
Combination charts have 2 Y-axis -Parent (p) and Secondary (s). So we have specified names for both of them. Moreover, using sNumberSuffix, we set the number suffix for secondary Y Axis.
- We set these chart attributes calling setChartParams()
Call FC.setChartParams(strParam)
- Next, like in Multi-series charts, we add categories :
Call FC.addCategory("Week 1","","") Call FC.addCategory("Week 2","","") Call FC.addCategory("Week 3","","") Call FC.addCategory("Week 4","","")
- We add the first dataset 'This Month' for primary Y-Axis. If we do not specify the Y-Axis the dataset adheres to, the chart automatically sets it to primary Y-Axis.
Call FC.addDataset("This Month","showValues=0"); Call FC.addChartData("40800","","") Call FC.addChartData("31400","","") Call FC.addChartData("26700","","") Call FC.addChartData("54400","","")
- Again, we add another dataset 'Previous Month' for primary Y-Axis and set its attributes and data values.
Call FC.addDataset("Previous Month","showValues=0") Call FC.addChartData("38300","","") Call FC.addChartData("28400","","") Call FC.addChartData("15700","","") Call FC.addChartData("48100","","")
- Now, we add the third dataset, this one for Secondary Y-axis and its data values. Here, we specify the Y-Axis by passing the dataset attribute parentYAxis=S.
Call FC.addDataset("Total Quantity","parentYaxis=S") Call FC.addChartData("64","","") Call FC.addChartData("70","","") Call FC.addChartData("52","","") Call FC.addChartData("81","","")
- Finally, we add FusionCharts.js and
- Render the chart :
Call FC.renderChart(false)
Please go through FusionCharts ASP Class API Reference section to know more about the functions used in the above code.
This code renders the Combination Chart that we needed.