|
In this section, we'll show you how to use FusionCharts ASP class functions to plot charts from data contained in ASP arrays. We'll cover the following examples here:
- Creating a single series chart from data contained in an array
- Creating a multi-series chart from data contained in arrays
Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page.
The code examples contained in this page are present in Download Package > Code > ASPClass > ArrayExample folder. |
|
The code to create a single series chart is contained in SingleSeries.asp and can be listed as under: |
|
<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<%
%>
<!--#include file="../Includes/FusionCharts_Gen.asp"-->
<HTML>
<HEAD>
<TITLE>
FusionCharts V3 - Array Example using Single Series Column 3D Chart
</TITLE>
<%
%>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<BODY>
<h4>Plotting single series chart from data contained in Array.</h4>
<%
dim arrData(6,2)
arrData(0, 0) = "Product A"
arrData(1, 0) = "Product B"
arrData(2, 0) = "Product C"
arrData(3, 0) = "Product D"
arrData(4, 0) = "Product E"
arrData(5, 0) = "Product F"
arrData(0, 1) = 567500
arrData(1, 1) = 815300
arrData(2, 1) = 556800
arrData(3, 1) = 734500
arrData(4, 1) = 676800
arrData(5, 1) = 648500
dim FC
set FC = new FusionCharts
call FC.setChartType("Column3D")
call FC.setSize("600","300")
call FC.setSWFPath("../../FusionCharts/")
dim strParam
strParam="caption=Sales by Product;numberPrefix=$"
call FC.setChartParams(strParam)
call FC.addChartDataFromArray(arrData , "")
call FC.renderChart(false)
%>
</BODY>
</HTML>
|
|
In the above example:
- We have included FusionCharts_Gen.asp and FusionCharts.js.
- Stored the category names/labels in the first column of the 2-dimensional array arrData.
- Then we stored respective data values in the second column of the 2-dimensional array arrData.
- Created an instance of the FusionCharts ASP class for Column 3D chart with 600 pixels width, 300 pixels height.
- Set relative path of chart SWF file.
- Rendered chart using renderChart() function.
|
Please go through FusionCharts ASP Class API Reference section to know more about the functions used in the above code. |
|
When you view the chart, you'll see a chart as under: |
 |
|
Let us now create a multi-series chart from data contained in arrays. We create a file MultiSeries.asp with the following code: |
|
<%@LANGUAGE="VBSCRIPT"%>
<% option explicit %>
<%
%>
<!--#include file="../Includes/FusionCharts_Gen.asp"-->
<HTML>
<HEAD>
<TITLE>
FusionCharts V3 - Array Example using Multi Series Column 3D Chart
</TITLE>
<%
%>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
</HEAD>
<BODY>
<h4>Plotting multi-series chart from data contained in Array.</h4>
<%
dim arrCatNames(6)
arrCatNames(0) = "Product A"
arrCatNames(1) = "Product B"
arrCatNames(2) = "Product C"
arrCatNames(3) = "Product D"
arrCatNames(4) = "Product E"
arrCatNames(5) = "Product F"
dim arrData(2,8)
arrData(0,0) = "Current Year" '
arrData(0,1) = ""
arrData(0,2) = 567500
arrData(0,3) = 815300
arrData(0,4) = 556800
arrData(0,5) = 734500
arrData(0,6) = 676800
arrData(0,7) = 648500
arrData(1,0) = "Previous Year"
arrData(1,1) = ""
arrData(1,2) = 547300
arrData(1,3) = 584500
arrData(1,4) = 754000
arrData(1,5) = 456300
arrData(1,6) = 754500
arrData(1,7) = 437600
dim FC
set FC = new FusionCharts
call FC.setChartType("MSColumn3D")
call FC.setSize("600","300")
call FC.setID("FC1")
call FC.setSWFPath("../../FusionCharts/")
dim strParam
strParam="caption=Sales by Product;numberPrefix=$;rotateValues=1"
call FC.setChartParams(strParam)
call FC.addChartDataFromArray(arrData, arrCatNames)
call FC.renderChart(false)
%>
</BODY>
</HTML>
|
|
Let's analyze what we have done in the code above:
- We included FusionCharts_Gen.asp class and FusionCharts.js class.
- We created 2 arrays - one single dimensional aray and one 2-dimensional array. The single dimensional array arrCatNames stores category names. The 2-dimensional array arrData stores dataset name, dataset parameters and values in its each row.
Note: dataset parameters separated by delimiters should be stored as string. It is optional for multi series charts, but compulsory for combination charts.
- We created FusionCharts ASP class object for Multi-series Column 3D chart with 600 pixels width, 300 pixels height.
- We set relative path of chart SWF file using setSwfPath() function.
- We stored delimiter separated chart attributes in strParam variable and passed this variable through setChartParams() function to set chart attributes.
- Next, we called addChartDataFromArray() function and passed arrData and arrCatNames arrays through it. The arrays should be passed in this order only, i.e., $arrData is to be the first parameter and arrCatNames the second.
- Finally we rendered the chart using renderChart() function.
|
Please go through FusionCharts ASP Class API Reference section to know more about the functions used in the above code. |
|
When you view the chart, you'll see a chart as under: |
 |
In Download Package > Code > ASPClass > ArrayExample, we've more example codes to create Stacked and Combination Charts too, which have not been explained here, as they're similar in concept. You can directly see the code if you want to. |