Generating Pie Chart in Java from database using google chart
Google chart is a tool provided by google to add charts in our application.
If you want to integrate chart and graphs in your project you can use this google api to do that. In this post, we are going to write a sample code to generate pie chart from the database tables.
External Jars
jars used:
gson-2.3.1.jar
json-20140107.jar
Create the dynamic web project in java.
In this example, We have created Student entity with two variables work and hr.These two variables we will be displaying in pie chart.
Student.java
package com.skuera;
/**
* @author skuera
*
*/
public class Student {
String deptName;
int workHour;
public Student(String deptName, int workHour) {
super();
this.deptName = deptName;
this.workHour = workHour;
}
}
If you want to integrate chart and graphs in your project you can use this google api to do that. In this post, we are going to write a sample code to generate pie chart from the database tables.
External Jars
jars used:
gson-2.3.1.jar
json-20140107.jar
Create the dynamic web project in java.
In this example, We have created Student entity with two variables work and hr.These two variables we will be displaying in pie chart.
Student.java
package com.skuera;
/**
* @author skuera
*
*/
public class Student {
String deptName;
int workHour;
public Student(String deptName, int workHour) {
super();
this.deptName = deptName;
this.workHour = workHour;
}
}
In below servlet student list is getting created which we can get from the database.Creating JSON string from the same and setting on response,
Chartservlet.java
package com.skuera;
import java.io.IOException;
import java.io.PrintWriter;
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 org.json.JSONObject;
import com.google.gson.Gson;
/**
* Servlet implementation class Chartservlet
*/
/**
* @author skuera
*
*/
@WebServlet("/ChartServlet")
public class Chartservlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Chartservlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Student> liststu=new ArrayList<Student>();
Student s1=new Student("Doc", 11);
Student s2=new Student("Eng", 12);
liststu.add(s1);
liststu.add(s2);
Gson gson=new Gson();
String jsonString=gson.toJson(liststu);
response.setContentType("application/json");
response.getWriter().write(jsonString);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
In this jsp page I getting response from servlet and displaying the same on pie chart.
index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "ChartServlet",
dataType: "json",
async: false
}).responseText;
var chartData=JSON.parse(jsonData);
var data = new google.visualization.DataTable();
data.addColumn('string','deptName');
data.addColumn('number','workHour');
for(var i=0;i<chartData.length;i++){
var currentObj = chartData[i];
data.addRow([currentObj["deptName"],currentObj["workHour"]]);
}
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, {width: 400, height: 240});
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Run the application.Below chart will be shown
References:https://developers.google.com/chart/interactive/docs/quick_start
Give you suggestion in comments.If you like the post Share with your friends on social network.
Give you suggestion in comments.If you like the post Share with your friends on social network.
Generating Pie Chart in Java from database using google chart
Reviewed by JavaInstance
on
11:24:00 AM
Rating:
Reviewed by JavaInstance
on
11:24:00 AM
Rating:
No comments: