Jquery SparkLine And DataTable Integration With Java -Tutorial Savvy

“Spark Line” is graph representation without axes.It is very smaller in size.
These graphs can be of type pie,line,bar and discrete in nature.
Jquery Provides a plugin for sparkline.
This sparkline plugin can be downloaded from the following link,

http://omnipotent.net/jquery.sparkline/#s-download

This plugin is tested in,

   Firefox 2+,
         Safari 3+,
         Opera 9,
         Google Chrome ,
         Internet Explorer 6, 7, 8, 9 & 10 ,
         IOS ,
         Android

Jquery Data table 1.9.4 is from the follwing link,

http://www.datatables.net/download/

This demo is about students and their marks displayed in jquery data table .The marks are also shows in spark line .
The Project Structure,

The Student object Student.java,

package com.sandeep.value.object;

public class Student {

 private String name;

 private int[] marks;

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }

 public int[] getMarks() {
  return marks;
 }

 public void setMarks(int[] marks) {
  this.marks = marks;
 }

}

The Student Data Service which return static data DataService.java,

package com.sandeep.value.object;

import java.util.ArrayList;
import java.util.List;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

public class DataService {
 
 public static String getStudentData(){
  
  Student s1 = new Student();
  int[] arrayMarks1 = { 100, 20, 300,50,20,36,54};
  s1.setName("Sandeep");
  s1.setMarks(arrayMarks1);
  
  Student s2 = new Student();
  int[] arrayMarks2 = { 22, 12, 17,21,30,40};
  s2.setName("Sumanta");
  s2.setMarks(arrayMarks2);
  
  Student s3 = new Student();
  int[] arrayMarks3 = { 13, 20, 23,41,15,26,24};
  s3.setName("Sangeeta");
  s3.setMarks(arrayMarks3);
  
  Student s4 = new Student();
  int[] arrayMarks4 = { 30, 32,46,24,20,33,27};
  s4.setName("Surabhi");
  s4.setMarks(arrayMarks4);
  
  Student s5 = new Student();
  int[] arrayMarks5 = { 11, 21, 22,17,24,35,42};
  s5.setName("Bapi");
  s5.setMarks(arrayMarks5);
  
  
  List<Student> listOfStudent = new ArrayList<Student>();
  listOfStudent.add(s1);
  listOfStudent.add(s2);
  listOfStudent.add(s3);
  listOfStudent.add(s4);
  listOfStudent.add(s5);
  
  DataTableObject dataTableObject = new DataTableObject();
  dataTableObject.setAaData(listOfStudent);
  
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json = gson.toJson(dataTableObject);
  
  
  return json;
  
 }

}

The Data table object which will go as response in JSON format DataTableObject.java,

package com.sandeep.value.object;

import java.util.List;

public class DataTableObject {

 int iTotalRecords;

 int iTotalDisplayRecords;

 String sEcho;

 String sColumns;

 List<Student> aaData;

 public int getiTotalRecords() {
  return iTotalRecords;
 }

 public void setiTotalRecords(int iTotalRecords) {
  this.iTotalRecords = iTotalRecords;
 }

 public int getiTotalDisplayRecords() {
  return iTotalDisplayRecords;
 }

 public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
  this.iTotalDisplayRecords = iTotalDisplayRecords;
 }

 public String getsEcho() {
  return sEcho;
 }

 public void setsEcho(String sEcho) {
  this.sEcho = sEcho;
 }

 public String getsColumns() {
  return sColumns;
 }

 public void setsColumns(String sColumns) {
  this.sColumns = sColumns;
 }

 public List<Student> getAaData() {
  return aaData;
 }

 public void setAaData(List<Student> aaData) {
  this.aaData = aaData;
 }

}

The servlet which send the JSON response is SparkLineDataServlet.java,

package com.sandeep.data.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sandeep.value.object.DataService;

public class SparkLineDataServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;

 public SparkLineDataServlet() {
  super();
 }

 protected void doGet(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  response.setContentType("application/json");
  PrintWriter out = response.getWriter();
  String jsonData = DataService.getStudentData();
  out.print(jsonData);
 }

 protected void doPost(HttpServletRequest request,
   HttpServletResponse response) throws ServletException, IOException {

  doGet(request, response);
 }

}

The HTML mark up and JAVA SCRIPT code is written in sparklineDemo.html ,

<html>
    
    <head>
        <title>JQuery data table And SparkLine Demo</title>
        <style type="text/css" title="currentStyle">
            @import"./resource/css/demo_table_jui.css";
            @import"./resource/css/jquery-ui-1.9.2.custom.min.css";
            .mark-sparkline {
                margin-right: 42px;
            }
        </style>
    </head>
    
    <body>
        <div class="table-container">
            <table cellpadding="0" cellspacing="0" border="0" class="display jqueryDataTable">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Marks</th>
                        <th>SparkLine Graph</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <script src="./resource/js/jquery-1.8.3.min.js"></script>
        <script src="./resource/js/jquery.sparkline.min.js"></script>
        <script src="./resource/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {

                var myvalues = [10, 8, 5, 7, 4, 4, 1];
                $('.spark').sparkline(myvalues);

                $(".jqueryDataTable").dataTable({
                    "bProcessing": false,
                    "bServerSide": false,
                    "sAjaxSource": "./SparkLineDataServlet",
                    "bJQueryUI": true,
                    "aoColumnDefs": [

                    {
                        "aTargets": [0],
                        "mData": "name"

                    },

                    {
                        "aTargets": [1],
                        "mData": "marks"

                    },

                    {
                        "aTargets": [2],
                        "mData": "marks",
                        "mRender": function (data, type, full) {

                            var rowcontent = "<span class='mark-sparkline mark-sparkline-pie'>" + data + "</span>" +
                                "<span class=' mark-sparkline mark-sparkline-bar'>" + data + "</span>" +
                                "<span class='mark-sparkline mark-sparkline-line'>" + data + "</span>" +
                                "<span class='mark-sparkline mark-sparkline-discrete'>" + data + "</span>";



                            return rowcontent;
                        }
                    }],

                    "fnInitComplete": function (oSettings, json) {

                        $('.mark-sparkline-pie').sparkline('html', {
                            type: 'pie'
                        });

                        $('.mark-sparkline-bar').sparkline('html', {
                            type: 'bar',
                            barColor: 'orange'
                        });

                        $('.mark-sparkline-line').sparkline('html', {
                            type: 'line'
                        });

                        $('.mark-sparkline-discrete').sparkline('html', {
                            type: 'discrete'
                        });
                    }

                });
            });
        </script>
    </body>

</html>