<%@LANGUAGE="VBSCRIPT"%>
<%
%>
<!--#include file="../Class/FusionCharts_Gen.asp"-->
<%
dim FC
set FC = new FusionCharts
Call FC.setChartType("MSColumn3DLineDY")
Call FC.setSize("450","350")
Call FC.setSWFPath("../FusionCharts/")
dim strParam
strParam="caption=Weekly Sales;subcaption=Comparison;xAxisName=Week;pYAxisName=Revenue;sYAxisName=Total Quantity;numberPrefix=$;sNumberSuffix= U"
Call FC.setChartParams(strParam)
Call FC.addCategory("Week 1", "", "")
Call FC.addCategory("Week 2", "", "")
Call FC.addCategory("Week 3", "", "")
Call FC.addCategory("Week 4", "", "")
Call FC.addDataset("This Month","showValues=0")
Call FC.addChartData("40800", "", "")
Call FC.addChartData("31400", "", "")
Call FC.addChartData("26700", "", "")
Call FC.addChartData("54400", "", "")
Call FC.addDataset("Previous Month","showValues=0")
Call FC.addChartData("38300", "", "")
Call FC.addChartData("28400", "", "")
Call FC.addChartData("15700", "", "")
Call FC.addChartData("48100", "", "")
Call FC.addDataset("Total Quantity","parentYAxis=S")
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>
<%
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)
|