|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/Code/J2EE/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Using FusionCharts XT with JSP - Charting Data from
an Array </title>
<link rel="stylesheet" href="../../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/prettify/prettify.css" />
<script type="text/javascript" src="../../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../../Introduction/Overview.html", "Guide for web developers", "Using with J2EE|JSP_GettingStarted.html", "Charting data from Array" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Charting Data from
an Array</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In this section, we will show you how to use FusionCharts XT and JSP to plot
charts from data contained in JSP arrays - the same can then be extended to ArrayList or any other collection.</p>
<p>We will cover the following examples
here:</p>
<ul>
<li><a href="#single">Creating a single series chart from data contained in arrays</a></li>
<li><a href="#multi">Creating a multi-series chart from data contained in arrays</a></li>
</ul>
<p><strong>Before you go further with this page, we recommend you to please see the previous section, <a href="JSP_BasicExample.html">Basic Examples</a>, as we start off from concepts explained in that page. </strong></p>
<p class="highlightBlock">The code examples contained in this page are present
in <span class="codeInline">Download Package > Code > J2EE > ArrayExample</span>
folder. </p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="single" id="single"></a>Creating a single series chart from data contained in arrays</td>
</tr>
<tr>
<td valign="top" class="text"><p>The code to create a single series chart is
contained in <span class="codeInline">SingleSeries.jsp</span> and can be
listed as under: </p></td>
</tr>
<tr>
<td class="text"> <pre class="prettyprint php code_container"><%@ 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" %>
<strong><jsp:useBean id="chartData"
class="com.fusioncharts.sampledata.ArrayRenderData"/></strong>
<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>
<span class="codeComment"><!-- 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 --></span>
<strong><fc:render chartId="${chartData.chartId}"
swfFilename="${folderPath}${chartData.filename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlData="${chartData.xml}" /></strong>
</tags:template2></pre></td>
</tr>
<tr>
<td valign="top" class="text">
<p>As is the best practice, there is hardly any code in the above jsp. The tag used to render the chart is <span class="codeInline">fc:render</span>. The data for the chart is obtained from the Java Bean class <span class="codeInline">com.fusioncharts.sampledata.ArrayRenderData</span>.</p>
<p>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:</p>
<pre class="code_container prettyprint"><c:set var="folderPath" value="../../FusionCharts/"/> </pre>
<p>Here, <span class="codeInline">FusionCharts</span> is the name of the folder containing <span class="codeInline">FusionCharts.js</span>, <span class="codeInline">.swf</span> and other JavaScript files.</p>
<p>The bean containing the xml data is <span class="codeInline">ArrayRenderData</span>. In this bean, we define a JSP array <span class="codeInline">arrData</span> 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. </p>
<p>We define a variable <span class="codeInline">xml</span> to store the entire XML data. To build the XML, we iterate through the array and use string concatenation. </p>
<p>Here is the code from <span class="codeInline">ArrayRenderData.java</span> relevant to constructing the Single series data XML:</p>
<pre class="prettyprint php code_container"><span class="codeComment">/* Let's store the sales data for six products in our array. We also store
the name of products.*/</span>
String[][] arrData = new String[6][2];
<span class="codeComment">//Store Name of Products</span>
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";
<span class="codeComment">//Store sales data</span>
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;
<span class="codeComment">//Initialize <chart> element</span>
xml = "<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'>";
<span class="codeComment">//Convert data to XML and append</span>
for(i=0;i<arrData.length;i++){
xml+= "<set label='" +arrData[i][0] + "' value='" + arrData[i][1] + "' />";
}
<span class="codeComment">//Close <chart> element</span>
xml+= "</chart>"; </pre>
<p>Finally, we render the chart using the <span class="codeInline">fc:render</span> tag and passing XML and other parameters.</p>
<p>When you view the chart, you will see a chart as under: </p>
<p><img src="../../guide-for-web-developers/Images/Code_ArraySS.jpg" width="584" height="287" class="imageBorder"/></p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="multi" id="multi"></a>Creating a multi-series chart from data contained in arrays </td>
</tr>
<tr>
<td valign="top" class="text"><p>Let us now create a multi-series chart from
data contained in arrays. We create a file <span class="codeInline">MultiSeries.jsp</span>
with the following code: </p></td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="prettyprint xml code_container"><%@ 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" %>
<strong><jsp:useBean id="chartData" class="com.fusioncharts.sampledata.ArrayRenderData"/></strong>
<strong><c:set var="folderPath" value="../../FusionCharts/"/></strong>
<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"/>
<strong><c:set var="jsPath" value="${folderPath}" scope="request"/></strong>
<tags:template2>
<span class="codeComment"><!-- 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 will store sales information for current year and the second one for previous year.-->
<!-- Create the chart - MSColumn3D Chart with data contained in bean --></span>
<strong><fc:render chartId="${chartData.chartId}" swfFilename="${folderPath}${chartData.multiSeriesFilename}"
width="${chartData.width}" height="${chartData.height}" debugMode="false"
registerWithJS="false" xmlData="${chartData.multiSeriesXml}" /></strong>
</tags:template2></pre>
<p>In the above code, we first set the value for the path to the JavaScript files<span class="codeInline"> (jsPath)</span> to enable us to embed the chart using JavaScript. We use the ArrayRenderData bean for providing the data to the chart. We use the fc:render tag wherever we want to render the chart.</p>
<p>Let's quickly take a look at the part of the code (<span class="codeInline"> constructMultiSeriesXML()</span> function) from the bean which constructs the XML for the multi-series chart from the array.</p>
<pre class="prettyprint xml code_container">
<span class="codeComment">/* Let's store the sales data for six products in our array. We also store
the name of products.*/</span>
String[][] arrData = new String[6][3];
<span class="codeComment">//Store Name of Products</span>
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";
<span class="codeComment">//Store sales data</span>
arrData[0][1] = "567500";
arrData[1][1] = "815300";
arrData[2][1] = "556800";
arrData[3][1]= "734500";
arrData[4][1] = "676800";
arrData[5][1] = "648500";
<span class="codeComment">//Store sales data for previous year</span>
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' >";
<span class="codeComment">//Initialize <categories> element - necessary to generate a multi-series chart</span>
String strCategories = "<categories>";
<span class="codeComment">//Initiate <dataset> elements</span>
String strDataCurr = "<dataset seriesName='Current Year'>";
String strDataPrev = "<dataset seriesName='Previous Year'>";
<span class="codeComment">//Iterate through the data </span>
for(int i=0;i<arrData.length;i++){
<span class="codeComment">//Append <category label='...' /> to strCategories</span>
strCategories = strCategories + "<category label='" + arrData[i][0] + "' />";
<span class="codeComment"> //Add <set value='...' /> to both the datasets</span>
strDataCurr = strDataCurr + "<set value='" + arrData[i][1] + "' />";
strDataPrev = strDataPrev + "<set value='" + arrData[i][2] + "' />";
}
<span class="codeComment">//Close <categories> element</span>
strCategories = strCategories + "</categories>";
<span class="codeComment">//Close <dataset> elements</span>
strDataCurr = strDataCurr + "</dataset>";
strDataPrev = strDataPrev + "</dataset>";
<span class="codeComment">//Assemble the entire XML now</span>
multiSeriesXml+= strCategories + strDataCurr + strDataPrev + "</chart>";
</pre>
<p>Here, we define an array <span class="codeInline">arrData</span> 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 will store sales information for current year and the second one for previous year.</p>
<p>We define a variable <span class="codeInline">multiSeriesXml</span> to store the entire XML data. We also define <span class="codeInline">strCategories</span>, <span class="codeInline">strDataCurr</span> and <span class="codeInline">strDataPrev</span> 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 <span class="codeInline">multiSeriesXml</span>. </p>
<p>Finally, we render the chart using the <span class="codeInline">fc:render</span> tag and passing <span class="codeInline">multiSeriesXml </span>from the bean, as an attribute. </p>
<p>When you view the chart, you will see a chart as under: </p>
<p><img src="../../guide-for-web-developers/Images/Code_ArrayMS.jpg" class="imageBorder"/></p>
<p class="highlightBlock">In <span class="codeInline">Download
Package > Code > J2EE > ArrayExample</span>, we have more example
codes to create Stacked and Combination Charts too, which have not been
explained here,
as they are similar in concept. You may directly see the
code and understand them easily.</p> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Basic Examples|JSP_BasicExample.html","Using with data in Forms|JSP_Form.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>