Over a million developers have joined DZone.

Drawing JqPlot Chart From Servlet JSON Response

· Java Zone

Discover how AppDynamics steps in to upgrade your performance game and prevent your enterprise from these top 10 Java performance problems, brought to you in partnership with AppDynamics.

  • JQPLOT provides chart libraries based on jquery.
  • It provides different "renderer" for different type of charts.
  • It can be downloaded:-

         https://bitbucket.org/cleonello/jqplot/downloads/

  • In this Demo, "We will see How Jquery Ajax downloads Student Data from java servlet.and formats to specified bubble chart  format and renders  bubble chart".
  • To draw a bubble chart these follow JavaScript files are requiered:-

                    jquery.min.js ---------------------------------JS Library
  jquery.jqplot.min.js  ---------------------- JS Library
  jqplot.bubbleRenderer.min.js -------------JS Library
            jqplot.json2.min.js  -------------------------JS Library
                    ts-jqplot-script.js --------------------------Our Demo javascript code

  •  To draw a bubble chart these follow CSS  files are required:-

         jquery.jqplot.min.css -------------------CSS Library from jqplot

  • The project structure,

  •  The servlet for student data is StudentJsonDataServlet.java,

    package com.sandeep.visual.servlet;
     
    import java.io.IOException;
    import java.util.ArrayList;
    import java.util.List;
     
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import com.google.gson.Gson;
    import com.sandeep.visual.data.Student;
     
    @WebServlet("/StudentJsonDataServlet")
    public class StudentJsonDataServlet extends HttpServlet {
     
     private static final long serialVersionUID = 1L;
     
     public StudentJsonDataServlet() {
      super();
     }
     
     protected void doGet(HttpServletRequest request,
       HttpServletResponse response) throws ServletException, IOException {
     
      List<Student> listOfStudent = getStudentData();
     
      Gson gson = new Gson();
     
      String jsonString = gson.toJson(listOfStudent);
     
      response.setContentType("application/json");
     
      response.getWriter().write(jsonString);
     
     }
     
     private List<Student> getStudentData() {
     
      List<Student> listOfStudent = new ArrayList<Student>();
      Student s1 = new Student();
      s1.setName("Sandeep");
      s1.setComputerMark(75);
      s1.setMathematicsMark(26);
      listOfStudent.add(s1);
     
      Student s2 = new Student();
      s2.setName("Bapi");
      s2.setComputerMark(60);
      s2.setMathematicsMark(63);
      listOfStudent.add(s2);
     
      Student s3 = new Student();
      s3.setName("Raja");
      s3.setComputerMark(40);
      s3.setMathematicsMark(45);
      listOfStudent.add(s3);
     
      Student s4 = new Student();
      s4.setName("Sonu");
      s4.setMathematicsMark(29);
      s4.setComputerMark(78);
      listOfStudent.add(s4);
     
      return listOfStudent;
     }
    }
    
  • The Student Data Servlet response format

    • The HTML markup jqplot-demo.html has

      <html>
       <head>
        <title>JqPlot Bubble Chart : Java JSON</title>
        <link rel="stylesheet" href="./css/jquery.jqplot.min.css">
       </head>
       <body>
         
        <div id="ts-student-chart"></div>
         
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="./js/jquery.jqplot.min.js"></script>
        <script type="text/javascript" src="./js/jqplot.bubbleRenderer.min.js"></script>
        <script type="text/javascript" src="./js/jqplot.json2.min.js"></script>
        <script type="text/javascript" src="./js/ts-jqplot-script.js"></script>
       </body>
      </html>
      
  • The javascript file for chart rendering ts-jqplot-script.js,

    var TUTORIAL_SAVVY = {
     
     /*Makes Ajax calls to Servlet to download student Data*/
     downloadStudentData: function () {
     
      var formattedstudentListArray = [];
     
      $.ajax({
     
       async: false,
     
       url: "StudentJsonDataServlet",
     
       dataType: "json",
     
       success: function (studentJsonData) {
     
        $.each(studentJsonData, function (index, aStudent) {
     
         formattedstudentListArray.push([aStudent.mathematicsMark, aStudent.computerMark, (aStudent.mathematicsMark + aStudent.computerMark), aStudent.name]);
        });
       }
      });
      return formattedstudentListArray;
     },
     
     /*Draws Bubble Chart For Student Data*/
     drawStudentBubbleChart: function (formattedStudentJsonData) {
     
      $.jqplot.config.enablePlugins = true;
     
      $.jqplot('ts-student-chart', [formattedStudentJsonData], {
     
       title: 'Student Marks In Mathematic And Computer',
     
       seriesDefaults: {
        renderer: $.jqplot.BubbleRenderer,
        rendererOptions: {
         bubbleGradients: true
        },
        shadow: true
       }
      });
     }
    };
     
    $(document).ready(function () {
     
     var formatStudentData = TUTORIAL_SAVVY.downloadStudentData();
     
     TUTORIAL_SAVVY.drawStudentBubbleChart(formatStudentData);
    });
  • The downloadStudentData() method downloads student data and formats the data.A JQPLOT BUBBLE chart expect data in multidimensional array.
  •           Each Array represents a Student Data and has 4 parameters.

     [ param1,  param2,  parame3, param4 ]

    param1 and param2 :
      ------Represent a point(x,y) .
                                -------In Demo point(mathematicsMark,computerMark) for drawing bubble.
      param3:
                          ------Represent a radius(r) .
      -------In Demo r = mathematicsMark + computerMark
           param4:
                        --------Represents an optional parameter(for color or label point).
    -------In Demo It is name of student(aStudent.name).
    •  The Firebug Inspection shows the bubble chart is drawn on HTML5 CANVAS Element.

    • The output of bubble chart in Browser,
    •  Download Code Link:-
    demo code download link


The Java Zone is brought to you in partnership with AppDynamics. AppDynamics helps you gain the fundamentals behind application performance, and implement best practices so you can proactively analyze and act on performance problems as they arise, and more specifically with your Java applications. Start a Free Trial.

Topics:

Published at DZone with permission of Sandeep Patel, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}