## Using FusionCharts with JSP > Charting Data from an Array
In this section, we'll show you how to use FusionCharts and JSP to plot charts from data contained in JSP arrays. We'll cover the following examples here: Creating a single series chart from data contained in arrays 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 > JSP > ArrayExample folder. Creating a single series chart from data contained in arrays The code to create a single series chart is contained in SingleSeries.jsp and can be listed as under: <%@ page import="com.infosoftglobal.fusioncharts.FusionChartsHelper"%> <HTML> <HEAD> <TITLE>FusionCharts Free - Array Example using Single Series Column3D 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> <style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } --> </style> </HEAD> <BODY> <CENTER> <h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> Examples</h2> <h4>Plotting single series chart from data contained in Array.</h4> <% /*In this example, we plot a single series chart from data contained in an array. The array will have two columns - first one for data label 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. */ String[][] arrData = new String[6][2]; //Store Name of Products 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"; // we will use the FusionChartsHelper class for colors FusionChartsHelper colorHelper= new FusionChartsHelper(); //Now, we need to convert this data into XML. We convert using string concatenation. String strXML; int i=0; //Initialize <graph> element strXML = "<graph caption='Sales by Product' numberPrefix='$' formatNumberScale='0' decimalPrecision='0'>"; //Convert data to XML and append for(i=0;i<arrData.length;i++){ strXML = strXML + "<set name='" +arrData[i][0] + "' value='" + arrData[i][1] + "' color='" + colorHelper.getFCColor() + "'/>"; } //Close <graph> element strXML = strXML + "</graph>"; //Create the chart - Column 3D Chart with data contained in strXML %> <jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true"> <jsp:param name="chartSWF" value="../../FusionCharts/FCF_Column3D.swf" /> <jsp:param name="strURL" value="" /> <jsp:param name="strXML" value="<%=strXML %>" /> <jsp:param name="chartId" value="productSales" /> <jsp:param name="chartWidth" value="600" /> <jsp:param name="chartHeight" value="300" /> <jsp:param name="debugMode" value="false" /> <jsp:param name="registerWithJS" value="false" /> </jsp:include> <BR> <BR> <a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR><H5 ><a href='../default.htm'>&laquo; Back to list of examples</a></h5> </CENTER> </BODY> </HTML> In the above example, we first include FusionCharts.js file to enable us embed the chart using JavaScript. We also include FusionChartsRenderer.jsp wherever we want to render the chart. We import FusionChartsHelper class to obtain colors for the columns. Thereafter, we define an JSP array arrData to store sales data for 6 different products. The array has two dimensions - first one for data label and the next one for data values. We define a variable strXML to store the entire XML data. To build the XML, we iterate through the array and use string concatenation. Finally, we render the chart by including FusionChartsRenderer.jsp and passing strXML and other parameters. 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.jsp with the following code: <HTML> <HEAD> <TITLE>FusionCharts Free - 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> <style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } --> </style> </HEAD> <BODY> <CENTER> <h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> Examples</h2> <h4>Plotting multi-series chart from data contained in Array.</h4> <% /*In this example, we plot a multi series chart from data contained in an array. The array will have three columns - first one for data label (product) and the next two for data values. The first data value column would store sales information for current year and the second one for previous year. Let's store the sales data for 6 products in our array. We also store the name of products. */ String[][] arrData = new String[6][3]; //Store Name of Products 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"; //Store sales data for previous year arrData[0][2]= "547300"; arrData[1][2] = "584500"; arrData[2][2]= "754000"; arrData[3][2]= "456300"; arrData[4][2]= "754500"; arrData[5][2]= "437600"; String strXML = "<graph caption='Sales by Product' numberPrefix='$' formatNumberScale='1' decimalPrecision='0' >"; //Initialize <categories> element - necessary to generate a multi-series chart String strCategories = "<categories>"; //Initiate <dataset> elements String strDataCurr = "<dataset seriesName='Current Year' color='AFD8F8'>"; String strDataPrev = "<dataset seriesName='Previous Year' color='F6BD0F'>"; //Iterate through the data for(int i=0;i<arrData.length;i++){ //Append <category name='...' /> to strCategories strCategories = strCategories + "<category name='" + arrData[i][0] + "' />"; //Add <set value='...' /> to both the datasets strDataCurr = strDataCurr + "<set value='" + arrData[i][1] + "' />"; strDataPrev = strDataPrev + "<set value='" + arrData[i][2] + "' />"; } //Close <categories> element strCategories = strCategories + "</categories>"; //Close <dataset> elements strDataCurr = strDataCurr + "</dataset>"; strDataPrev = strDataPrev + "</dataset>"; //Assemble the entire XML now strXML = strXML + strCategories + strDataCurr + strDataPrev + "</graph>"; //Create the chart - MS Column 3D Chart with data contained in strXML %> <jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true"> <jsp:param name="chartSWF" value="../../FusionCharts/FCF_MSColumn3D.swf" /> <jsp:param name="strURL" value="" /> <jsp:param name="strXML" value="<%=strXML %>" /> <jsp:param name="chartId" value="productSales" /> <jsp:param name="chartWidth" value="600" /> <jsp:param name="chartHeight" value="300" /> <jsp:param name="debugMode" value="false" /> <jsp:param name="registerWithJS" value="false" /> </jsp:include> <BR> <BR> <a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR><H5 ><a href='../default.htm'>&laquo; Back to list of examples</a></h5> </CENTER> </BODY> </HTML> In the above code, we first include FusionCharts.js file to enable us embed the chart using JavaScript. We also include FusionChartsRenderer.jsp wherever we want to render the chart. Thereafter, we define a JSP array arrData to store sales data for 6 different products. The array has three dimensions - first one for data label (product) and the next two for data values. The first data value column would store sales information for current year and the second one for previous year. We define a variable strXML to store the entire XML data. We also define strCategories, strDataCurr and strDataPrev variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and use string concatenation. We concatenate the entire XML finally in strXML. Finally, we render the chart using FusionChartsRenderer.jsp and passing strXML as parameter. When you view the chart, you'll see a chart as under: In Download Package > Code > JSP > 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 and understand them easily.