## Using FusionCharts ASP Class > Charting Data from Array
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.
Creating a single series chart from data contained in arrays
The code to create a single series chart is contained in SingleSeries.asp and can be listed as under:
<%@LANGUAGE="VBSCRIPT"%> <% option explicit %> <% ' We've included ../Includes/FusionCharts_Gen.asp, which contains FusionCharts ASP Class ' to help us easily embed the charts. %> <!--#include file="../Includes/FusionCharts_Gen.asp"--> <HTML> <HEAD> <TITLE> FusionCharts V3 - Array Example using Single Series Column 3D Chart </TITLE> <% 'You need to include the following JS file, if you intend to embed the chart using JavaScript. 'Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer 'When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors. %> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> </HEAD> <BODY> <h4>Plotting single series chart from data contained in Array.</h4> <% 'In this example, using FusionCharts ASP Class we plot a single series chart 'from data contained in an array. 'The array needs to have two columns - first one for data labels/names 'and the next one for data values. 'Let's store the sales data for 6 products in our array). We also store 'the name of products. 'Store Name of Products 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" 'Store sales data 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 ' Create First FusionCharts ASP class object set FC = new FusionCharts ' Set chart type to Column 3D call FC.setChartType("Column3D") ' Set chart size call FC.setSize("600","300") ' Set Relative Path of swf file. call FC.setSWFPath("../../FusionCharts/") dim strParam ' Define chart attributes strParam="caption=Sales by Product;numberPrefix=$" ' Set chart attributes call FC.setChartParams(strParam) ' call FusionCharts ASP Class Function to add data from the array call FC.addChartDataFromArray(arrData , "") ' Render the chart 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:
Creating a multi-series chart from data contained in arrays
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 %> <% ' We've included ../Includes/FusionCharts_Gen.asp, which contains FusionCharts ASP Class ' to help us easily embed the charts. %> <!--#include file="../Includes/FusionCharts_Gen.asp"--> <HTML> <HEAD> <TITLE> FusionCharts V3 - Array Example using Multi Series Column 3D Chart </TITLE> <% 'You need to include the following JS file, if you intend to embed the chart using JavaScript. 'Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer 'When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors. %> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> </HEAD> <BODY> <h4>Plotting multi-series chart from data contained in Array.</h4> <% 'In this example, using FusionCharts ASP Class we plot 'we plot a mulitseries chart from data contained in arrays ' The arrays need to be of the following structure : ' 1. Array to store Category Namesnames : ' ' A single dimensional array storing the category names ' ' 2. A 2 Dimensional Array to store data values ' ** Each row will store data for 1 dataset ' ' Column 1 will store : Dataset Series Name. ' Column 2 will store : Dataset attributes ' (as list separated by delimiter.) ' Column 3 and rest will store : values of the dataset 'Let's store the sales data for 6 products in our array. We also store the name of products. 'Store Name of Products as category lables 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" 'Store sales data for current year dim arrData(2,8) arrData(0,0) = "Current Year" ' Dataset Series Name arrData(0,1) = "" ' Dataset Parameters arrData(0,2) = 567500 arrData(0,3) = 815300 arrData(0,4) = 556800 arrData(0,5) = 734500 arrData(0,6) = 676800 arrData(0,7) = 648500 'Store sales data for previous year 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 ' Create FusionCharts ASP Class object for multiseies column3d chart dim FC ' Create First FusionCharts ASP class object set FC = new FusionCharts ' Set chart type to Multi Series Column 3D call FC.setChartType("MSColumn3D") ' Set chart size call FC.setSize("600","300") ' Set chart ID call FC.setID("FC1") ' Set Relative Path of swf file. call FC.setSWFPath("../../FusionCharts/") dim strParam ' Define chart attributes strParam="caption=Sales by Product;numberPrefix=$;rotateValues=1" ' Set chart attributes call FC.setChartParams(strParam) ' Pass the 2 arrays storing data and category names to ' FusionCharts ASP Class function addChartDataFromArray call FC.addChartDataFromArray(arrData, arrCatNames) ' Render Second Chart with JS Embedded Method 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.