Integrating Chart JS Library With Java
Join the DZone community and get the full member experience.
Join For Free- "Chart JS Library" provides API for drawing different charts.
- Drawing is based on HTML CANVAS Element.
- Download Link:-
- In this Demo, "We will draw a Radar Chart .The Student input data is JSON in nature.The Servlet returns the JSON data when called by Jquery Ajax method.The Student Java class object is converted to JSON representation using GSON Library".
- The Java web project structure,

- The Student Servlet StudentJsonDataServlet.java ,1
package com.sandeep.chartjs.servlet;
23import java.io.IOException;
4import java.util.ArrayList;
5import java.util.List;
67import javax.servlet.ServletException;
8import javax.servlet.annotation.WebServlet;
9import javax.servlet.http.HttpServlet;
10import javax.servlet.http.HttpServletRequest;
11import javax.servlet.http.HttpServletResponse;
1213import com.google.gson.Gson;
14import com.sandeep.chartjs.data.Student;
1516"/StudentJsonDataServlet") (
17public class StudentJsonDataServlet extends HttpServlet {
1819private static final long serialVersionUID = 1L;
2021public StudentJsonDataServlet() {
22super();
23}
2425protected void doGet(HttpServletRequest request,
26HttpServletResponse response) throws ServletException, IOException {
2728List<Student> listOfStudent = getStudentData();
2930Gson gson = new Gson();
3132String jsonString = gson.toJson(listOfStudent);
3334response.setContentType("application/json");
3536response.getWriter().write(jsonString);
3738}
3940private List<Student> getStudentData() {
4142List<Student> listOfStudent = new ArrayList<Student>();
43Student s1 = new Student();
44s1.setName("Sandeep");
45s1.setComputerMark(75);
46s1.setMathematicsMark(26);
47s1.setGeographyMark(91);
48s1.setHistoryMark(55);
49s1.setLitratureMark(36);
50listOfStudent.add(s1);
5152return listOfStudent;
53}
54}
- The HTML markup chartjs-demo.html,171
<html>
2<head>
3<title>Chart JS Library Demo</title>
4<style>
56</style>
7</head>
8<body>
910<canvas id="canvas" height="500" width="500"></canvas>
1112<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
13<script type="text/javascript" src="./js/Chart.min.js"></script>
14<script type="text/javascript" src="./js/ts-chart-script.js"></script>
1516</body>
17</html>
- The java script file for radar chart ts-chart-script.js,871
var TUTORIAL_SAVVY ={
23/*Makes the AJAX calll (synchronous) to load a Student Data*/
4loadStudentData : function(){
56var formattedstudentListArray =[];
78$.ajax({
910async: false,
1112url: "StudentJsonDataServlet",
1314dataType:"json",
1516success: function(studentJsonData) {
1718console.log(studentJsonData);
1920$.each(studentJsonData,function(index,aStudent){
2122formattedstudentListArray.push([aStudent.mathematicsMark,aStudent.computerMark,aStudent.historyMark,aStudent.litratureMark,aStudent.geographyMark]);
23});
24}
25});
26return formattedstudentListArray;
27},
28/*Crate the custom Object with the data*/
29createChartData : function(jsonData){
3031console.log(jsonData);
323334return {
3536labels : ["Mathematics", "Computers", "History","Literature", "Geography"],
3738datasets : [
39{
40fillColor : "rgba(255,0,0,0.3)",
4142strokeColor : "rgba(0,255,0,1)",
4344pointColor : "rgba(0,0,255,1)",
4546pointStrokeColor : "rgba(0,0,255,1)",
4748/*As Ajax response data is a multidimensional array, we have 'student' data in 0th position*/
49data : jsonData[0]
50}
51]
52};
53},
54/*Renders the Chart on a canvas and returns the reference to chart*/
55renderStudenrRadarChart:function(radarChartData){
5657var context2D = document.getElementById("canvas").getContext("2d"),
5859myRadar = new Chart(context2D).
6061Radar(radarChartData,{
6263scaleShowLabels : false,
6465pointLabelFontSize : 10
66});
676869return myRadar;
70},
71/*Initalization Student render chart*/
72initRadarChart : function(){
7374var studentData = TUTORIAL_SAVVY.loadStudentData();
7576chartData = TUTORIAL_SAVVY.createChartData(studentData);
7778radarChartObj = TUTORIAL_SAVVY.renderStudenrRadarChart(chartData);
7980}
81};
828384$(document).ready(function(){
8586TUTORIAL_SAVVY.initRadarChart();
87});
Published at DZone with permission of Sandeep Patel, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments