FusionCharts v3 Documentation

You are viewing documentation for an older version. For current documentation - click here.

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 - the same can then be extended to ArrayList or any other collection.

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 > J2EE > ArrayExample folder.

The code to create a single series chart is contained in SingleSeries.jsp and can be listed as under:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %>      
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<jsp:useBean id="chartData" 
  class="com.fusioncharts.sampledata.ArrayRenderData"/>
<c:set var="folderPath" value="../../FusionCharts/"/>
<c:set var="title" value="FusionCharts - Array Example 
  using Single Series Column 3D Chart" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value="Plotting single series 
  chart from data contained in Array." scope="request"/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<tags:template2> 
        
<!-- 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.-->
<!-- Create the chart - Column 3D Chart with data contained in bean -->
<fc:render chartId="${chartData.chartId}"
  swfFilename="${folderPath}${chartData.filename}"
  width="${chartData.width}" height="${chartData.height}" debugMode="false"
  registerWithJS="false" xmlData="${chartData.xml}" />
</tags:template2>

As is the best practice, there is hardly any code in the above jsp. The tag used to render the chart is fc:render. The data for the chart is obtained from the Java Bean class com.fusioncharts.sampledata.ArrayRenderData.

As mentioned in the earlier examples, please do not forget to include the path to the folder containing the javascript files. This is achieved through the code:

<c:set var="folderPath" value="../../FusionCharts/"/>

Here, FusionCharts is the name of the folder containing FusionCharts.js, .swf and other JavaScript files.

The bean containing the xml data is ArrayRenderData. In this bean, we define a 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 xml to store the entire XML data. To build the XML, we iterate through the array and use string concatenation.

Here is the code from ArrayRenderData.java relevant to constructing the Single series data xml :

/* 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";
int i=0;
//Initialize <chart> element
xml = "<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'>";

//Convert data to XML and append
for(i=0;i<arrData.length;i++){
  xml+= "<set label='" +arrData[i][0] + "' value='" + arrData[i][1] + "' />";
}
//Close <chart> element
xml+= "</chart>";

Finally, we render the chart using the fc:render tag and passing xml and other parameters.

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.jsp with the following code:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<jsp:useBean id="chartData" class="com.fusioncharts.sampledata.ArrayRenderData"/>
<c:set var="folderPath" value="../../FusionCharts/"/>
<c:set var="title" value="FusionCharts - Array Example using Multi Series Column 3D
Chart" scope="request"/>
<c:set var="header1" value="FusionCharts - Examples" scope="request"/>
<c:set var="header2" value="Plotting multi-series chart 
from data contained in Array." scope="request"/>
<c:set var="jsPath" value="${folderPath}" scope="request"/>      
<tags:template2>
<!-- 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.-->

<!-- Create the chart - MSColumn3D Chart with data contained in bean -->

<fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.multiSeriesFilename}" 
  width="${chartData.width}" height="${chartData.height}" debugMode="false" 
  registerWithJS="false" xmlData="${chartData.multiSeriesXml}" />

</tags:template2>

In the above code, we first set the value for the path to the javascript files (jsPath) to enable us embed the chart using JavaScript. We use the bean ArrayRenderData for providing the data to the chart. We use the fc:render tag wherever we want to render the chart.

Let's quickly take a look at the part of the code (function constructMultiSeriesXML() ) from the bean which constructs the xml for the Multi-series chart from the array.

 
/* 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";
multiSeriesXml = "<chart caption='Sales by Product' numberPrefix='$' 
formatNumberScale='1' rotateValues='1' placeValuesInside='1' decimals='0' >";

//Initialize <categories> element - necessary to generate a multi-series chart
String strCategories = "<categories>";

//Initiate <dataset> elements
String strDataCurr = "<dataset seriesName='Current Year'>";
String strDataPrev = "<dataset seriesName='Previous Year'>";

//Iterate through the data 
for(int i=0;i<arrData.length;i++){

  //Append <category label='...' /> to strCategories
  strCategories = strCategories + "<category label='" + 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
multiSeriesXml+= strCategories + strDataCurr + strDataPrev + "</chart>";

Here, we define an 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 multiSeriesXml 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 multiSeriesXml.

Finally, we render the chart using fc:render tag and passing multiSeriesXml from the bean, as an attribute.

When you view the chart, you'll see a chart as under:

In Download Package > Code > J2EE > 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 may directly see the code and understand them easily.