Drawing JqPlot Chart From Servlet JSON Response -Tutorial Savvy

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).