|
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 : /proc/21571/root/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 - Creating Drill-down charts</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", "Creating Drill down charts" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Creating Drill-down charts</td>
</tr>
<tr>
<td valign="top" class="text"><p>In our previous example, we had used FusionCharts XT to plot a chart using data stored in database. We will now extend that example itself to create a drill-down chart which can show more information.</p>
<p>If you recall from previous example, we were showing the sum of factory output in a pie chart as under: </p> <img src="../../guide-for-web-developers/Images/Code_DBOut.jpg" width="572" height="273" class="imageBorder" />
<p>In this example, we will extend it, so that when users click a pie slice for a factory, they can drill down to see date wise production for that factory. </p></td>
</tr>
<tr>
<td valign="top" class="header">Setting up the pie chart for Link </td>
</tr>
<tr>
<td valign="top" class="text">
<p>To set up the pie chart in a way to enable links for
drill-down involves just minor tweaking of our previous bean used in <span class="codeInline">BasicDBExampleUsingBean.jsp</span>.
We basically need to add the <span class="codeInline">link</span> attribute
for each<span class="codeInline"> <set></span> element. We create
a new page <span class="codeInline">Default.jsp</span> from the previous
page in <span class="codeInline">DBExample</span> folder with exactly same code. We create a bean <span class="codeInline">FactoriesWithLinkToDetailedBean</span> with following code to construct XML: (<span class="codeInline">getFactoryXML()</span>) </p>
<pre class="code_container prettyprint"><span class="codeComment">//strXML will be used to store the entire XML document generated</span>
String strXML="";
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();
<span class="codeComment">
// generate the chart elements and assign the attributes to it
</span>
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="";
while(rs1.next()) {
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);
<span class="codeComment"><strong>
// Encoding the URL since it has parameters</strong></span><strong>
String strDataURL = FusionChartsHelper.encodeDataURL("Detailed.jsp?factoryId="+factoryId,false);
setElem.setAttribute("link", strDataURL);</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>
chartDoc.appendChild(rootElement);
strXML=domHelper.getXMLString(chartDoc);
<span class="codeComment">
//code omitted here
//close the resultset,statement,connection
//enclose them in try catch block
</span>
}catch(java.sql.SQLException e){
System.out.println("Could not close the statement");
}
return strXML;
</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see in the code above, in the <span class="codeInline">getFactoryXML()</span> method, we are doing the following:</p>
<ol>
<li>Connecting to the database using DBConnection class. </li>
<li>Generating the XML data document by iterating through the resultset. We are constructing the <span class="codeInline">xml</span> using <span class="codeInline">dom</span>. To each <span class="codeInline"><set></span> element, we add the <span class="codeInline">link</span> attribute, which points to <span class="codeInline">Detailed.jsp</span> - the page that contains the chart to show details. We are passing the factory ID of the respective factory by appending it to the link. The value for the link attribute is then URL encoded. This is an important step. <br /><br />
<pre class="code_container prettyprint"><span class="codeComment">// Encoding the URL since it has parameter</span>
String strDataURL = FusionChartsHelper.encodeDataURL("Detailed.jsp?factoryId="+factoryId,false);
setElem.setAttribute("link", strDataURL);
</pre><br />
</li>
<li>Finally, we are returning the XML as a string obtained from the xml document. </li>
</ol>
<p>Let's now shift our attention to <span class="codeInline">Detailed.jsp</span>
page - the page which renders the second chart based on the click in the first chart. </p>
</td>
</tr>
<tr>
<td valign="top" class="header">Creating the detailed data chart page </td>
</tr>
<tr>
<td valign="top" class="text">
<p>The <span class="codeInline">Detailed.jsp</span>
page contains the following code: </p>
</td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint" ><%@ 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"%>
<strong><jsp:useBean id="factoryDetails" class="com.fusioncharts.sampledata.FactoryDetailsBean" /></strong>
<c:set var="folderPath" value="../../FusionCharts/" />
<c:set var="title" value="FusionCharts - Database + Drill-Down Example" scope="request" />
<c:set var="header1" value="FusionCharts Database and Drill-Down Example" scope="request" />
<c:set var="header2" value="Detailed report for the factory" scope="request" />
<c:set var="jsPath" value="${folderPath}" scope="request"/>
<strong><c:set target="${factoryDetails}" property="factoryId" value="${param.factoryId}"/> </strong>
<span class="codeComment"><!--
This page is invoked from Default.jsp. When the user clicks on a pie
slice in Default.jsp, the factory Id is passed to this page. We need
to get that factory id, get the information from database and then show
a detailed chart.
--> </span>
<tags:template2>
<span class="codeComment"><!-- Create the chart - Pie 3D Chart with data contained in bean --></span>
<fc:render chartId="${factoryDetails.chartId}"
swfFilename="${folderPath}${factoryDetails.filename}"
width="${factoryDetails.width}" height="${factoryDetails.height}"
debugMode="false" xmlData="${factoryDetails.xml}" />
</tags:template2>
</pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this page, we are:</p>
<ol>
<li>Setting the value for jsPath the path to the folder containing the JavaScript class, to enable easy embedding of FusionCharts. This is used by the <span class="codeInline">template2</span> tag file for including the JavaScript file. </li>
<li>Requesting the factory ID for which we have to show detailed data. This value was sent to us as querystring, as a part of pie chart link.</li>
<li>Setting the value for factoryId in the bean <span class="codeInline">FactoryDetailsBean</span>.</li>
<li>In the bean, we are getting the requisite data for this factory (identified by factoryId) from database and then converting it into XML using string concatenation. This is done in the bean and happens whenever <span class="codeInline">setFactoryId()</span> is invoked. </li>
<li>Finally, rendering a Column 2D chart (${factoryDetails.filename}) to show detailed data, by using the <span class="codeInline">fc:render</span> tag.</li>
</ol>
<p>The main code of creating the XML string is done in the bean <span class="codeInline">FactoryDetailsBean</span>. The relevant code is as follows: (<span class="codeInline">getFactoryDetailsXML(String factoryId)</span> method) </p>
<pre class="code_container prettyprint">
//strXML will be used to store the entire XML document generated
String strXML="";
try{
DBConnection dbConn = new DBConnection();
Connection oConn= dbConn.getConnection();
<span class="codeComment"> //Database Objects - Initialization</span>
Statement st=null;
ResultSet rs=null;
java.sql.Date date=null;
java.util.Date uDate=null;
String uDateStr="";
String quantity="";
String strQuery="";
Map<String,String> chartAttributes=new HashMap<String, String>();
chartAttributes.put("caption", "Factory "+factoryId+" Output");
chartAttributes.put("subCaption", "(In Units)");
chartAttributes.put("xAxisName", "Date");
chartAttributes.put("showValues", "1");
chartAttributes.put("labelStep", "2");
chartAttributes.put("palette", "2");
DOMHelper domHelper = new DOMHelper();
Document chartDoc = domHelper.getDocument();
Element rootElement = chartDoc.createElement("chart");
domHelper.addAttributesToElement(rootElement, chartAttributes);
<span class="codeComment">//Now, we get the data for that factory</span>
strQuery = "select * from Factory_Output where FactoryId=" + factoryId+ " order by DatePro Asc ";
st=oConn.createStatement();
rs=st.executeQuery(strQuery);
while(rs.next()) {
date=rs.getDate("DatePro");
quantity=rs.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">//Generate <set label='..' value='..'/> </span>
Element setElem = chartDoc.createElement("set");
setElem.setAttribute("label", uDateStr);
setElem.setAttribute("value", quantity);
rootElement.appendChild(setElem);
}
<span class="codeComment">//Finally, close <chart> element</span>
chartDoc.appendChild(rootElement);
strXML=domHelper.getXMLString(chartDoc);
<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 strXML;
</pre>
<p>Here, we are iterating through all the rows in the <span class="codeInline">Factory_Output</span> table for the given factoryId and creating the <span class="codeInline"><set></span> elements as child of the <span class="codeInline"><chart></span> element. The date is formatted before setting it as <span class="codeInline">label</span> for the <span class="codeInline"><set></span> element.</p>
<p>When you now run the app, you will see the detailed page as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../guide-for-web-developers/Images/Code_Drill.jpg" class="imageBorder" /> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Plotting from database|JSP_DB.html","J2EE, JavaScript & dataURL|JSP_JS_URL.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>