<%@ include file="../Includes/DBConn.jsp"%>
<%@ page import="java.sql.Statement"%>
<%@ page import="java.sql.ResultSet"%>
<%@ page import="java.sql.Date"%>
<%@ page import="java.text.SimpleDateFormat"%>
FusionCharts Free - Database + JavaScript Example
<%
/*
In this example, we show a combination of database + JavaScript rendering using FusionCharts.
The entire app (page) can be summarized as under. This app shows the break-down
of factory wise output generated. In a pie chart, we first show the sum of quantity
generated by each factory. These pie slices, when clicked would show detailed date-wise
output of that factory.
The XML data for the pie chart is fully created in JSP at run-time. jsp interacts
with the database and creates the XML for this.
Now, for the column chart (date-wise output report), we do not submit request to the server.
Instead we store the data for the factories in JavaScript arrays. These JavaScript
arrays are rendered by our JSP Code (at run-time). We also have a few defined JavaScript
functions which react to the click event of pie slice.
We' ve used MySQL database.
It just contains two tables, which are linked to each other.
Before the page is rendered, we need to connect to the database and get the
data, as we'll need to convert this data into JavaScript variables.
*/
/* The following string will contain the JS Data and variables.
This string will be built in JSP and rendered at run-time as JavaScript.
*/
String jsVarString = "";
//Database Objects
Statement st1=null,st2=null;
ResultSet rs1=null,rs2=null;
String strQuery="";
int indexCount = -1;
//Create the recordset to retrieve data
//We need to create a Scrollable ResultSet so that we can reuse it for creating the chart later
st1=oConn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);
//Create the query
strQuery = "select * from Factory_Master";
rs1 = st1.executeQuery(strQuery);
String factoryId=null;
String factoryName=null;
String quantity="";
java.sql.Date date=null;
java.util.Date uDate=null;
String uDateStr="";
while(rs1.next()) {
indexCount += 1;
factoryId=rs1.getString("FactoryId");
factoryName=rs1.getString("FactoryName");
//Create JavaScript code to add sub-array to data array
//data is an array defined in JavaScript (see below)
//We've added \t & \n to data so that if you View Source of the
//output HTML, it will appear properly. It helps during debugging
jsVarString += "\n\t\t\t\t\t"+ "data[" + indexCount + "] = new Array();\n\r" ;
//Now create second recordset to get date-wise details for this factory
strQuery = "select * from Factory_Output where FactoryId=" +factoryId+ " order by DatePro Asc ";
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("d/M");
uDateStr=sdf.format(uDate);
}
//Put this data into JavaScript as another nested array.
//Finally the array would look like data[factoryIndex][i][dataLabel,dataValue]
jsVarString +="\t\t\t\t\t\t\t"+"data[" + indexCount + "].push(new Array('" + uDateStr + "'," +quantity+"));" +"\n\r";
}
try {
if(null!=rs2){
rs2.close();
rs2=null;
}
}catch(java.sql.SQLException e){
System.out.println("Could not close the resultset");
}
try{
if(null!=st2) {
st2.close();
st2=null;
}
}catch(java.sql.SQLException e){
System.out.println("Could not close the statement");
}
}
%>
Inter-connected charts - Click on any pie slice to see detailed
chart below.
The charts in this page have been dynamically generated using
data contained in a database. We've NOT hard-coded the data in
JavaScript.
<%
//Initialize the Pie chart with sum of production for each of the factories
//strXML will be used to store the entire XML document generated
String strXML ="";
String totalOutput="";
//Re-initialize Index
indexCount=-1;
//Generate the chart element
strXML = "";
//Move back to first index of the factory master recordset
rs1.beforeFirst();
while(rs1.next()){
//Update index count - sequential
indexCount = indexCount + 1;
factoryId=rs1.getString("FactoryId");
factoryName=rs1.getString("FactoryName");
//Now create second recordset to get details for this factory
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");
}
//Generate
//Note that we're setting link as updateChart(factoryIndex,factoryName) - JS Function
strXML += "";
try {
if(null!=rs2){
rs2.close();
rs2=null;
}
}catch(java.sql.SQLException e){
System.out.println("Could not close the resultset");
}
try{
if(null!=st2) {
st2.close();
st2=null;
}
}catch(java.sql.SQLException e){
System.out.println("Could not close the statement");
}
}
//Finally, close element
strXML += "";
//close the resultset,statement,connection
//enclose them in try catch block
try {
if(null!=rs1){
rs1.close();
rs1=null;
}
}catch(java.sql.SQLException e){
//do something
System.out.println("Could not close the resultset");
}
try {
if(null!=st1) {
st1.close();
st1=null;
}
}catch(java.sql.SQLException e){
System.out.println("Could not close the statement");
}
try {
if(null!=oConn) {
oConn.close();
oConn=null;
}
}catch(java.sql.SQLException e){
System.out.println("Could not close the connection");
}
//Create the chart - Pie 3D Chart with data from strXML
%>
<%
//Column 2D Chart with changed "No data to display" message
//We initialize the chart with
%>
Unable to see the charts above?