FusionCharts v3 Documentation

You are viewing documentation for an older version. For current documentation - click here.

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 an ID, using setID() function, if one wishes to interact with the chart later using JavaScript APIs like setDataXML(), setDataURL(), print(), saveAsImage() etc.