Over a million developers have joined DZone.
Platinum Partner

Drawing JqPlot Chart From Servlet JSON Response

· Java Zone

The Java Zone is brought to you in partnership with JetBrains.  Learn more about Kotlin, a new programming language designed by JetBrains to solve problems that software developers face every day.

  • 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 JetBrains.  Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience.

Topics:

Published at DZone with permission of Sandeep Patel , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}