Draw graphs in Java webapp with Plotly - Tutorial

Using Plotly, charts can be added to Java web applications.

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 below 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 above servlet is modified to return some data (collection of Customer objects) and index.jsp is modified to draw a chart using those data.

Note: If you are familiar with Java web applications, you can jump to Part 2 directly.

Part 1

1. Build a simple web application

This project contains only one JSP page and a Servlet. JSP is used to display a form & a chart while the Servlet is used to generate raw data for the chart.

First create the Java web application project structure as shown in image.

An index.jsp and a CustomerServlet with web.xml for a simple web application. It also has a pom.xml for the build.

CustomerServlet

doGet() method prints the size parameter in the request; then forwards the request to index.jsp page.
package com.digizol.webapp.plotly;

import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.io.IOException;

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"));
        request.getRequestDispatcher("/index.jsp")
                               .forward(request, response);
    }
}

web.xml

This is the file that configures Servlet related information. Here URL "/customers" is mapped to CustomerServlet.
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <servlet>
        <servlet-name>customers</servlet-name>
        <servlet-class>
            com.digizol.webapp.plotly.CustomerServlet
        </servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>customers</servlet-name>
        <url-pattern>/customers</url-pattern>
    </servlet-mapping>

</web-app>

index.jsp

This has the ability to submit the results size to "/customers" URL which actually is received by CustomerServlet.
<html>
<body>
    <div>
        <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>
</body>
</html>
Clicking on "Draw Chart" button caused the doGet() method to be invoked on CustomerServlet.

pom.xml

Maven build file is used to generate the WAR file including the libraries.
<project xmlns="http://maven.apache.org/POM/4.0.0" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
  http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <groupId>com.digizol.webapp.plotly</groupId>
  <artifactId>webapp-with-plotly</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>webapp-with-plotly maven webapp</name>

  <dependencies>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>customers-plotly</finalName>
  </build>

</project>

2. Build & Deploy

With Maven 3.*, you can build the project using "mvn clean package" command. Deployable customers-plotly.war is generated inside target folder.
Copy customers-plotly.war into webapps directory of a Tomcat deployment and start Tomcat server.

Use below URL to see the web page & try clicking "Draw Chart" button.
http://localhost:8080/customers-plotly

Part 2: Adding charts to this webpage is covered in Part 2.

COMMENTS

BLOGGER: 2
Loading...
Name

About,2,Adsense,3,Ant,1,Apache,3,Axis,3,Blogger,1,Books,1,CentOS,2,Chrome,2,CSS,2,Database,3,Earn Online,3,Eclipse,10,Facebook,1,Firefox,10,Gmail,4,GNU/Linux,9,Google,26,GWT,8,Hardware,2,IE,5,Interesting,15,Internet,14,Java,49,Javascript,7,JBoss,1,Jenkins,1,Log4j,2,Me,6,Microsoft,2,Miscellaneous,1,News,11,Opinion,10,OSGi,1,PHP,1,Productivity,3,Programming,36,Puzzle,3,Security,4,Software,41,Sports,9,Spring,2,Story,6,Subversion,3,TDD,4,Tech,2,Tips,1,Tomcat,6,Tutorial,13,Ubuntu,4,Web application,14,Web Design,2,Web services,3,Windows,10,Yahoo,1,Zip,2,
ltr
item
Digizol: Draw graphs in Java webapp with Plotly - Tutorial
Draw graphs in Java webapp with Plotly - Tutorial
Using Plotly, charts can be added to Java web applications.
https://2.bp.blogspot.com/-mFyX9KMJLpk/WdsZ8nGBRGI/AAAAAAAACJQ/HDNN6hJ-Dr4AIFEJh7GwTfXdqgR6FLPLQCLcBGAs/s1600/plotly%2Bgraph%2Bwww.digizol.com.jpeg
https://2.bp.blogspot.com/-mFyX9KMJLpk/WdsZ8nGBRGI/AAAAAAAACJQ/HDNN6hJ-Dr4AIFEJh7GwTfXdqgR6FLPLQCLcBGAs/s72-c/plotly%2Bgraph%2Bwww.digizol.com.jpeg
Digizol
https://www.digizol.com/2017/07/plotly-graphs-java-tutorial-web_46.html
https://www.digizol.com/
https://www.digizol.com/
https://www.digizol.com/2017/07/plotly-graphs-java-tutorial-web_46.html
true
7440473
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy