Platinum Partner
java,frameworks

Drawing JqPlot Chart From Servlet JSON Response

  • 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


Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

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

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}