## FusionCharts ASP Class API > Creating Multi-series Stacked 2D Line Dual Y Chart
In this section we will show you how to create a complex chart - Multi-series Stacked 2D Line Dual Y Chart. Here we calculate the cost as Percentage of Revenue for three products A, B and C.
Let's examine the following data for a multi-series Stacked 2D Line Dual Y chart.
Year | Product A(1) | Product A(2) | Product B | Cost as % of Revenue
2001 | 30 | 30 | 30 | 57
2002 | 26 | 26 | 26 | 68
2003 | 29 | 29 | 29 | 79
2004 | 31 | 31 | 31 | 73
2005 | 34 | 34 | 34 | 80
The chart that would be created using this data would look like the image shown below:
Here we need to create: One primary dataset to stack up Revenue values for Product A(1) and Product A(2). The values would be scaled to the Primary Y Axis on the left. Another promary dataset to show Revenue values for Product B. The values would be scaled to the Primary Y Axis on the left. A linset which would be automatically mapped to Secondary Y Axis.
Before you go further with this page, we recommend you to please see the previous page "Creating First Chart " as we start off from concepts explained in that page.
Let's go through the code that builds this 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 Multiseries Stacked Column2D Line DY Call FC.setChartType("MSStackedColumn2DLineDY") ' 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=Annual Revenue;rotateValues =1;xAxisName=Year;PYAxisName=Revenue;SYAXisName=Cost as %25 of Revenue;numberPrefix=$;numberSuffix=M;sNumberSuffix=%25;SYAxisMinValue=0;SYAxisMaxValue=100;showValues=0;useRoundEdges=1;showSum=1" ' Set chart attributes Call FC.setChartParams(strParam) ' Add category names Call FC.addCategory("2001","","") Call FC.addCategory("2002","","") Call FC.addCategory("2003","","") Call FC.addCategory("2004","","") Call FC.addCategory("2005","","") ' Add Multi-series Dataset Call FC.createMSStDataset() ' Add Multi-series dataset with in dataset Call FC.addMSStSubDataset("Product A(1)", "") ' Add set data for plotting the chart Call FC.addChartData("30","","") Call FC.addChartData("26","","") Call FC.addChartData("29","","") Call FC.addChartData("31","","") Call FC.addChartData("34","","") ' Add Next Multi-series dataset with in dataset Call FC.addMSStSubDataset("Product A(2)", "") ' Add set data for plotting the chart Call FC.addChartData("30","","") Call FC.addChartData("26","","") Call FC.addChartData("29","","") Call FC.addChartData("31","","") Call FC.addChartData("34","","") ' Add Multi-series Dataset Call FC.createMSStDataset() ' Add Multi-series dataset with in dataset Call FC.addMSStSubDataset("Product B", "") ' Add set data for plotting the chart Call FC.addChartData("30","","") Call FC.addChartData("26","","") Call FC.addChartData("29","","") Call FC.addChartData("31","","") Call FC.addChartData("34","","") ' Add Multi-series lineset for showing lines Call FC.addMSLineset("Cost as %25 of Revenue","lineThickness=4") ' Add set data with in lineset Call FC.addMSLinesetData("57","","") Call FC.addMSLinesetData("68","","") Call FC.addMSLinesetData("79","","") Call FC.addMSLinesetData("73","","") Call FC.addMSLinesetData("80","","") %> <html> <head> <title>Multiseries Stacked Column2D Line DY 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, we're doing the following: We include FusionCharts_Gen.asp. We create an object for Multiseries Stacked Column2D Line DY chart and set relative file path to the SWF file. set FC = new FusionCharts Call FC.setChartType("MSStackedColumn2DLineDY") Call FC.setSize("450","350") Call FC.setSWFPath("../FusionCharts/") We store chart attributes in strParam variable and pass it to setChartParams() function. It sets the chart attributes. Next, we add the category names separately using addCategory() function. Call FC.addCategory("2001","","") Call FC.addCategory("2002","","") Call FC.addCategory("2003","","") Call FC.addCategory("2004","","") Call FC.addCategory("2005","","") Let us now create the primary dataset and sub-datasets for Primary Y Axis. For this, we first create a multi-series primary dataset using createMSStDataset()for multi-series stacked column 2D line DY chart. Please note that all multi-series primary datasets would be mapped to Primary Y Axis on the left. Call FC.createMSStDataset() We add Multi-series sub-dataset within the primary dataset declared above. We use addMSStSubDataset() to do the task. It takes two patrameters. First parameter takes the series name. The second parameter can take delimiter dataset attributes which we have kept blank in this example. Call FC.addMSStSubDataset("Product A(1)", "") We provide chart data specific to the above dataset. Remember to provide chart data just after the dataset is defined. Call FC.addChartData("30","","") Call FC.addChartData("26","","") Call FC.addChartData("29","","") Call FC.addChartData("31","","") Call FC.addChartData("34","","") Please note that as we have 5 categories, we have entered 5 values for the dataset 'Product A'. Likewize, we create anoher sub-dataset for product A(1) and provide the data values. Call FC.addMSStSubDataset("Product B", "") Call FC.addChartData("30","","") Call FC.addChartData("26","","") Call FC.addChartData("29","","") Call FC.addChartData("31","","") Call FC.addChartData("34","","") We again create another primary dataset and add add a sub-dataset for Product B and add respective data values. Call FC.createMSStDataset() Call FC.addMSStSubDataset("Product B", "") Call FC.addChartData("30","","") Call FC.addChartData("26","","") Call FC.addChartData("29","","") Call FC.addChartData("31","","") Call FC.addChartData("34","","") Now, we create a lineset. All linesets would be automatically mapped to Secondary Y Axis. You can create any number of linesets using this process. Call FC.addMSLineset("Cost as % of Revenue","lineThickness=4") Next, we add data to the lineset using addMSLinesetData(). Call FC.addMSLinesetData("57","","") Call FC.addMSLinesetData("68","","") Call FC.addMSLinesetData("79","","") Call FC.addMSLinesetData("73","","") Call FC.addMSLinesetData("80","","") We add FusionCharts.js. Finally, we 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.
And the Multi-series Stacked 2D Line Dual Y chart is ready!