Provides Tutorials on Web Technologies.

YUI Chart Integration With Java



  • YUI3 provides a "charts" module to render chart in browser.
  • This module can be called using use() method.
  • YUI charts provides many features like "legend creation", "grid lines", ''tool tip" etc.
  • These charts takes input data in JSON format.
  • More Information can be found from the link:-
          http://yuilibrary.com/yui/docs/charts/

  • Here In this Demo We are calling a Servlet for students marks in different subjects and student names.These response data will be in JSON format.
  • The Servlet is called asynchronously using YUI  IO  module.
  • The Project Structure is like,
  • The Student Object Student.java,          
package com.sandeep.value.object;

public class Student {

 private String name;

 private int mathMarks;

 private int physicsMarks;

 private int chemistryMarks;

 private int biologyMarks;

 public int getMathMarks() {
  return mathMarks;
 }

 public void setMathMarks(int mathMarks) {
  this.mathMarks = mathMarks;
 }

 public int getPhysicsMarks() {
  return physicsMarks;
 }

 public void setPhysicsMarks(int physicsMarks) {
  this.physicsMarks = physicsMarks;
 }

 public int getChemistryMarks() {
  return chemistryMarks;
 }

 public void setChemistryMarks(int chemistryMarks) {
  this.chemistryMarks = chemistryMarks;
 }

 public int getBiologyMarks() {
  return biologyMarks;
 }

 public void setBiologyMarks(int biologyMarks) {
  this.biologyMarks = biologyMarks;
 }

 public String getName() {
  return name;
 }

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

}
  • The Student Static data service 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 = { 10, 20, 30,50};
  s1.setName("Sandeep");
  s1.setMathMarks(arrayMarks1[0]);
  s1.setBiologyMarks(arrayMarks1[1]);
  s1.setChemistryMarks(arrayMarks1[2]);
  s1.setPhysicsMarks(arrayMarks1[3]);
  
  Student s2 = new Student();
  int[] arrayMarks2 = { 22, 12, 17,21};
  s2.setName("Sumanta");
  s2.setMathMarks(arrayMarks2[0]);
  s2.setBiologyMarks(arrayMarks2[1]);
  s2.setChemistryMarks(arrayMarks2[2]);
  s2.setPhysicsMarks(arrayMarks2[3]);
  
  
  Student s3 = new Student();
  int[] arrayMarks3 = { 13, 20, 23,41};
  s3.setName("Sangeeta");
  s3.setMathMarks(arrayMarks3[0]);
  s3.setBiologyMarks(arrayMarks3[1]);
  s3.setChemistryMarks(arrayMarks3[2]);
  s3.setPhysicsMarks(arrayMarks3[3]);
  
  Student s4 = new Student();
  int[] arrayMarks4 = { 30, 32,46,24};
  s4.setName("Surabhi");
  s4.setMathMarks(arrayMarks4[0]);
  s4.setBiologyMarks(arrayMarks4[1]);
  s4.setChemistryMarks(arrayMarks4[2]);
  s4.setPhysicsMarks(arrayMarks4[3]);
  
  Student s5 = new Student();
  int[] arrayMarks5 = { 11, 21, 22,17};
  s5.setName("Bapi");
  s5.setMathMarks(arrayMarks5[0]);
  s5.setBiologyMarks(arrayMarks5[1]);
  s5.setChemistryMarks(arrayMarks5[2]);
  s5.setPhysicsMarks(arrayMarks5[3]);
  
  
  
  List<Student> listOfStudent = new ArrayList<Student>();
  listOfStudent.add(s1);
  listOfStudent.add(s2);
  listOfStudent.add(s3);
  listOfStudent.add(s4);
  listOfStudent.add(s5);
  
  Gson gson = new GsonBuilder().setPrettyPrinting().create();
  String json = gson.toJson(listOfStudent);
  
  
  return json;
  
 }

}
  • The Student data servlet StudentDataServlet.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 StudentDataServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
       
    
    public StudentDataServlet() {
        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 markup and YUI script for the table is,
<!DOCTYPE html>
<html>
    
    <head>
        <title>YUI3 Charts And JavaIntegration</title>
        <script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
        <style>
            #student-mark-line-chart {
                height: 400px;
                margin: 10px;
                max-width: 500px;
                width: 90%;
            }
        </style>
    </head>
    
    <body class="yui3-skin-sam">
        <div id="student-mark-chart-container">
            <div id="student-mark-line-chart"></div>
        </div>
        <script>
            YUI().use('charts', 'charts-legend', 'io', function (Y) {

                var configuration,

                studentTable, data,

                urifordata = "./StudentDataServlet",

                    marklinechart = Y.one("#student-mark-line-chart"),

                    configuration = {

                        method: 'POST',

                        headers: {
                            'Content-Type': 'application/json',
                        },

                        on: {

                            success: function (transactionid, response, arguments) {

                                data = JSON.parse(response.responseText),

                                studentMarksChart = new Y.Chart({
                                    type: "column",
                                    stacked: true,
                                    dataProvider: data,
                                    categoryKey: 'name',
                                    legend: {
                                        position: "right",
                                        width: 100,
                                        height: 100,
                                        styles: {
                                            hAlign: "center",
                                            hSpacing: 4
                                        }
                                    },
                                    horizontalGridlines: true,
                                    verticalGridlines: true,
                                    render: marklinechart,
                                });


                            },

                            failure: function (transactionid, response, arguments) {

                                alert("Failure In Data Loading.");
                            }

                        }
                    };

                Y.io(urifordata, configuration);


            });
        </script>
    </body>

</html>
  • The AJAX call response and JSON format  in Firebug console is, 
    
  • The Firebug Inspection,
  
  •  Output with tool tip is,
 
  • Output with grid line is,