Plotly Javascript library supports generating various charts. Java Servlet & JSP based web applications can use it to display graphical representations of data.In this tutorial, you will learn to include graphs into a simple Java web application. Image above shows the graph generated at the end of the tutorial. Complete project is already moved to github for your references.
This tutorial consists of two parts.
Part 1
First step is to create a simple web application with index.jsp that can submit a user entered parameter to a Servlet which is redirecting the user back to original index.jsp.Part 2
Here the servlet is modified to return some data (collection of Customer objects) and index.jsp is modified to draw a chart using that data.Note: If you are not that familiar with Java web applications, I recommend you to start with previous Part 1 of this tutorial before moving further.
Part 2
Java web application project structure in Part 1 must be modified as shown in below image.Servlet Changes
Servlet class must return a list of Customers to the index.jsp. For that, a simple Customer class and a modification to Servlet is needed.1. Create a Customer class
This class is used to represent the data send to index.jsp from CustomerServlet. It has an id as well as age & salesCount.
package com.digizol.webapp.plotly;
public class Customer {
private String id;
private int age;
private int salesCount;
public Customer(String id, int age, int salesCount) {
this.id = id;
this.age = age;
this.salesCount = salesCount;
}
public String getId() {
return id;
}
public int getAge() {
return age;
}
public int getSalesCount() {
return salesCount;
}
}2. CustomerServlet returning Customer object list
doGet() method is modified to return a list of Customer objects. This class has 10 Customer objects. Size of returned list will be based on the 'size' request parameter submitted via index.jsp. This Servlet will return that list as "customersList" to index.jsp.
package com.digizol.webapp.plotly;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.io.IOException;
import java.util.*;
public class CustomerServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("Parameter [size] value = " + request.getParameter("size"));
// return a customers list to index.jsp
request.setAttribute("customersList",
getCustomers(resultSize(request.getParameter("size"))));
request.getRequestDispatcher("/index.jsp").forward(request, response);
}
private List<Customer> customers = new ArrayList<Customer>();
public CustomerServlet() {
initCustomersList();
}
private int resultSize(String sizeParam) {
return sizeParam==null?customers.size():Integer.parseInt(sizeParam);
}
private List<Customer> getCustomers(int size) {
return customers.subList(0, size);
}
private void initCustomersList() {
customers.add(new Customer("cust-1", 25, 17));
customers.add(new Customer("cust-2", 36, 99));
customers.add(new Customer("cust-3", 17, 0));
customers.add(new Customer("cust-4", 58, 10));
customers.add(new Customer("cust-5", 49, 32));
customers.add(new Customer("cust-6", 80, 14));
customers.add(new Customer("cust-7", 31, 78));
customers.add(new Customer("cust-8", 22, 89));
customers.add(new Customer("cust-9", 43, 21));
customers.add(new Customer("cust-10", 74, 45));
}
}3. Get plotly javascript
4. index.js Changes
index.js file needs below changes.1. Add plotly javascript file to index.jsp
2. Javascript function to draw chart
3. Add a DIV for chart
4. Update index.jsp to organize data for Javascript
5. Update index.jsp to draw chart
Fully completed index.jsp page code looks as below, do not worry. Each change is explained in details after the code.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Customer Information Center</title>
<script src="plotly/js/plotly-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function plotChart(elementId, data, layout) {
Plotly.newPlot(document.getElementById(elementId),
data, layout, {displayModeBar: false});
}
</script>
</head>
<body>
<div style="background:#ffffee; text-align:center; padding-bottom:2px">
<h1>Customer Information Center</h1>
Draw customer information graph.<p/>
<form action="customers" method="get">
Results size:
<select name="size">
<option value="5">5</option>
<option value="10">10</option>
</select>
<p/>
<button style="padding:5px">Draw Chart</button>
</form>
</div>
<c:if test="${not empty customersList}">
<h2>Age and Sales Count Chart</h2>
<div id="customersChart" ></div>
<script>
var customerAges = {
name: 'Age',
type: 'lines+markers',
line: { width: 6},
marker: { size: 8}
};
var customerSalesCount = {
name: 'Sales Count',
type: 'lines+markers',
line: { width: 3},
marker: { size: 4}
};
var age_X = new Array();
var age_Y = new Array();
var sales_count_X = new Array();
var sales_count_Y = new Array();
<c:forEach items="${customersList}" var="customer" varStatus="i">
age_X[${i.index}] = "${customer.id}";
age_Y[${i.index}] = "${customer.age}";
sales_count_X[${i.index}] = "${customer.id}";
sales_count_Y[${i.index}] = "${customer.salesCount}";
</c:forEach>
customerAges.x = age_X;
customerAges.y = age_Y;
customerSalesCount.x = sales_count_X;
customerSalesCount.y = sales_count_Y;
var data = [customerAges, customerSalesCount];
var layout = {
xaxis: {
title: 'ID',
showgrid: true,
zeroline: true,
},
yaxis: {
showgrid: true,
showline: true,
zeroline: true,
}
};
plotChart("customersChart", data, layout);
</script>
</c:if>
</body>
</html>
1. Add plotly javascript file to index.jsp
A reference to plotly Javascript file is placed within <head> tags of index.jsp as below.
<head>
<title>Customer Information Center</title>
<script src="plotly/js/plotly-latest.min.js" type="text/javascript"></script>
</head>Write a simple function named "plotChart" to draw graphs using plotly as follows inside <head> tag of index.jsp
<head>
<title>Customer Information Center</title>
<script src="plotly/js/plotly-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function plotChart(elementId, data, layout) {
Plotly.newPlot(document.getElementById(elementId),
data, layout, {displayModeBar: false});
}
</script>
</head>It is required to provide an empty DIV element for plotly to generate the chart.
<div id="customersChart" ></div>index.jsp page must iterate through the list of Customer objects returns from CustomerServlet as "customersList". Then, Javascript objects must be populated using that data in order to generate the graphs.
As Customer has two attributes age & salesCount, it is possible to draw two lines in one chart. As shown below, x & y properties of customerAges and customerSalesCount must be populated correctly.
var customerAges = {
name: 'Age',
type: 'lines+markers'
};
var customerSalesCount = {
name: 'Sales Count',
type: 'lines+markers',
};
var age_X = new Array();
var age_Y = new Array();
var sales_count_X = new Array();
var sales_count_Y = new Array();
age_X[${i.index}] = "${customer.id}";
age_Y[${i.index}] = "${customer.age}";
sales_count_X[${i.index}] = "${customer.id}";
sales_count_Y[${i.index}] = "${customer.salesCount}";
customerAges.x = age_X;
customerAges.y = age_Y;
customerSalesCount.x = sales_count_X;
customerSalesCount.y = sales_count_Y;Using customerAges & customerSalesCount Javascript objects, invoke plotChart() method to generate a chart inside "customersChart" div.
var data = [customerAges, customerSalesCount];
var layout = {
xaxis: {
title: 'ID'
},
yaxis: {
showgrid: true
}
};
plotChart("customersChart", data, layout);Final Result
Below is the final outcome of the application after building & deploying. It shows two line graphs, for age and sales count.Hope this helps.



By default Eclipse does not support local DTD files. Because of this, many developers loose a privilege of Eclipse; content assistance for parameter/attribute is missing while working with DTD based XML files. However if you are connected to Internet, you will not face this issue.
Then click on "Add..." and select "Catalog Entry". For a single local DTD file you need to add one Catalog Entry. 


Many Eclipse "Launch Configuration" created has so much details;
Each configuration will be saved into separate XML files, but with the extension as ".launch". 
Eclipse IDE is developed based on OSGi plugin architecture, but I had not seen the list of OSGi bundles that are used in my Eclipse installation. Today I noticed that there is a way to find the list of bundled used, and it is quite simple. So I thought of sharing it with you.
How to validate the format of a given string according to a given set of opening-closing character pairs? This has been raised as an interview question, so I thought of writing a simple program to solve this.
Are your Jenkins builds failing due to unavoidable reasons like unavailability of external databases, file systems etc? The only solution you might be having right now is to reschedule the build after fixing that external issue. In this post, I will be discussing on how you can automatically rerun a failed build.
When it is installed, there will be a new action named "Retry build after failure" added to the post-build action list in job configuration page (as shown). 
This is a quick guide on how to use log4j in your Java project. This task requires only five simple steps listed below. Each of these step is explained in details below.
Given two sorted arrays of same length, find pairs of numbers (one from each array) which has the minimum distance between those two numbers. This is the last weeks Thursday Coding Puzzle. Since both arrays are sorted, binary search is going be really useful in searching the values in arrays.
Test cases for Binary search might not be something you have already written, but the implementation must be an old exercise you may have done in your algorithm lessons. May be it is easy for you to write it yourself without referring to examples or helping materials? I think it's time for you to try it yourself if you have not done it
Initial part of finding second highest frequency characters in a text was discussed previously and covered the scenarios where a single character is the most frequent. Since this is the continuation post of that, I strongly recommend you to read the
Finding second highest frequency character in a text is last weeks Thursdays Dzone Code Puzzle. Intention of this post is to try and work out this interview oriented problem in Java with you by explaining the way I am approaching this task. In return, both you and myself can learn through a discussion.
Topics like password strength, protection,
Changing default JSESSIONID name of cookie and/or parameter is the objective. Deployed J2EE web applications use browser cookie or parameter based session management technique. By default session cookie name is defined as “JSESSIONID” and session id parameter as “jsessionid” in Apache Tomcat servers. These names can be renamed by specifying required values for correct system properties.