You are viewing documentation for an older version. For current documentation - click here.
FusionCharts ASP Class API > Creating Scatter - Bubble Chart

Let's create a simple scatter chart that will visually display the Server Performance with reference to Server-Load against Response Time. Server Load and Response Time will be plotted against X-axis and Y-axis respectively.

The sample data we intend to plot are tabularized as under:
Server1 Server2
Server Load(TPS) Response Time(Sec) Server Load(TPS) Response Time(Sec)
21 2.4 23 1.4
32 3.5 29 1.5
43 2.5 33 1.5
48 4.1 41 1.1

Let's see how to use FusionCharts ASP Class to plot this data into a Scatter 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 Scatter Chart   
Call FC.setChartType("Scatter")
    '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=Server Performance;yAxisName=Response Time (sec);xAxisName=Server Load (TPS)"  
           'Set chart attributes
           Call FC.setChartParams(strParam)
           'Add Category, 1st parameter take label and 2nd parameter takes x axis value 
           'as part of parameter list 
           Call FC.addCategory("10","x=10;showVerticalLine=1","")
           Call FC.addCategory("20","x=20;showVerticalLine=1","")
           Call FC.addCategory("30","x=30;showVerticalLine=1","")
           Call FC.addCategory("40","x=40;showVerticalLine=1","")
           Call FC.addCategory("50","x=50","")
           'Add a new dataset 
           Call FC.addDataSet("Server 1","anchorRadius=6")
           'Add chart data for the above dataset
           'where 1st parameter for X axis value
           '2nd parameter take Y axis as parameter list
           'e.g y=27
           Call FC.addChartData("21","y=2.4","")
           Call FC.addChartData("32","y=3.5","")
           Call FC.addChartData("43","y=2.5","")
           Call FC.addChartData("48","y=4.1","")
           'Add another dataset
           Call FC.addDataSet("Server 2","anchorRadius=6")
           'Add chart data for the above dataset
           'where 1st parameter for X axis value
           '2nd parameter take Y axis as parameter list
           'e.g y=30
           Call FC.addChartData("23","y=1.4","")
           Call FC.addChartData("29","y=1.5","")
           Call FC.addChartData("33","y=1.5","")
           Call FC.addChartData("41","y=1.1","") 
  %>
  <html>
      <head>
         <title>Scatter Chart : 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>

Let's analyze the steps involved in the above code:

  • We include FusionCharts_Gen.asp in the program. This file contains FusionCharts ASP Class codes. 

    <!--#include file="../Class/FusionCharts_Gen.asp"-->

  • We create a Scatter chart object, set its size and SWF path. 

    set FC = new FusionCharts
Call FC.setChartType("Scatter")            
    Call FC.setSize("300","250")
Call FC.setSWFPath("../FusionCharts/")

  • We store all desired chart attributes in the strParam variable and set chart attributes using setChartParams() function.

    Call FC.setChartParams(strParam)

  • Now, we add X Axis categories using addCategory() function. The first parameter takes label and the second parameter takes x axis value and option to show a vertical line along with this category.

    Call FC.addCategory("10","x=10;showVerticalLine=1","")
Call FC.addCategory("20","x=20;showVerticalLine=1","")
Call FC.addCategory("30","x=30;showVerticalLine=1","")
Call FC.addCategory("40","x=40;showVerticalLine=1","")
Call FC.addCategory("50","x=50","")

  • Thereafter, we add a dataset and provide chart data with addChartData() function. Please note that for Scatter chart the first parameter would take x value and the second parameter takes y value of a dataplot as an attribute. We also can pass other dataplot attributes in the second parameter. The attributes must be delimiter separated.

    Call FC.addDataSet("Server 1","anchorRadius=6")
Call FC.addChartData("21","y=2.4","")
Call FC.addChartData("32","y=3.5","")
Call FC.addChartData("43","y=2.5","")
Call FC.addChartData("48","y=4.1","")

  • Now, we create another dataset and provide chart data with addChartData() function.

    Call FC.addDataSet("Server 2","anchorRadius=6")
Call FC.addChartData("23","y=1.4","")
Call FC.addChartData("29","y=1.5","")
Call FC.addChartData("33","y=1.5","")
Call FC.addChartData("41","y=1.1","")

  • Finally, we include FusionCharts.js - FusionCharts JavaScript Embedding Class and

  • Display the chart using renderChart() function.

    Call FC.renderChart(false)

Here is the Scatter chart that our FusionCharts ASP Class renders:

Please go through FusionCharts ASP Class API Reference section to know more about the functions used in the above code.
Creating the Bubble Chart

Now, let's create yet another chart called Bubble chart that will visually display the Revenue earned in two consecutive months(Previous Month and Current Month) for the No. of products. It will also display Market share of the related No. of products.

The sample data that we intend to plot can be tabularized as under:
Previous Month Current Month
No. of Products Revenue Market Share No. of Products Revenue Market Share
20 72000 8 18 22000 3
43 42000 5 35 62000 5
70 90000 2 50 55000 10
90 75000 4 70 25000 3

Let's see how to use FusionCharts ASP Class to plot this data into a Bubble 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 Bubble Chart
Call FC.setChartType("bubble")
    ' 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=Monthly Sales;xAxisName=Number of Products;
           yAxisName=Revenue;numberPrefix=$"
          ' Set chart attributes
           Call FC.setChartParams(strParam)
          ' Add Category, 1st parameter take label and 2nd parameter takes x axis value 
          ' as parameter list 
           Call FC.addCategory("0","x=0;showVerticalLine=1","")
           Call FC.addCategory("20","x=20;showVerticalLine=1","")
           Call FC.addCategory("40","x=40;showVerticalLine=1","")
           Call FC.addCategory("60","x=60;showVerticalLine=1","")
           Call FC.addCategory("80","x=80;showVerticalLine=1","")
           Call FC.addCategory("100","x=100;showVerticalLine=1","")
          ' Add a new dataset
           Call FC.addDataSet("Previous Month","")
          ' Add chart data for the above dataset
          ' where 1st parameter for X axis value
          ' 2nd parameter take Y and Z axis as parameter list
          ' e.g y=12200;z=10
           Call FC.addChartData("20","y=72000;z=8","")
           Call FC.addChartData("43","y=42000;z=5","")
           Call FC.addChartData("70","y=90000;z=2","")
           Call FC.addChartData("90","y=75000;z=4","")
          ' Add another dataset
           Call FC.addDataSet("Current Month","")
          ' Add chart data for the above dataset
          ' where 1st parameter for X axis value
          ' 2nd parameter take Y and Z axis as parameter list
          ' e.g y=60000;z=20
           Call FC.addChartData("18","y=22000;z=3","")
           Call FC.addChartData("35","y=62000;z=5","")
           Call FC.addChartData("50","y=55000;z=10","")
           Call FC.addChartData("70","y=25000;z=3","")
        %>
     <html>
       <head>
         <title>Bubble 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>

Let's analyze the steps involved in the above code:

  • We include FusionCharts_Gen.asp.

  • Then, we create a Bubble chart object, set its size and SWF path. 

    set FC = new FusionCharts
Call FC.setChartType("Bubble")
Call FC.setSize("450","350")
Call FC.setSWFPath("../FusionCharts/")

  • We store all desired chart attributes in the strParam variable and set chart attributes using setChartParams() function.

    Call FC.setChartParams(strParam)

  • Now, we add X Axis categories using addCategory() function. The first parameter takes label and the second parameter takes x axis value and option to show a vertical line along with this category.

    Call FC.addCategory("0","x=0;showVerticalLine=1","")
Call FC.addCategory("20","x=20;showVerticalLine=1","")
Call FC.addCategory("40","x=40;showVerticalLine=1","")
Call FC.addCategory("60","x=60;showVerticalLine=1","")
Call FC.addCategory("80","x=80;showVerticalLine=1","")
Call FC.addCategory("100","x=100;showVerticalLine=1","")

  • Thereafter, we add a dataset and provide chart data with addChartData() function. Please note that for Bubble chart the first parameter would take x value and the second parameter takes y and z values of a dataplot as attribute list separated by delimiter. We also can pass other dataplot attributes in the second parameter. The attributes must be delimiter separated.

    Call FC.addDataSet("Previous Month","")
Call FC.addChartData("20","y=72000;z=8","")
Call FC.addChartData("43","y=42000;z=5","")
Call FC.addChartData("70","y=90000;z=2","")
Call FC.addChartData("90","y=75000;z=4","")

  • Now, we add another dataset and use addChartData() function to add data to the dataset.

    Call FC.addDataSet("Current Month","")
Call FC.addChartData("18","y=22000;z=3","")
Call FC.addChartData("35","y=62000;z=5","")
Call FC.addChartData("50","y=55000;z=10","")
Call FC.addChartData("70","y=25000;z=3","")

  • Finally, we include FusionCharts.js - FusionCharts JavaScript Embedding Class and

  • Display the chart using renderChart() function.

    Call FC.renderChart(false)

Here is the Bubble chart that our FusionCharts ASP Class renders: