Current File : /home/caballoscriollos/public_html/espanol/encuesta/graphs/contents/jsp_db.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 > Plotting data from
a database </h2>
</td>
</tr>
<tr>
<td valign="top" class="text">
<p>In this section, we'll show you how to use FusionCharts and JSP to plot
charts from data contained in a database. We'll create a pie chart to
show "Production by Factory" using: </p>
<ul>
<li><span class="codeInline">dataXML</span> method first.</li>
<li>Thereafter, we'll convert this chart to use <span class="codeInline">dataURL</span>
method. </li>
</ul>
<p>For the sake of ease, we'll use MySQL Database. The database is present
in <span class="codeInline">Download Package > Code > JSP > DB
</span>folder. You can, however, use any database with FusionCharts including
MS Access, MS SQL Server, Oracle. Database creation script for MySQL is also present
in the same folder.</p>
<p><strong>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. </strong></p>
<p class="highlightBlock">The code examples contained in this page are present
in <span class="codeInline">Download Package > Code > JSP > DBExample
</span> folder. <br />
The database scripts are present in <span class="codeInline">Download
Package > Code > JSP ></span> <span class="codeInline">DB</span>.
</p>
<p class="header">Database Structure </p>
<p class="text">Before we code the JSP pages to retrieve data, let's quickly have a look at the database structure. </p>
<p class="text"></p>
<p class="text"><img src="Images/Code_DB.gif" width="372" height="124" class="imageBorder" />
</p>
<p>The database contains just 2 tables:</p>
<ol>
<li><span class="codeInline">Factory_Master</span>: To store the name and id of each factory</li>
<li><span class="codeInline">Factory_Output</span>: To store the number of units produced by each factory for a given date.</li>
</ol>
<p>For demonstration, we've fed some dummy data in the database. Let's now shift our attention to the JSP page that will interact with the database, fetch data and then render a chart. </p>
<p class="header">Database Configuration </p>
<ol>
<li>The database configuration is present in the file Download Package > Code > JSP > META-INF > context.xml file. Here we need to specify the database name, user name and password to access the database. We have used the MySQL database for our examples. We assume that you have created the database with the name <span class="codeInline">factorydb</span>, username <span class="codeInline">root</span> with no password. </li>
<li>Once this is done, we need to create the required tables. The sql script "FactoryDBCreation.sql" present in the folder <span class="codeInline">Download Package > Code > JSP > DB </span>will create the database with two tables and sample data.Note that these scripts will not create foreign key relationships. You would have to manually alter the table to create the relationship, if you think necessary. </li>
<li> Once this is done, we need to create the tables required for the UTF8 examples. The required sql script "UTFExampleTablesCreation.sql" is present in the <span class="codeInline">Download Package > Code > JSP > DB</span> folder. You could run this script in your mysql - this will alter the database to use UTF8 as default character set, create the Japanese_Factory_Master and French_Factory_Master tables and insert sample data into them.</li>
</ol> <p class="header">Building the JSP Page for dataXML Method </p> <p class="text">The JSP page for <span class="codeInline">dataXML</span> method example is named as <span class="codeInline">BasicDBExample.jsp</span> (in <span class="codeInline">DBExample</span> folder). It contains the following code: </p>
<p class="codeBlock"><%@ include file="../Includes/DBConn.jsp"%><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 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 Example</h2><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 a database which contains two tables, which are linked to each<br />
other. <br />
*/</span><br />
<br />
<span class="codeComment">//Database Objects - Initialization</span><br />
Statement st1,st2;<br />
ResultSet rs1,rs2;<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' pieSliceDepth='30' formatNumberScale='0'>";<br />
<br />
<span class="codeComment">//Construct the query to retrieve data</span><br />
strQuery = "select * from Factory_Master";<br />
<br />
st1=oConn.createStatement();<br />
rs1=st1.executeQuery(strQuery);<br />
<br />
String factoryId=null;<br />
String factoryName=null;<br />
String totalOutput="";<br />
<span class="codeComment"> //Iterate through each factory </span><br />
while(rs1.next()) {<br />
<br />
factoryId=rs1.getString("FactoryId");<br />
factoryName=rs1.getString("FactoryName");<br />
<span class="codeComment">//Now create second recordset to get details for this factory</span><br />
strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + factoryId;<br />
st2=oConn.createStatement();<br />
rs2 = st2.executeQuery(strQuery);<br />
if(rs2.next()){<br />
totalOutput=rs2.getString("TotOutput");<br />
}<br />
<span class="codeComment">//Generate <set name='..' value='..'/></span> <br />
strXML += "<set name='" + factoryName + "' value='" +totalOutput+ "'/>";<br />
<span class="codeComment">//Close resultset</span><br />
try {<br />
if(null!=rs2){<br />
rs2.close();<br />
rs2=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!=st2) {<br />
st2.close();<br />
st2=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
//do something<br />
System.out.println("Could not close the statement");<br />
}<br />
} <span class="codeComment">//end of while</span><br />
<span class="codeComment">//Finally, close <graph> element</span><br />
strXML += "</graph>";<br />
<span class="codeComment"> //close the resulset,statement,connection</span><br />
try {<br />
if(null!=rs1){<br />
rs1.close();<br />
rs1=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!=st1) {<br />
st1.close();<br />
st1=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 - 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><H5 ><a href='../default.htm'>&laquo; Back to list of examples</a></h5><br />
</CENTER><br />
</BODY><br />
</HTML><br />
</p>
<p>The following actions are taking place in this code:</p>
<ol>
<li>We first 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 connects to the database and stores the connection in oConn Connection object. </li>
<li>Thereafter, we generate the XML data document by iterating through the resultset and store it in <span class="codeInline">strXML</span> variable. </li>
<li>Finally, we render the chart by including FusionChartsRenderer.jsp and passing <span class="codeInline">strXML </span>and other parameters to it . </li>
</ol>
<p>When you now run the code, you'll get an output as under: </p> <p class="text"><img src="Images/Code_DBOut.jpg" width="572" height="273" class="imageBorder" /></p>
<p class="header">Converting the example to use dataURL method </p>
<p>Let's not convert this example to use dataURL method. As previously explained, in dataURL mode, you need two pages:</p>
<p>
<ol>
<li><strong>Chart Container Page</strong> - The page which embeds the HTML code to render the chart. This page also tells the chart where to load the data from. We'll name this page as <span class="codeInline">Default.jsp</span>. </li>
<li><strong>Data Provider Page</strong> - This page provides the XML data to the chart. We'll name this page as <span class="codeInline">PieData.jsp</span></li>
</ol>
<p class="highlightBlock">The pages in this example are contained in<span class="codeInline">
Download Package > Code > JSP > DB_dataURL</span> folder. </p>
<p class="header">Chart Container Page - <span class="codeInline">Default.jsp </span></p>
<p class="text"><span class="codeInline">Default.jsp</span> contains the following code to render the chart: ( relevant portions of the jsp are only shown) </p>
<p class="codeBlock"><%<br />
<span class="codeComment">/*<br />
In this example, we show how to connect FusionCharts to a database <br />
using dataURL method. In our other examples, we've used dataXML method<br />
where the XML is generated in the same page as chart. Here, the XML data<br />
for the chart would be generated in PieData.jsp.<br />
*/</span><br />
<br />
<span class="codeComment">/*<br />
To illustrate how to pass additional data as querystring to dataURL, <br />
we've added an animate property, which will be passed to PieData.jsp. <br />
PieData.jsp would handle this animate property and then generate the <br />
XML accordingly.<br />
*/</span><br />
<br />
<span class="codeComment">/*For the sake of ease, we've used MySQL database which <br />
contains two tables, which are linked to each other.<br />
*/</span><br />
<br />
//Variable to contain dataURL<br />
String strDataURL="";<br />
<br />
//NOTE: It's necessary to encode the dataURL if you've added parameters to it<br />
strDataURL = "PieData.jsp";<br />
<br />
//Create the chart - Pie 3D Chart with dataURL as strDataURL<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="<%=strDataURL%>" /> <br />
<jsp:param name="strXML" value="" /> <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></p>
<p>In this page:</p>
<ol>
<li><span class="codeInline">FusionCharts.js</span> JavaScript file is included. <span class="codeInline"></span></li>
<li>The <span class="codeInline">dataURL</span> string with value "PieData.jsp" is stored in <span class="codeInline">strDataURL</span> variable. </li>
<li>Finally, we render the chart using FusionChartsRenderer.jsp and pass <span class="codeInline">strURL</span> parameter with value present in <span class="codeInline">strDataURL</span>. </li>
</ol> <p class="header">Creating the data provider page <span class="codeInline">PieData.jsp </span></p> <p class="text">PieData.jsp contains the following code to output XML Data: </p>
<p class="codeBlock"><?xml version='1.0'?><%<br />
<span class="codeComment">/*<br />
We've included ../Includes/DBConn.jsp, to get a connection to the specific database. Which database to connect to is <br />
decided based on a config param present in the web.xml.<br />
Note that we have not used the jsp:include tag instead of the @include file directive.Either of them<br />
could be used.<br />
*/</span><br />
%><%@ include file="../Includes/DBConn.jsp" %><%@ page import="java.sql.Statement"%><%@ page import="java.sql.ResultSet"%><%<br />
<span class="codeComment">/*This page generates the XML data for the Pie Chart contained in<br />
Default.jsp. <br />
<br />
For the sake of ease, we've used a database which 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 />
<span class="codeComment">//strXML will be used to store the entire XML document generated</span><br />
String strXML="";<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' pieSliceDepth='30' formatNumberScale='0'>";<br />
<br />
<span class="codeComment">//Query to retrieve data about factory<br />
/*<br />
If the query varies from one database to another,get the database name from <br />
the Servlet context, like this :<br />
String dbName=getServletContext().getInitParameter("dbName");<br />
And check this against the db name constants defined in <br />
com.infosoftglobal.fusioncharts.Constants java class.<br />
And then for each db you can write a different query.<br />
*/</span><br />
<br />
strQuery = "select * from Factory_Master";<br />
<span class="codeComment">//Create the statement</span><br />
st1=oConn.createStatement();<br />
<span class="codeComment"> //Execute the query</span><br />
rs1=st1.executeQuery(strQuery);<br />
<br />
String factoryId=null;<br />
String factoryName=null;<br />
String totalOutput="";<br />
<br />
while(rs1.next()) {<br />
factoryId=rs1.getString("FactoryId");<br />
factoryName=rs1.getString("FactoryName");<br />
<span class="codeComment">//Now create second resultset to get details for this factory</span><br />
strQuery = "select sum(Quantity) as TotOutput from Factory_Output where FactoryId=" + factoryId;<br />
st2=oConn.createStatement();<br />
rs2 = st2.executeQuery(strQuery);<br />
if(rs2.next()){<br />
totalOutput=rs2.getString("TotOutput");<br />
}<br />
<span class="codeComment">//Generate <set name='..' value='..'/> </span><br />
strXML += "<set name='" + factoryName + "' value='" +totalOutput+ "' />";<br />
try {<br />
if(null!=rs2){<br />
rs2.close();<br />
rs2=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the resultset");<br />
}<br />
try{<br />
if(null!=st2) {<br />
st2.close();<br />
st2=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
System.out.println("Could not close the statement");<br />
}<br />
}<br />
<span class="codeComment">//Finally, close <graph> element</span><br />
strXML += "</graph>";<br />
<br />
try {<br />
if(null!=rs1){<br />
rs1.close();<br />
rs1=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!=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 />
<span class="codeComment">//Set Proper output content-type</span><br />
response.setContentType("text/xml"); <br />
<br />
<span class="codeComment">//Just write out the XML data<br />
//NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER</span><br />
%><%=strXML%></p>
<p>In the above page:</p>
<ol>
<li>We query the database to get the total output of each factory. </li>
<li>We generate the xml from this data and store it in <span class="codeInline">strXML</span> variable</li>
<li>Finally, we write this data to output stream without any HTML tags.</li>
</ol>
<p>When you view this page, you'll get the same output as before.</p>
<span class="header">About the database connection:</span><br />
Database connection can be got in 2 ways:
<ol>
<li>By including DBConn.jsp in the page as shown in the above example</li>
<li>By using the DBConnection class as a bean in the application scope</li>
</ol>
We have seen how to use DBConn.jsp to get a Connection. Now let us see how to acheive
the same result using DBConnection bean.
<p class="text">The JSP page for <span class="codeInline">dataXML</span> method example using DBConnection class is named as <span class="codeInline">BasicDBExampleUsingConnectionClass.jsp</span> (in <span class="codeInline">DBExample</span> folder). In order to get a connection using the Java
class DBConnection, first you need to use the DBConnection class as a bean
in application scope and import java.sql.Connection class.</p>
<p class="codeBlock"><jsp:useBean id="dbConn" class="com.infosoftglobal.fusioncharts.DBConnection" scope="application" /><br />
<%@ page import="java.sql.Connection"%></p>
<p class="text">Wherever a Connection to the database is required, call the getConnection method in the DBConnection class as follows.</p>
<p class="codeBlock">Connection oConn=dbConn.getConnection(); </p>
<p class="text">Once the connection is got, use it to create Statement, ResultSet objects and finally close it. This can be done in a try-catch block in the following manner.</p><p class="codeBlock"> try {<br />
if(null!=oConn) {<br />
oConn.close();<br />
oConn=null;<br />
}<br />
}catch(java.sql.SQLException e){<br />
<span class="codeComment">//do some exception handling</span><br />
System.out.println("Could not close the connection");<br />
}</p>
<p>So, this is how we use the DBConnection class to get a Connection.After getting the connection, you can perform the queries to get the data. All the work of configuring the database name, MySQL db Datasource name (i.e, all the database related configuration) is done in the configuration file - context.xml. </p>
<p class="text">This was just a basic example. For advanced demos, you can see and download our FusionCharts Blueprint/Demo Applications. </p></td>
</tr>
<tr>
<td valign="top" class="text">
</td>
</tr>
</table>
</body>
</html>
Mr. DellatioNx196 GaLers xh3LL Backd00r 1.0, Coded By Mr. DellatioNx196 - Bogor BlackHat