- Google provides Visualization API to draw charts and other components.
- More Details can be found on :-
- Different type of ready to use chart types are exposed a java script classes to the developers for customize.
- In this Demo, "We will see how a visualization charts get rendered in browser for a JSON data response from a Servlet".
- Project Structure,
- The java servlet uses GSON API jar library for converting a array list of student data to its JSON representation.
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 JSON response data format is as below,
- The HTML markup is present in visualization-chart-demo.html file,
<html> <head> <title>Google Visualization Chart Demo</title> </head> <body> <div id="student-bar-chart"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="./js/visualization-chart-script.js"></script> </body> </html>
- The above html has a "DIV#student-bar-chart" html element for bar chart container.It calls JQUERY and JSAPI library from Google hosted CDN.Finally it calls our script code present in
visualization-chart-script.js file.
var TUTORIAL_SAVVY = {
/*return google visualization data*/
getvisualizationData: function (jsonData) {
var point1, point2, dataArray = [],
data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Marks in Mathematics');
data.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
data.addColumn('number', 'Marks In Computer');
data.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
/* for loop code for changing inputdata to 'data' of type google.visualization.DataTable*/
$.each(jsonData, function (i, obj) {
point1 = "Math : " + obj.mathematicsMark + "";
point2 = "Computer : " + obj.computerMark + "";
dataArray.push([obj.name, obj.mathematicsMark, TUTORIAL_SAVVY.returnTooltip(point1, point2), obj.computerMark, TUTORIAL_SAVVY.returnTooltip(point1, point2)]);
});
data.addRows(dataArray);
return data;
},
/*return options for bar chart: these options are for various configuration of chart*/
getOptionForBarchart: function () {
var options = {
animation: {
duration: 2000,
easing: 'out'
},
hAxis: {
baselineColor: '#ccc'
},
vAxis: {
baselineColor: '#ccc',
gridlineColor: '#fff'
},
isStacked: true,
height: 400,
backgroundColor: '#fff',
colors: ["#68130E", "#c65533"],
fontName: 'roboto',
fontSize: 12,
legend: {
position: 'top',
alignment: 'end',
textStyle: {
color: '#b3b8bc',
fontName: 'roboto',
fontSize: 12
}
},
tooltip: {
isHtml: true,
showColorCode: true,
isStacked: true
}
};
return options;
},
/*Draws a Bar chart*/
drawBarChart: function (inputdata) {
var barOptions = TUTORIAL_SAVVY.getOptionForBarchart(),
data = TUTORIAL_SAVVY.getvisualizationData(inputdata),
chart = new google.visualization.ColumnChart(document.getElementById('student-bar-chart'));
chart.draw(data, barOptions);
/*for redrawing the bar chart on window resize*/
$(window).resize(function () {
chart.draw(data, barOptions);
});
},
/* Returns a custom HTML tooltip for Visualization chart*/
returnTooltip: function (dataPoint1, dataPoint2) {
return "<div style='height:30px;width:150px;font:12px,roboto;padding:15px 5px 5px 5px;border-radius:3px;'>" +
"<span style='color:#68130E;font:12px,roboto;padding-right:20px;'>" + dataPoint1 + "</span>" +
"<span style='color:#c65533;font:12px,roboto;'>" + dataPoint2 + "</span></div>";
},
/*Makes ajax call to servlet and download data */
getStudentData: function () {
$.ajax({
url: "StudentJsonDataServlet",
dataType: "JSON",
success: function (data) {
TUTORIAL_SAVVY.drawBarChart(data);
}
});
}
};
google.load("visualization", "1", {
packages: ["corechart"]
});
$(document).ready(function () {
TUTORIAL_SAVVY.getStudentData();
});
- The above javascript has following function with its purpose:-
drawBarChart()------ On SUCCESS of AJAX call this method get called.
getOptionForBarchart()-----Return the CONFIGURATION for bar chart.
getvisualizationData()------Formats the JSON data to Google Visualization Data format.
returnTooltip()-------Returns the HTML string for CUSTOM tooltip.
- The output bar chart :-
- Download Link for the Demo project:-
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}