Pages Navigation Menu

Coding is much easier than you think

Pie Chart using YUI3 jquery chart plugin in Java web application

In this article we will learn to create a pie chart in Servlet with YUI3 jquery chart plugin and this demo is as follows
pie chart jquery
YUI3 provides a “charts” module for creating a wide variety of good looking charts, this module can be called using use() method. These charts requires input data to be in JSON format. For more Information on YUI3 chart, read on its official document –
Recommended reading
Create Auto-Refreshing Pie Chart/Bar Chart in Servlet dynamically using JFreeChart
In this example, I am going to retrieve values from a csv file insted of database and display its data in from of pie chart, for this, I am going to use OpenCSV library which simplifies the work of parsing CSV files. Here the Data table will load the data by making an Ajax call.
• Refer the article on how to Read / Write CSV file in Java using Opencsv library/ .
Download the csv file from which the data is to be read from here and place it under src folder. This csv files contains 2 columns – Source and Percentage.
Final folder structure is as shown below
YUI3 CHart integration in java web application

Model class

Create a model class that gets and sets the data from the columns of the csv file.

package com.model;

public class AirPollution {

	private String Source;
	private int Percentage;

	public AirPollution() {

	public AirPollution(String source, int percentage) {
		Source = source;
		Percentage = percentage;

	public String getSource() {
		return Source;

	public int getPercentage() {
		return Percentage;

	public void setSource(String source) {
		Source = source;

	public void setPercentage(int percentage) {
		Percentage = percentage;


Business class

Create a Business Service class that would fetch data from the csv file using model class.



package com.service;

import java.util.LinkedList;
import java.util.List;


import com.model.AirPollution;

public class BusinessService {

public static List<AirPollution> getAirPollutionSource() {

	List<AirPollution> airPollutionList = new LinkedList<AirPollution>();
	String fileName = "AirPollution.csv";

	InputStream is = Thread.currentThread().getContextClassLoader()
	BufferedReader br = new BufferedReader(new InputStreamReader(is));

	try {
		CSVReader reader = new CSVReader(br,',','\"',1);
		String[] row = null;
		while ((row = reader.readNext()) != null) 
		airPollutionList.add(new AirPollution(row[0], Integer.parseInt(row[1])));
	} catch (IOException e) {
	return airPollutionList;

Also read
Struts2-Jfreechart integration

Jsp page

Now create the jsp file to display the data fetched from csv file in form of pie chart.

<!DOCTYPE html>
<title>Pie Chart using YUI3 Charts in Java web application</title>
<link rel="stylesheet" href="css/style.css">
<script src=""></script>
function m(Y) {
	var data, urifordata = "./PieChartDemo", 
	marklinechart ="#pieChartId"), configuration = {
		method : 'POST',
		headers : {
			'Content-Type' : 'application/json',

		on : {
			success : function(transactionid, response,	arguments) 
			data = JSON.parse(response.responseText),
				pieChart = new Y.Chart(
					type : "pie",
					stacked : true,
					dataProvider : data,
					categoryKey : 'Source',
					legend : {
						position : "right",
						width : 100,
						height : 100,
					render : marklinechart,

	failure : function(transactionid, response,	arguments) {
				alert("Error In Data Loading.");
	};, configuration);
#pieChartId {
	height: 400px;
	margin: 10px;
	max-width: 500px;
	width: 90%;
<div class="wrapper">
<div class="container">
	<div class="header">
		<h3>Pie Chart Demo using YUI3 Charts in Java web application</h3>
	<br />
	<div id="pieChartId"></div>





package com.controller;

import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.model.AirPollution;
import com.service.BusinessService;

public class PieChartDemo extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {

		// Call business service class to get list of Air Pollution Source
		List<AirPollution> airPollutionList = BusinessService.getAirPollutionSource();

		Gson gson = new GsonBuilder().setPrettyPrinting().create();
		// Convert Java Object to Json
		String json = gson.toJson(airPollutionList);

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);



Make sure you have done servlet mapping properly in web.xml file as shown below




YUI library Official website

About Mohaideen Jamil

I'm a Full stack developer of IT exp in J2EE, AngularJs, MicroServices, Docker, Spring (Boot, MVC, Cloud), Bluemix, DevOps. Follow me on Facebook or Google Plus. If you like my tutorials, consider making a donation to this charity, thanks.

%d bloggers like this: