## FusionCharts ASP Class API > Creating multiple charts in one page
While developing web pages or applications, we may need to display multiple charts on the same page. For example, reporting Weekly Sales Quantity along with Revenue gives us a better insight. Let's see how we can accomplish this using FusionCharts ASP Class. The code below generates two Column 3D charts on the same page.
Before you go further with this page, we recommend you to see the previous page "Creating First Chart " as we start off from the concepts explained in that page.
<%@LANGUAGE="VBSCRIPT"%> <% ' Include FusionCharts ASP Class %> <!--#include file="../Class/FusionCharts_Gen.asp"--> <% '---------- Configuring First Chart ---------- dim FC ' Create First FusionCharts ASP class object set FC = new FusionCharts ' Set chart type to Column3D Call FC.setChartType("Column3D") ' Set chart size Call FC.setSize("300","250") ' set the relative path of the swf file Call FC.setSWFPath("../FusionCharts/") dim strParam ' Define chart attributes strParam="caption=Weekly Sales;subcaption=Revenue;xAxisName=Week;yAxisName=Revenue;numberPrefix=$" ' Set chart attributes Call FC.setChartParams(strParam) ' Add chart values and category names for the First Chart Call FC.addChartData("40800","Label=Week 1", "") Call FC.addChartData("31400","Label=Week 2", "") Call FC.addChartData("26700","Label=Week 3", "") Call FC.addChartData("54400","Label=Week 4", "") '--------------------------------------------------------- '---------- Configuring Second Chart ---------- dim FC2 ' Create another FusionCharts ASP class object set FC2 = new FusionCharts ' Set chart type of the second chart as column 3D Call FC2.setChartType("Column3D") ' Set chart size Call FC2.setSize("300","250") ' set the relative path of the swf file Call FC2.setSWFPath("../FusionCharts/") ' Define chart attributes strParam="caption=Weekly Sales;subcaption=Quantity;xAxisName=Week;yAxisName=Quantity;numberSuffix= U" ' Set chart attributes Call FC2.setChartParams(strParam) ' Add chart values and category names for the second chart Call FC2.addChartData("32","Label=Week 1", "") Call FC2.addChartData("35","Label=Week 2", "") Call FC2.addChartData("26","Label=Week 3", "") Call FC2.addChartData("44","Label=Week 4", "") ' Set Chart Caching Off to Fix Caching error in FireFox Call FC2.setOffChartCaching(true) '//-------------------------------------------------------- %> <html> <head> <title>Multiple Charts Using FusionCharts ASP Class</title> <script language='javascript' src='../FusionCharts/FusionCharts.js'></script> </head> <body> <% ' Render First Chart with JS embedding Method Call FC.renderChart(false) ' Render Second Chart with JS embedding Method Call FC2.renderChart(false) %> </body> </html>
Let's go through the steps involved in this code: Include FusionCharts_Gen.asp. Create object for the First Chart that shows weekly revenue report. Call FC = new FusionCharts Specify the chart type Call FC2.setChartType("Column3D") Specify the chart size Call FC2.setChartSize("300","250") Set relative path for the SWF file. Call FC.setSWFPath("../FusionCharts/") Set attributes for the first chart using setChartParams() function. strParam="caption=Weekly Sales;subcaption=Revenue;xAxisName=Week;yAxisName=Revenue;numberPrefix=$"; Call FC.setChartParams(strParam); Add data values for this chart. Call FC.addChartData("40800","label=Week 1","") Call FC.addChartData("31400","label=Week 2","") Call FC.addChartData("26700","label=Week 3","") Call FC.addChartData("54400","label=Week 4","") Now, the same steps are repeated for the Second Chart, i.e., the 'Units Sold' chart. First, create object for the chart. Call FC = new FusionCharts Specify the chart type Call FC2.setChartType("Column3D") Specify the chart size Call FC2.setChartSize("300","250") Set relative path for the SWF file. Call FC2.setSWFPath("FusionCharts/") Set attributes for the first chart using setChartParams() function. strParam="caption=Weekly Sales;subcaption=Quantity;xAxisName=Week;yAxisName=Quantity;decimalPrecision=0"; Call FC2.setChartParams(strParam); Add data values for the second chart. Call FC2.addChartData("32","label=Week 1","") Call FC2.addChartData("35","label=Week 2","") Call FC2.addChartData("26","label=Week 3","") Call FC2.addChartData("44","label=Week 4","") Include FusionCharts.js. Finally, render both the charts using renderChart() function. Call FC.renderChart(false) Call FC2.renderChart(false)
Please go through FusionCharts ASP Class API Reference section to know more about the functions used in the above code.
Here is the output. Both the charts have been rendered on the same page.
NOTE: ASP automatically generates an ID using Session and assigns it to the chart. This id is generated using a counter variable kept in session. Hence, one every page refresh new ID would be assigned to chart. One should provide anID, using setID() function, if one wishes to interact with the chart later using JavaScript APIs like setDataXML(), setDataURL(), print(), saveAsImage() etc.