YUI Chart Integration With Java -Tutorial Savvy

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

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>