Current File : /home/caballoscriollos/public_html/espanol/encuesta/graphs/contents/jsp_drill.html
<?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>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td><h2 class="pageHeader">Using FusionCharts with JSP > Creating Drill-down charts </h2></td>
</tr>
<tr>
<td valign="top" class="text"><p>In our previous example, we had used FusionCharts to plot a chart using data stored in database. We'll 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>
<p> <img src="Images/Code_DBOut.jpg" width="572" height="273" class="imageBorder" /></p>
<p>In this example, we'll extend this example, so that when a user clicks on a pie slice for a factory, he can drill down to see date wise production for that factory. </p>
<p><span class="header">Setting up the pie chart for Link </span></p>
<p>To set up the pie chart to enable links for drill-down involves just minor tweaking of our previous <span class="codeInline">BasicDBExample.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 the following code changes:</p>
<p class="codeBlock"><%@ include file="../Includes/DBConn.jsp"%><br />
<%<br />
/*We've imported FusionChartsHelper, which contains function<br />
to help us encode the URL.*/<br />
%><br />
<%@ page import="com.infosoftglobal.fusioncharts.FusionChartsHelper"%><br />
<%@ page import="java.sql.Statement"%><br />
<%@ page import="java.sql.ResultSet"%><br />
<%@ page import="java.sql.Date"%><br />
<HTML><br />
<HEAD><br />
<TITLE>FusionCharts Free - Database and Drill-Down Example</TITLE><br />
<%<br />
<span class="codeComment">/*You need to include the following JS file, if you intend to embed the chart using JavaScript.<br />
Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer<br />
When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.<br />
*/</span><br />
%><br />
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT><br />
<style type="text/css"><br />
<!--<br />
body {<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
.text{<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
--><br />
</style><br />
</HEAD><br />
<BODY><br />
<CENTER><br />
<h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> Database and Drill-Down Example</h2><br />
<h4>Click on any pie slice to see detailed data.</h4><br />
<%<br />
<span class="codeComment">/*<br />
In this example, we show how to connect FusionCharts to a database.<br />
For the sake of ease, we've used MySQL Database.<br />
It just contains two tables, which are linked to each<br />
other. <br />
*/</span><br />
<br />
<span class="codeComment">//Database Objects - Initialization</span><br />
Statement st1=null,st2=null;<br />
ResultSet rs1=null,rs2=null;<br />
<br />
String strQuery="";<br />
<br />
<span class="codeComment">//strXML will be used to store the entire XML document generated</span><br />
String strXML="";<br />
<br />
<br />
<span class="codeComment">//Generate the chart element</span><br />
strXML = "<graph caption='Factory Output report' subCaption='By Quantity' decimalPrecision='0' showNames='1' numberSuffix=' Units' <br />
pieSliceDepth='30' formatNumberScale='0'>";<br />
<br />
<span class="codeComment"> //Query to retrieve data</span><br />
strQuery = "select * from Factory_Master";<br />
st1=oConn.createStatement();<br />
rs1=st1.executeQuery(strQuery);<br />
<br />
String factoryId=null;<br />
String factoryName=null;<br />
String totalOutput="";<br />
String strDataURL="";<br />
<br />
while(rs1.next()) {<br />
factoryId=rs1.getString("FactoryId");<br />
factoryName=rs1.getString("FactoryName");<br />
strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + factoryId;<br />
st2=oConn.createStatement();<br />
<br />
rs2 = st2.executeQuery(strQuery);<br />
if(rs2.next()){<br />
totalOutput=rs2.getString("TotOutput");<br />
}<br />
FusionChartsHelper chartsHelper = new FusionChartsHelper();<br />
<span class="codeComment">// Encoding the URL since it has a parameter</span><br />
strDataURL = chartsHelper.encodeDataURL("Detailed.jsp?FactoryId="+factoryId,"false",response);<br />
<span class="codeComment">//Generate <set name='..' value='..'/> </span><br />
strXML += "<set name='" + factoryName + "' value='" +totalOutput+ "' <strong>link='"+strDataURL+"'</strong> />";<br />
<br />
<span class="codeComment"> //Close recordset</span><br />
rs2=null;<br />
st2=null;<br />
}<br />
<span class="codeComment">//Finally, close <graph> element</span><br />
strXML += "</graph>";<br />
<br />
<span class="codeComment">//close resultset,statement,connection</span><br />
try {<br />
if(null!=rs1){<br />
rs1.close();<br />
rs1=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the resultset");<br />
} <br />
try {<br />
if(null!=st1) {<br />
st1.close();<br />
st1=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the statement");<br />
}<br />
try {<br />
if(null!=oConn) {<br />
oConn.close();<br />
oConn=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the connection");<br />
}<br />
<br />
<span class="codeComment">//Create the chart - Pie 3D Chart with data from strXML </span><br />
%> <br />
<jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true"> <br />
<jsp:param name="chartSWF" value="../../FusionCharts/FCF_Pie3D.swf" /> <br />
<jsp:param name="strURL" value="" /> <br />
<jsp:param name="strXML" value="<%=strXML %>" /> <br />
<jsp:param name="chartId" value="FactorySum" /> <br />
<jsp:param name="chartWidth" value="650" /> <br />
<jsp:param name="chartHeight" value="450" /><br />
<jsp:param name="debugMode" value="false" /> <br />
<jsp:param name="registerWithJS" value="false" /><br />
</jsp:include> <br />
<BR><br />
<BR><br />
<a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR><br />
<H5><a href='../default.htm'>&laquo; Back to list of examples</a></h5><br />
</CENTER><br />
</BODY><br />
</HTML><br />
</p>
<p>As you can see in the code above, we're doing the following:</p>
<ol>
<li>Include <span class="codeInline">FusionCharts.js</span> JavaScript class to enable easy embedding of FusionCharts.</li>
<li>We then include <span class="codeInline"> DBConn.jsp</span>, which gives the connection to our database. </li>
<li>Thereafter, we generate the XML data document by iterating through the resultset. We store the XML data in <span class="codeInline">strXML</span> variable. 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 pass the factory id of the respective factory by appending it to the link. </li>
<li>Finally, we render the chart by including FusionChartsRenderer and passing <span class="codeInline">strXML</span> as <span class="text">parameter</span> to it. </li>
</ol>
<p>Let's now shift our attention to <span class="codeInline">Detailed.jsp</span> page. </p>
<p><span class="header">Creating the detailed data chart page</span></p>
<p>The page <span class="codeInline">Detailed.jsp</span> contains the following code: </p>
<p class="codeBlock"><%@ include file="../Includes/DBConn.jsp"%><br />
<%@ page import="com.infosoftglobal.fusioncharts.FusionChartsHelper"%><br />
<%@ page import="java.sql.Statement"%><br />
<%@ page import="java.sql.ResultSet"%><br />
<%@ page import="java.text.SimpleDateFormat"%><br />
<HTML><br />
<HEAD><br />
<TITLE>FusionCharts Free - Database and Drill-Down Example</TITLE><br />
<%<br />
<span class="codeComment">/*You need to include the following JS file, if you intend to embed the chart using JavaScript.<br />
Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer<br />
When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.<br />
*/</span><br />
%><br />
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT><br />
<style type="text/css"><br />
<!--<br />
body {<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
.text{<br />
font-family: Arial, Helvetica, sans-serif;<br />
font-size: 12px;<br />
}<br />
--><br />
</style><br />
</HEAD><br />
<BODY><br />
<CENTER><br />
<h2><a href="http://www.fusioncharts.com" target="_blank">FusionCharts Free</a> Database and Drill-Down Example</h2><br />
<h4>Detailed report for the factory</h4><br />
<%<br />
<span class="codeComment"> /*This page is invoked from Default.jsp. When the user clicks on a pie<br />
slice in Default.jsp, the factory Id is passed to this page. We need<br />
to get that factory id, get the information from database and then show<br />
a detailed chart.<br />
*/</span><br />
<br />
<span class="codeComment">//First, get the factory Id</span><br />
String factoryId=null;<br />
<span class="codeComment">//Request the factory Id from parameters</span><br />
factoryId = request.getParameter("FactoryId");<br />
String chartCode="";<br />
if(null!=factoryId){<br />
<span class="codeComment"> // we will use the FusionChartsHelper class for colors</span><br />
FusionChartsHelper colorHelper= new FusionChartsHelper();<br />
ResultSet rs=null;<br />
String strQuery;<br />
Statement st=null;<br />
<br />
java.sql.Date date=null;<br />
java.util.Date uDate=null;<br />
String uDateStr="";<br />
String quantity="";<br />
String strXML="";<br />
<span class="codeComment">//Generate the chart element string</span><br />
strXML = "<graph caption='Factory " +factoryId +" Output ' subcaption='(In Units)' xAxisName='Date' showValues='1' <br />
decimalPrecision='0'>";<br />
<span class="codeComment">//Now, we get the data for that factory</span><br />
strQuery = "select * from Factory_Output where FactoryId=" +factoryId;<br />
<br />
st=oConn.createStatement();<br />
rs = st.executeQuery(strQuery);<br />
while(rs.next()){ <br />
date=rs.getDate("DatePro");<br />
quantity=rs.getString("Quantity");<br />
if(date!=null) {<br />
uDate=new java.util.Date(date.getTime());<br />
// Format the date so that the displayed date is easy to read<br />
SimpleDateFormat sdf=new SimpleDateFormat("d/M");<br />
uDateStr=sdf.format(uDate);<br />
}<br />
strXML += "<set name='" +uDateStr+"' value='" +quantity+"' color='" + colorHelper.getFCColor() + "'/>";<br />
}<br />
<span class="codeComment">//Close <graph> element</span><br />
strXML +="</graph>";<br />
<span class="codeComment">//close resultset,statement,connection</span><br />
try {<br />
if(null!=rs){<br />
rs.close();<br />
rs=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
<span class="codeComment">//do something</span><br />
System.out.println("Could not close the resultset");<br />
} <br />
try {<br />
if(null!=st) {<br />
st.close();<br />
st=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
<span class="codeComment">//do something</span><br />
System.out.println("Could not close the statement");<br />
}<br />
try {<br />
if(null!=oConn) {<br />
oConn.close();<br />
oConn=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
<span class="codeComment">//do something</span><br />
System.out.println("Could not close the connection");<br />
}<br />
<br />
<span class="codeComment">//Create the chart - Column 2D Chart with data from strXML</span><br />
%> <br />
<jsp:include page="../Includes/FusionChartsRenderer.jsp" flush="true"> <br />
<jsp:param name="chartSWF" value="../../FusionCharts/FCF_Column2D.swf" /> <br />
<jsp:param name="strURL" value="" /> <br />
<jsp:param name="strXML" value="<%=strXML%>" /> <br />
<jsp:param name="chartId" value="FactoryDetailed" /> <br />
<jsp:param name="chartWidth" value="600" /> <br />
<jsp:param name="chartHeight" value="300" /><br />
<jsp:param name="debugMode" value="false" /> <br />
<jsp:param name="registerWithJS" value="false" /> <br />
</jsp:include><br />
<% }<br />
%> <br />
<BR><br />
<a href='Default.jsp?animate=0'>Back to Summary</a> <BR><br />
<BR><br />
<a href='../NoChart.html' target="_blank">Unable to see the chart above?</a><BR><br />
<H5><a href='../default.htm'>&laquo; Back to list of examples</a></h5><br />
</CENTER><br />
</BODY><br />
</HTML></p>
<p>In this page, we're:</p>
<ol>
<li>Including <span class="codeInline">FusionCharts.js</span> JavaScript class, to enable easy embedding of FusionCharts.</li>
<li>Requesting the factory id for which we've to show detailed data. This data was sent to us as querystring, as a part of pie chart link.</li>
<li>We get the requisite data for this factory from database and then convert it into XML using string concatenation.</li>
<li>Finally, we render a Column 2D chart to show detailed data, by including FusionChartsRenderer.jsp.</li>
</ol>
<p>When you now run the app, you'll see the detailed page as under: </p>
<p><img src="Images/Code_Drill.jpg" width="599" height="292" class="imageBorder" /></p></td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat