Highcharts In JSP And Servlets

Akshay Phadke
8y
2.7k
0
1

Article

Overview

In this article, we will see how to develop Highcharts in JSP and Servlets. You can develop Highcharts in .Net, also. Suppose a project, that is developed in JSP and Servlet, is running. Now, we need for a particular entry to calculate the total cost of the project in number of days. While showing the graph, it is displaying percentage and percentage ratio of how much it is pending with a pie chart drill down. Let's start.

Prerequisites

You need Netbeans setup. Kindly Download Netbeans setup from official website.

https://netbeans.org/downloads/
You need to install Java and map the path in the environment variables section.
Oracle. I developed these Highcharts in Oracle. You can download Oracle setup from this link.

http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index-092322.html
If any error comes while installing the Oracle, you can refer to this blog.

http://www.c-sharpcorner.com/blogs/oracle-11g-r2-installation-error-in-windows
You can also develop the same thing in SQL. You just need sufficient data to show in the graph.
Download Highchart JS from this link.

http://www.highcharts.com/download.

Now, we are ready to start.

NOTE:When you install netbeans, it will ask the platform on which you want to run the project. There are mostly two platforms: Apache Tomcat Server and Glassfish. If you select Apache Tomcat server, the project will run on that platform. I had selected Glassfish server.

The difference between Apache Tomcat Server and Glassfish servers is - In apache Tomcat server, it only has the implementation of JSP and Servlets, whereas Glassfish or JBoss, has the full implementation of all servers, like Junit,Java EE and so on.

Open Netbeans Setup. On the left side of the pane, you will see these options:

You can also add servers from here if you missed that while installing. Now, let's start with the code.

Go To File->New Project.

Now, you will get a prompt.

Create Web Application ->Next. Give suitable name and destination.

Click Next. Now, see carefully. It will ask, " On which server do you want to run your project?" You can select the Servers from here. I selected GlassFish server.

Click Next. It will ask for Framework on which you want to develop these, like Struts, Hibernate and so on. I haven’t selected any. Click Next and create a sample application .

Now, we will add a JSP page here and will name it as report.jsp.

Right click on Web Pages and add new JSP.

Name it as Report.

It will ask for the location where you want to create it. See the details carefully and click Finish. You will see that Report.jsp is successfully created.

Now, just open that JSP page. JSP is nothing but an HTML Page.

Here, you will see the title of the page and it's displaying Hello. Now, we will run the project and see what output are we getting. Just run the project.

When you run the project, you see that Glassfish Server has started.

You will see Hello World! displayed. That means we have successfully created a JSP file and run our project and got output.

Now, we will add Highcharts JS which we had downloaded. Kindly Include a folder called JS.

Just copy all the Highchart JS files in JS folder.

Now, let's include those JS in our JSP file.

Now, we will be exploring more on Highchart, such as - what kind of chart we want - say Pie, and in which color we want it. Just add these lines in the code to draw the chart. Now, as you have seen, there are three charts. So, we need three results sets, three divs, and three variables to store those outputs and display in chart.

For now, just add these lines:

<script type="text/javascript">
$(function() {
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
},
navigation: {
buttonOptions: {
theme: {
stroke: '#CCCCCC'
}
}
}
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

Now, we will see how to create a chart. Here, you will see that I have created RSET_Depository function JavaScript and will be firing those in our Div and used a variable a. Similarly, I have done it for other two variables, b and c.

$('#RSET_DEPOSITORY').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ' CRs Pending - Depository wise'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Depository Share',
data: <%=a%>
}]
});
});

Now, we will see the body section of this.

<fieldset class="fieldset">
<legend class="legend">Graph Details</legend>
<tr>
<td width="50%" >
<div id="RSET_DEPOSITORY" style="min-width: 250px; height: 350px; margin: 0 auto"></div>
</td>
</tr>
</fieldset>

Now, we will create a Servlet . Here, in the servlet, we will have to write queries in which we want to display total count and so on. As you can see in your solution, you do see source package.

Create a new servlet file and name it as report.java. Click Next and click the check box web.xml.

You have to add these file in web.xml, so that whatever you write in a query on servlet, it will display the result.

When you create a servlet, you will see HTTPserveltrequest and HTTPResponse.

Now, we will create another package. Inside that, we will create a java file called as DBConnection and we will write the code to connect to DB.

try
{
Class.forName("oracle.jdbc.driver.OracleDriver");
ResourceBundle rsb = ResourceBundle.getBundle("nameofpackage .fn.utilites.MyResources");
connection = DriverManager.getConnection(rsb.getString("CONNECTION_URL"),rsb.getString("USERNAME"),rsb.getString("PASSWORD"));/**/
}
catch(Exception e)
{
System.out.println(e);
}
}

Now, we will be using get connection and close connection and main entry point of our file .

public void closeConnection()
{
try
{
if(!connection.isClosed())
{
connection.close();
}
System.out.println("Connection Closed");
}
catch(Exception e)
{
System.out.println(e);
}
}
public static void main(String args[])
{
DBConnection dbcon = new DBConnection();
dbcon.getConnection();
dbcon.closeConnection();/**/
}

Run the file. It will succefully get connected to our database. Just open your Servlet page.

And add these imports to initialize the DBConnection and prepared Statement

private DBConnection dBConnection;
private Connection connection;
private PreparedStatement preparedStatement;

Now, my final servlet code is

if (auth.startsWith("NTLM "))
{
System.out.println("IF NTLM");
byte[] msg = new sun.misc.BASE64Decoder().decodeBuffer(auth.substring(5));
int off = 0, length, offset;
if (msg[8] == 1)
{
System.out.println("IF IF NTLM");
byte z = 0;
byte[] msg1 = {(byte)'N', (byte)'T', (byte)'L', (byte)'M', (byte)'S', (byte)'S', (byte)'P', z,(byte)2, z, z, z, z, z, z, z,(byte)40, z, z, z, (byte)1, (byte)130, z, z,z, (byte)2, (byte)2, (byte)2, z, z, z, z, z, z, z, z, z, z, z, z};
response.setHeader("WWW-Authenticate", "NTLM " + new sun.misc.BASE64Encoder().encodeBuffer(msg1));
response.setStatus(response.SC_UNAUTHORIZED);
response.setContentLength(0) ;
response.flushBuffer();
}
else
{
dBConnection = new DBConnection();
System.out.println("in else");
connection = dBConnection.getConnection();
// query3="SELECT SYSDATE- b.STATUS_AS_ON_DATE,b.PENDING_WITH,b.STATUS_AS_ON_DATE FROM AX_FRTNT_ENTRY_STATUS_MASTER_T b inner join ax_frtnt_entry_master_t a on b.ENTRY_ID = a.ENTRY_ID WHERE b.ENTRY_ID=? ORDER BY 1 DESC";
// query3="SELECT STATUS_AS_ON_DATE,PENDING_WITH,COUNT(*) FROM AX_FRTNT_ENTRY_STATUS_MASTER_T WHERE ENTRY_ID=? GROUP BY PENDING_WITH,STATUS_AS_ON_DATE ORDER BY 1 DESC ";
// final query3="select TO_CHAR(STATUS_AS_ON_DATE,'DD-MON-YY'),PENDING_WITH,count(pending_with) from ax_frtnt_entry_status_master_t where entry_id=? GROUP BY PENDING_WITH,TO_CHAR(STATUS_AS_ON_DATE,'DD-MON-YY') ORDER BY 1 DESC";
//4/7/2016 query3="select STATUS_AS_ON_DATE,TO_DATE(TO_CHAR(SYSDATE,'DD-MON-YY'))-TO_DATE(TO_CHAR(STATUS_AS_ON_DATE,'DD-MON-YY')),PENDING_WITH,count(pending_with) from ax_frtnt_entry_status_master_t where entry_id=? GROUP BY PENDING_WITH,STATUS_AS_ON_DATE ORDER BY 1 DESC";
// query3="select STATUS_AS_ON_DATE,PENDING_WITH ,COUNT(PENDING_WITH),(lead(STATUS_AS_ON_DATE,1) over (order by STATUS_AS_ON_DATE)-STATUS_AS_ON_DATE)*24/24 as Days_to_next_start from ax_frtnt_entry_status_master_t where entry_id=? GROUP BY STATUS_AS_ON_DATE,PENDING_WITH ORDER BY 1 ASC";
// query3=" select STATUS_AS_ON_DATE,TO_DATE(TO_CHAR(SYSDATE,'DD-MON-YY'))-TO_DATE(TO_CHAR(STATUS_AS_ON_DATE,'DD-MON-YY')),PENDING_WITH,count(pending_with) from ax_frtnt_entry_status_master_t where entry_id=? GROUP BY PENDING_WITH,STATUS_AS_ON_DATE ORDER BY 1 DESC";
// query3="select TO_CHAR(STATUS_AS_ON_DATE,'DD-MON-YY'),PENDING_WITH,count(pending_with) from ax_frtnt_entry_status_master_t where entry_id=? GROUP BY PENDING_WITH,TO_CHAR(STATUS_AS_ON_DATE,'DD-MON-YY') ORDER BY 1 DESC";
query3="SELECT PENDING_WITH, SUM(ROUND(Days_to_next_start)) AS Days_to_next_start FROM ( select STATUS_AS_ON_DATE,PENDING_WITH, (lead(STATUS_AS_ON_DATE,1) over (order by STATUS_AS_ON_DATE)-STATUS_AS_ON_DATE)*24/24 as Days_to_next_start from ax_frtnt_entry_status_master_t where entry_id=? GROUP BY STATUS_AS_ON_DATE,PENDING_WITH ORDER BY 1 ASC) GROUP BY PENDING_WITH";
// query3="SELECT NVL(PENDING_WITH,'Not Assigned'),COUNT(*) FROM AX_FRTNT_ENTRY_MASTER_T WHERE ENTRY_ACTIVE_FLG = 'Y' AND ENTRY_CLOSED_STATUS = 'N' GROUP BY PENDING_WITH ORDER BY 2 DESC ";
// query3="SELECT SYSDATE- b.STATUS_AS_ON_DATE,a.PENDING_WITH FROM AX_FRTNT_ENTRY_STATUS_MASTER_T b inner join ax_frtnt_entry_master_t a on b.ENTRY_ID = a.ENTRY_ID WHERE b.ENTRY_ID=? ORDER BY 1 ASC";
// query="SELECT EM.ENTRY_ID ENTRY_ID, UGM.USER_GROUP_NAME GROUP_NAME , EM.APPLICATION_NAME_PID APPLICATION_NAME_PID, NVL(TO_CHAR(EM.START_OF_ACTIVITY,'DD-MON-RRRR'),'NOT AVAILABLE') START_OF_ACTIVITY, EM.ACTIVITY_DESC || DECODE(NVL(TO_CHAR(NOA.CNT),' '),' ',' ','1', ' - ' || NOA.CNT || ' ATTACHMENT', ' - ' || NOA.CNT || ' ATTACHMENTS') ACTIVITY_DESC ,TO_CHAR(ESM.STATUS_AS_ON_DATE,'DD-MON-RRRR') STATUS_AS_ON_DATE , ESM.STATUS_DESCRIPTION STATUS_DESCRIPTION,EM.VALUE_ADD_BENEFIT VALUE_ADD_BENEFIT, EM.PROJECT_INITIATION_BY PROJECT_INITIATION_BY, UM.USER_NAME CREATED_BY, TO_CHAR(EM.ENTRY_CREATED_DATE,'DD-MON-RRRR') ENTRY_CREATED_DATE, EM.ENTRY_CREATED_BY ENTRY_CREATED_BY, NVL(EM.DEPOSITORY_NAME,'N.A.'), FLOOR(SYSDATE-STATUS_AS_ON_DATE) PENDING_COUNT, NVL(EM.PENDING_WITH,' ') PENDING_WITH, NVL(EPM.PRIORITY,'5') PRIORITY,TO_CHAR(ESM.TARGET_AS_ON_DATE,'DD-MON-RRRR')TARGET_AS_ON_DATE from ax_frtnt_entry_master_t em , ax_frtnt_user_group_master_t ugm, ax_frtnt_report_user_master_t um, ax_frtnt_entry_status_master_t esm, (select count(*) cnt, entry_id from ax_frtnt_cr_file_t group by entry_id) noa, AX_FRTNT_ENTRY_PRIORITY_T epm where epm.entry_id (+) = em.entry_id and noa.entry_id (+) = em.entry_id and em.ENTRY_CLOSED_STATUS = 'N' and em.user_group_id = ugm.user_group_id and em.entry_created_by = um.user_id and em.entry_id = esm.entry_id and esm.status_entry_date = (select max(status_entry_date) from ax_frtnt_entry_status_master_t where entry_id = em.entry_id) order by GROUP_NAME,APPLICATION_NAME_PID,EM.DEPOSITORY_NAME,TO_DATE(START_OF_ACTIVITY),1 ";
System.out.println(query3);
// PreparedStatement prepareresolved =connection.prepareStatement(query2);
// prepareresolved.setString(1, request.getParameter("ENTRY_ID"));
// ResultSet resultresolved = prepareresolved.executeQuery();
// request.setAttribute("resultresolved", resultresolved);
// preparedStatement = connection.prepareStatement(" SELECT PENDING_WITH,COUNT(*) FROM AX_FRTNT_ENTRY_MASTER_T WHERE ENTRY_ID=? AND ENTRY_ACTIVE_FLG='Y' AND ENTRY_CLOSED_STATUS='N' GROUP BY PENDING_WITH ORDER BY 1 DESC ");
PreparedStatement RSET_DEPOSITORY =connection.prepareStatement(query3);
RSET_DEPOSITORY.setString(1, request.getParameter("ENTRY_ID"));
ResultSet RSET_DEPOSITORYnew=RSET_DEPOSITORY.executeQuery();
request.setAttribute("RSET_DEPOSITORYnew", RSET_DEPOSITORYnew);
RequestDispatcher rd = request.getRequestDispatcher("ViewEntryDetails.jsp");
rd.forward(request, response);
}
}
// RequestDispatcher rd = request.getRequestDispatcher("ViewEntryDetails.jsp");
// rd.forward(request, response);
}
catch(Exception e)
{
System.out.println(e);
}
finally
{
dBConnection.closeConnection();
out.close();
}

I have created a resource file under DBconnection.Java Package and named that resource file Myresources.Properties and passed connection _url, username, and password.