A passionate Java Web Developer and Blogger.Continuously testing various technologies and publishing it as post to my blog. Sandeep is a DZone MVB and is not an employee of DZone and has posted 15 posts at DZone. You can read more from them at their website. View Full User Profile

Drawing JqPlot Chart From Servlet JSON Response

06.12.2013
| 4536 views |
  • submit to reddit
  • 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 Sandeep Patel, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)