Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Drawing JqPlot Chart From Servlet JSON Response

DZone's Guide to

Drawing JqPlot Chart From Servlet JSON Response

· Java Zone
Free Resource

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

  • 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


Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

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 }}