|
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>Combining FusionCharts XT, JSP and JavaScript (Data String) method</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", "J2EE and JavaScript Data String method" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Combining FusionCharts XT, JSP and JavaScript (Data String) method</td>
</tr>
<tr>
<td valign="top" class="text"><p>In our previous example, we had combined FusionCharts XT, JSP and JavaScript to create client side dynamic charts. We were updating the chart by asking it to fetch new data from server and update itself, without incurring any page refreshes. </p>
<p>In this example, <strong>instead of asking the chart to get XML data </strong>from server, <strong>we will provide updated XML data to chart using JavaScript </strong>functions. The chart will simply accept that XML data and render. </p>
<p class="highlightBlock">This method can effectively be used in your AJAX applications, where your JavaScript code gets the updated XML from server and then provides it to charts locally. You can process the data received from AJAX Calls, build XML from it and finally provide it to the chart. </p>
<p><strong>Before you proceed with the contents in this page, we strictly recommend you to please go through the <a href="../../guide-for-web-developers/how-fusioncharts-works/HowFCWorks.html">How FusionCharts XT works?</a> and <a href="JSP_BasicExample.html">Basic Examples</a> sections, as we will directly use a lot of concepts defined in those sections.</strong></p>
<p class="highlightBlock">The code discussed in this example is present in<span class="codeInline"> Download Package > Code > J2EE > DB_JS </span>folder. </p></td>
</tr>
<tr>
<td valign="top" class="header">Defining the application </td>
</tr>
<tr>
<td valign="top" class="text">
<p>We will carry on from our previous <span class="codeInline">"JSP,
JavaScript and Data URL</span>" example and convert it to use JavaScript
+ XML, so that the new XML is provided to the chart using JavaScript functions
- the charts NO longer directly request data from server. To attain this,
we send all the pertinent data from our server to the end viewer as JavaScript
arrays in the same page. The JavaScript arrays are dynamically generated
by bean and used by JSP pages at run-time and filled with data. </p>
<p>Effectively, we will do the following:</p>
<ol>
<li>Contain the pie chart (summary) and column chart (detailed) in one page (<span class="codeInline">Default.jsp</span>).</li>
<li>Configure the pie chart to use the<span class="codeInline">Data String </span> method to show summary of all factories when the page loads. This data will be built in
<span class="codeInline">FactoriesWithJSLinkBean</span>. </li>
<li>Build a JavaScript array. This array will be named as <span class="codeInline">data</span> in this page and will contain the detailed data for factories. The array will be dynamically built by the bean and then outputted as
JavaScript code. </li>
<li>Use a local JavaScript function, <span class="codeInline">updateChart()</span>, to process the data in this array and convert it to XML data document for direct usage by the column chart.</li>
<li>Customize the "<span class="codeInline">No data to display</span>" message of the chart to show a friendly message. This message is required because the column chart will initialize with no data, as, no factory is selected by the user when the chart is initially rendered.</li>
<li>Define the JavaScript links for each pie slice. These JavaScript links refer to the <span class="codeInline">updateChart()</span> JavaScript function present on the same page. We will later see how to manually code this function. When a pie is clicked, the <span class="codeInline">index of this factory in the javascript array </span>is passed to this function. </li>
<li>Generate the XML
data from the data stored in JavaScript <span class="codeInline">data</span> array and convey it to the column chart, using the <span class="codeInline"> updateChart()</span> function. This function is responsible for updating the column chart. The column chart now accepts this XML data, parses it and finally gets rendered.</li>
</ol> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header">Creating the page - <span class="codeInline">Default.jsp</span> </td>
</tr>
<tr>
<td valign="top" class="text">
<p>Both the charts and JavaScript functions to
manipulate the charts is contained in <span class="codeInline">Default.jsp</span>.
It has the following code: </p>
</td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<%@ taglib uri="http://www.fusioncharts.com/jsp/core" prefix="fc"%>
<jsp:useBean id="factoriesBean"
class="com.fusioncharts.sampledata.FactoriesWithJSLinkBean" />
<jsp:useBean id="chart2Data"
class="com.fusioncharts.sampledata.EmptyRenderData" />
<c:set var="folderPath" value="../../FusionCharts/" />
<c:set var="title" value="FusionCharts - Database + JavaScript Example"
scope="request" />
<c:set var="header1"
value="FusionCharts Database + JavaScript Example"
scope="request" />
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<tags:template2>
<SCRIPT LANGUAGE="JavaScript">
<span class="codeComment">//Here, we use a mix of server side code (jsp) and JavaScript to
//render our data for factory chart in JavaScript variables. We will later
//utilize this data to dynamically plot charts.
//All our data is stored in the data array. From jsp, we iterate through
//each resultset of data and then store it as nested arrays in this data array.</span>
var data = new Array();
<span class="codeComment">/*
Write the data as JavaScript variables here
The data is now present as arrays in JavaScript. Local JavaScript functions
can access it and make use of it. We will see how to make use of it.
*/</span>
<c:out value="${factoriesBean.factoryDetailsJsArrAsStr}" escapeXml="false"/>
<span class="codeComment">/**
* updateChart method is invoked when the user clicks on a pie slice.
* In this method, we get the index of the factory, build the XML data
* for that that factory, using data stored in data array, and finally
* update the Column Chart.
* @param factoryIndex Sequential Index of the factory.
* @param factoryName For display purpose
*/</span>
function updateChart(factoryIndex,factoryName){
<span class="codeComment"> //Storage for XML data document</span>
<span class="codeComment"> </span>var strXML = "<chart palette='2' caption='Factory: " + factoryName + " Output '
<span class="codeComment"> </span>subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' >";
<span class="codeComment"> //Add <set> elements</span>
<span class="codeComment"> </span>var i=0;
<span class="codeComment"> </span>for (i=0; i<data[factoryIndex].length; i++){
<span class="codeComment"> </span>strXML +="<set label='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' />";
<span class="codeComment"> </span>}
<span class="codeComment"> //Closing Chart Element</span>
<span class="codeComment"> </span>strXML = strXML + "</chart>";
<span class="codeComment"> //Get reference to chart object using Dom ID "FactoryDetailed"</span>
<span class="codeComment"> </span>var chartObj = FusionCharts('FactoryDetailed');
<span class="codeComment"> //Update its XML</span>
<span class="codeComment"> </span>chartObj.setXMLData(strXML);
}
</SCRIPT>
<span class="codeComment"><!-- Create the chart - Pie 3D Chart with data contained in bean --></span>
<fc:render chartId="${factoriesBean.chartId}"
swfFilename="${folderPath}${factoriesBean.filename}"
width="${factoriesBean.width}" height="${factoriesBean.height}"
debugMode="false" registerWithJS="true" xmlData="${factoriesBean.xml}" />
<span class="codeComment"><!--
Column 2D Chart with changed "No data to display" message
We initialize the chart with <chart></chart>
--></span>
<fc:render chartId="${chart2Data.chartId}"
swfFilename="${folderPath}${chart2Data.filename}${chart2Data.noDataParameter}"
width="${chart2Data.width}" height="${chart2Data.height}"
debugMode="false" registerWithJS="true" xmlData="${chart2Data.xml}" />
</tags:template2></pre>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p>Now, before we get to the JavaScript functions, let's first see what we are doing in our JSP Code. </p>
<ol>
<li>Output the JavaScript array obtained from the bean.</li>
<li>Write the JavaScript code for updating the chart.</li>
<li>Render two charts - first pie chart with factories' summary and another Column chart for selected factory details. </li>
</ol>
<p>In this page, before rendering any HTML code, we first generate all the
data in database as JavaScript array. To do so, we use string concatenation
in bean to store all data as JavaScript array code. This is present in the <span class="codeInline">factoriesBean.factoryDetailsJsArrAsStr variable</span>. Once the
JavaScript code is built in our JSP variable, we write it out in the <span class="codeInline"><SCRIPT></span>
section of HTML <span class="codeInline"><HEAD></span>. </p>
<pre class="code_container prettyprint"><span class="codeComment">/*Write the data as JavaScript variables here
The data is now present as arrays in JavaScript. Local JavaScript functions
can access it and make use of it. We will see how to make use of it.
*/</span>
<c:out value="${factoriesBean.factoryDetailsJsArrAsStr}" escapeXml="false"/></pre>
<p>If you run this page and view the source JavaScript code, you will see the following: </p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="code_container prettyprint">var data = new Array();
data[1] = new Array();
data[1].push(new Array('1/1',21));
data[1].push(new Array('2/1',23));
data[1].push(new Array('3/1',22));
data[1].push(new Array('4/1',24));
data[1].push(new Array('5/1',32));
data[1].push(new Array('6/1',21));
data[1].push(new Array('7/1',34));
data[1].push(new Array('8/1',32));
data[1].push(new Array('9/1',32));
data[1].push(new Array('10/1',23));
data[1].push(new Array('11/1',23));
data[1].push(new Array('12/1',32));
data[1].push(new Array('13/1',53));
data[1].push(new Array('14/1',23));
data[1].push(new Array('15/1',26));
data[1].push(new Array('16/1',43));
data[1].push(new Array('17/1',16));
data[1].push(new Array('18/1',45));
data[1].push(new Array('19/1',65));
data[1].push(new Array('20/1',54));
data[2] = new Array();
data[2].push(new Array('1/1',121));
data[2].push(new Array('2/1',123));
data[2].push(new Array('3/1',122));
data[2].push(new Array('4/1',124));
data[2].push(new Array('5/1',132));
data[2].push(new Array('6/1',121));
data[2].push(new Array('7/1',134));
data[2].push(new Array('8/1',132));
data[2].push(new Array('9/1',132));
data[2].push(new Array('10/1',123));
data[2].push(new Array('11/1',123));
data[2].push(new Array('12/1',132));
data[2].push(new Array('13/1',153));
data[2].push(new Array('14/1',123));
data[2].push(new Array('15/1',126));
data[2].push(new Array('16/1',143));
data[2].push(new Array('17/1',116));
data[2].push(new Array('18/1',145));
data[2].push(new Array('19/1',165));
data[2].push(new Array('20/1',154));
data[3] = new Array();
data[3].push(new Array('1/1',54));
data[3].push(new Array('2/1',56));
data[3].push(new Array('3/1',89));
data[3].push(new Array('4/1',56));
data[3].push(new Array('5/1',98));
data[3].push(new Array('6/1',76));
data[3].push(new Array('7/1',65));
data[3].push(new Array('8/1',45));
data[3].push(new Array('9/1',75));
data[3].push(new Array('10/1',54));
data[3].push(new Array('11/1',75));
data[3].push(new Array('12/1',76));
data[3].push(new Array('13/1',34));
data[3].push(new Array('14/1',97));
data[3].push(new Array('15/1',55));
data[3].push(new Array('16/1',43));
data[3].push(new Array('17/1',16));
data[3].push(new Array('18/1',35));
data[3].push(new Array('19/1',78));
data[3].push(new Array('20/1',75));</pre></td>
</tr>
<tr>
<td valign="top" class="text">
<p>You can clearly see that our JSP code has outputted JavaScript code that
can now locally create an array and feed it with requisite data. </p>
<p>Before we look into the JavaScript functions, let us quickly glance at the bean which creates the JavaScript array as a string and the XML string for the first chart.</p>
<pre class="code_container prettyprint">public String getFactoryDetailsJsArrAsStr(){
String jsVarString="";
try{
DBConnection dbConn = new DBConnection();
Connection oConn= dbConn.getConnection();
<span class="codeComment">//Database Objects - Initialization</span>
Statement st1=null,st2=null;
ResultSet rs1=null,rs2=null;
String strQuery="";
<span class="codeComment">//Iterate through each factory</span>
strQuery = "select * from Factory_Master";
st1=oConn.createStatement();
rs1=st1.executeQuery(strQuery);
String factoryId=null;
String quantity="";
java.sql.Date date=null;
java.util.Date uDate=null;
String uDateStr="";
int indexCount=0;
<strong>while(rs1.next()) {</strong>
indexCount+= 1;
<strong> factoryId=rs1.getString("FactoryId");</strong>
<span class="codeComment"> //Create JavaScript code to add sub-array to data array
//data is an array defined in JavaScript (see below)
//We have added \t & \n to data so that if you View Source of the
//output HTML, it will appear properly. It helps during debugging</span>
<strong> jsVarString += "\t\t"+ "data[" + indexCount + "] = new Array();\n" ; </strong>
<span class="codeComment"> //Now create second recordset to get details for this factory</span>
<strong> strQuery = "select * from Factory_Output where FactoryId=" +factoryId+ " order by DatePro Asc ";</strong>
st2=oConn.createStatement();
rs2 = st2.executeQuery(strQuery);
while(rs2.next()){
date=rs2.getDate("DatePro");
quantity=rs2.getString("Quantity");
if(date!=null) {
uDate=new java.util.Date(date.getTime());
SimpleDateFormat sdf=new SimpleDateFormat("dd/MM");
uDateStr=sdf.format(uDate);
}
<span class="codeComment">//Put this data into JavaScript as another nested array.
//Finally the array will look like data[factoryIndex][i][dataLabel,dataValue]</span>
<strong> jsVarString +="\t\t"+"data[" + indexCount + "].push(new Array('" + uDateStr + "'," +quantity+"));" +"\n\r";</strong>
}
}
<span class="codeComment"> //close the resultset,statement,connection
//enclose them in try catch block
// code omitted here
</span>
}catch(java.sql.SQLException e){
System.out.println("Could not close the statement");
}
return jsVarString;
}</pre>
<p>In the above code, we iterate through all the factories present in <span class="codeInline">Factory_Master</span> table and for each of these factories, we get the output data from <span class="codeInline">Factory_Output</span> table and store the date and the quantity output as an element in a two dimensional array. The index of the array is used to identify the factory.</p>
<p>The XML for the first Pie chart is also created in the same bean. This method is shown below:</p>
<pre class="code_container prettyprint">private String getFactoryXML(){
<span class="codeComment"> //strXML will be used to store the entire XML document generated</span>
<span class="codeComment"> </span>String strXML="";
<span class="codeComment"> </span>try{
DBConnection dbConn = new DBConnection();
Connection oConn= dbConn.getConnection();
<span class="codeComment"> //Database Objects - Initialization</span>
Statement st1=null,st2=null;
ResultSet rs1=null,rs2=null;
String strQuery="";
Map<String,String> chartAttributes=new HashMap<String, String>();;
chartAttributes.put("caption", "Factory Output report");
chartAttributes.put("subCaption", "By Quantity");
chartAttributes.put("pieSliceDepth", "30");
chartAttributes.put("showBorder", "1");
chartAttributes.put("formatNumberScale", "0");
chartAttributes.put("numberSuffix", " Units");
DOMHelper domHelper = new DOMHelper();
Document chartDoc = domHelper.getDocument();
Element rootElement = chartDoc.createElement("chart");
domHelper.addAttributesToElement(rootElement, chartAttributes);
<span class="codeComment"> //Iterate through each factory</span>
strQuery = "select * from Factory_Master";
st1=oConn.createStatement();
rs1=st1.executeQuery(strQuery);
String factoryId=null;
String factoryName=null;
String totalOutput="";
int indexCount=0;
while(rs1.next()) {
indexCount+= 1;
totalOutput="";
factoryId=rs1.getString("FactoryId");
factoryName=rs1.getString("FactoryName");
<span class="codeComment"> //Now create second recordset to get details for this factory</span>
strQuery = "select sum(Quantity) as TotOutput from Factory_Output
where FactoryId=" + factoryId;
st2=oConn.createStatement();
rs2 = st2.executeQuery(strQuery);
if(rs2.next()){
totalOutput=rs2.getString("TotOutput");
}
<span class="codeComment"> //Generate <set label='..' value='..' link='...'/> </span>
Element setElem = chartDoc.createElement("set");
setElem.setAttribute("label", factoryName);
setElem.setAttribute("value", totalOutput);
<strong> setElem.setAttribute("link", "javaScript:updateChart("+ indexCount + ",\""+factoryName+"\")");</strong>
rootElement.appendChild(setElem);
<span class="codeComment"> //close the resultset,statement
//enclose them in try catch block
// code omitted here </span>
}
<span class="codeComment"> //Finally, close <chart> element</span>
<span class="codeComment"> </span>chartDoc.appendChild(rootElement);
<span class="codeComment"> </span>strXML=domHelper.getXMLString(chartDoc);
<span class="codeComment"> //close the resultset,statement,connection
//enclose them in try catch block
//code omitted here
</span><span class="codeComment"> </span>}catch(java.sql.SQLException e){
<span class="codeComment"> </span>System.out.println("Could not close the statement");
}
return strXML;
}</pre>
<p class="text">The code shown above is the same that we have seen before, the only difference being, the link attribute value, as highlighted. Here, we are providing the link to the javascript function <span class="codeInline">updateChart</span> with parameters as the index of the factory in the array and the name of the factory. The index of the factory in the array will be used to identify the factory in the array. The name of the factory is used for displaying on the chart. </p>
<p>We first create the XML data document for Pie chart - summary of factory output. For each <span class="codeInline"><set></span>, we provide a JavaScript link to the <span class="codeInline">updateChart()</span> function and pass the factory ID to it as shown in the line below:</p>
<pre class="code_container prettyprint"><b>strXML+="<setlabel='"+factoryName+"'value='"+totalOutput+"'
link='javaScript:updateChart("+indexCount+",""+factoryName+"")'/>";</b></pre>
<p class="text"> The Pie 3D chart is rendered using Data String method. The Pie 3D chart has its DOM Id as <span class="codeInline">FactorySum</span>:</p>
<pre class="code_container prettyprint"> <fc:render<strong> chartId="${factoriesBean.chartId}</strong>"
swfFilename="${folderPath}${factoriesBean.filename}"
width="${factoriesBean.width}" height="${factoriesBean.height}"
debugMode="false" xmlData="${factoriesBean.xml}" />
protected String chartId="<strong>FactorySum</strong>";</pre>
<p>Now, we render an empty Column 2D chart with <span class="codeInline"><chart></chart></span> data initially. We also change the "<span class="codeInline">No data to display.</span>" error to a friendly and intuitive "<span class="codeInline">Please select a factory from pie chart above to view detailed data.</span>" This chart has its DOM Id as <span class="codeInline">FactoryDetailed</span>. Note that the <span class="codeInline">registerWithJS</span> parameter for this chart should be set to true.</p>
<pre class="code_container prettyprint"><fc:render chartId="${chart2Data.chartId}"
swfFilename="${folderPath}${chart2Data.filename}<strong>${chart2Data.noDataParameter}</strong>"
width="${chart2Data.width}" height="${chart2Data.height}"
debugMode="false" <strong>registerWithJS="true"</strong> xmlData="${chart2Data.xml}" /></pre>
<p>The <span class="codeInline">EmptyRenderData.java</span> file will contain the following code: </p>
<pre class="code_container prettyprint">protected String noDataParameter="?ChartNoDataText=Please select a
factory from pie chart above to view detailed data."; </pre>
<p>Effectively, our page is now set to show two charts. The pie chart shows the summary data provided to it using dataXML method. The column chart shows the above "friendly" error message. Now, when each pie slice is clicked, the <span class="codeInline">updateChart()</span> JavaScript function is called and the array index of the factory and the factory name of the clicked slice is passed to it. This function is responsible for updating the column chart and contains the following code: </p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="code_container prettyprint">function updateChart(factoryIndex,factoryName){
<span class="codeComment"> //Storage for XML data document</span>
<span class="codeComment"> </span>var strXML = "<chart palette='2' caption='Factory: " + factoryName + " Output '
<span class="codeComment"> </span>subcaption='(In Units)' xAxisName='Date' showValues='1' labelStep='2' >";
<span class="codeComment"> //Add <set> elements</span>
<span class="codeComment"> </span>var i=0;
<span class="codeComment"> </span>for (i=0; i<data[factoryIndex].length; i++){
<span class="codeComment"> </span><span class="codeComment"> </span>strXML += "<set label='" + data[factoryIndex][i][0] + "' value='" + data[factoryIndex][i][1] + "' />";
<span class="codeComment"> </span>}
<span class="codeComment"> //Closing Chart Element</span>
<span class="codeComment"> </span>strXML = strXML + "</chart>";
<span class="codeComment"> //Get reference to chart object using Dom ID "FactoryDetailed"</span>
<span class="codeComment"> </span>var chartObj = FusionCharts('FactoryDetailed');
<span class="codeComment"> //Update its XML</span>
<span class="codeComment"> </span>chartObj.setXMLData(strXML);
}</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, </p>
<ol>
<li>We first create the XML data document for the column chart by iterating through data contained in our JavaScript <span class="codeInline">data</span> array. </li>
<li>Thereafter, we convey this XML data to the column chart. To do so,
we first get a reference to the column chart using its DOM Id <span class="codeInline">FactoryDetailed</span>.
We use the <span class="codeInline">FusionCharts</span> function
defined in <span class="codeInline">FusionCharts.js</span> to do so. </li>
<li>Once we have the reference to the chart, we simply call the <span class="codeInline">setXMLData</span> method of the chart and pass it the XML data document. </li>
<li>This updates the chart with new data. </li>
</ol>
<p>When you now see the application, the initial state will look as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../guide-for-web-developers/Images/Code_JS_URL_Ini.jpg" width="511" height="458" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text">
<p>And when you click a pie slice, the following will appear on the same page (without any browser refreshes): </p>
</td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../guide-for-web-developers/Images/Code_JS_URL_Fin.jpg" width="610" height="526" class="imageBorder" /></td>
</tr>
<tr>
<td valign="top" class="text">
<p>This example demonstrated a very basic sample of the integration capabilities possible with FusionCharts XT. </p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("J2EE, JavaScript & dataURL|JSP_JS_URL.html","UTF8 Examples|JSP_UTF8Example.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>