|
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 file="../Class/FusionCharts_Gen.asp"-->
<%
dim FC
set FC = new FusionCharts
Call FC.setChartType("Scatter")
Call FC.setSize("300","250")
Call FC.setSWFPath("../FusionCharts/")
dim strParam
strParam="caption=Server Performance;yAxisName=Response Time (sec);xAxisName=Server Load (TPS)"
Call FC.setChartParams(strParam)
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","")
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","")
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","")
%>
<html>
<head>
<title>Scatter Chart : FusionCharts ASP Class</title>
<script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
</head>
<body>
<%
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. |
|
|
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 Nonth |
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 file="../Class/FusionCharts_Gen.asp"-->
<%
dim FC
set FC = new FusionCharts
Call FC.setChartType("bubble")
Call FC.setSize("450","350")
Call FC.setSWFPath("../FusionCharts/")
dim strParam
strParam="caption=Monthly Sales;xAxisName=Number of Products;yAxisName=Revenue;numberPrefix=$"
Call FC.setChartParams(strParam)
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","")
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","")
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","")
%>
<html>
<head>
<title>Bubble Chart : Using FusionCharts ASP Class</title>
<script language='javascript' src='../FusionCharts/FusionCharts.js'></script>
</head>
<body>
<%
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: |
|
 |