We will see how to create Google chart using JSF 2. We will create here pie chart. We know that Google chart basically displays different statistical data on different chart types such as column chart, bar chart, line chart, pie chart etc. You can have a look at the URL https://developers.google.com/chart/ for more information.

You can integrate Google chart with any server side technology but here I will show you how to integrate Google chart using JSF. This tutorial shows step by step so that we can understand how it happens. It displays the data for area-wise top seven countries in pie chart. You can also use other charts for other purposes. In this example I have used static sample data and the actual data should come from database or other sources. You can change the source of data as per your requirements.


Eclipse Neon, JDK 1.8, JSF 2.2.4, Tomcat 9.0.24

Final Results

Data on Google pie chart is shown below:

google chart using jsf 2

When you mouse hover on the different sections on the chart:

google chart using jsf 2

Creating Project

Create a maven based web project in Eclipse with the following details:

Group Id: com.roytuts
Artifact Id: jsf2-google-pie-chart

Updating Build File

Update the maven build file pom.xml to include the required dependencies for our project.

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

Updating Deployment Descriptor

Update deployment descriptor file – web.xml – to include the required configurations.

We have the central request and response handler servlet FacesServlet which is loaded on application startup.

We have put the URL pattern and welcome file where data on pie chart will be shown.

We have put javax.faces.PROJECT_STAGE into Development to indicate that our application is currently in development mode.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
	<display-name>JSF 2 Google Pie Chart</display-name>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-name>Faces Servlet</servlet-name>

Creating Chart Data

Ideally data should be provided from database or any external source but here for our example, we will create some sample data and will display on Google pie chart using JSF 2.

package com.roytuts.jsf2.google.chart.data;
import java.util.ArrayList;
import java.util.List;
public class PieChartData {
	private static final List<KeyValue> pieDataList;
	static {
		pieDataList = new ArrayList<PieChartData.KeyValue>();
		pieDataList.add(new KeyValue("Russia", "17098242"));
		pieDataList.add(new KeyValue("Canada", "9984670"));
		pieDataList.add(new KeyValue("USA", "9826675"));
		pieDataList.add(new KeyValue("China", "9596961"));
		pieDataList.add(new KeyValue("Brazil", "8514877"));
		pieDataList.add(new KeyValue("Australia", "7741220"));
		pieDataList.add(new KeyValue("India", "3287263"));
	public static List<KeyValue> getPieDataList() {
		return pieDataList;
	public static class KeyValue {
		String key;
		String value;
		public KeyValue(String key, String value) {
			this.key = key;
			this.value = value;
		public String getKey() {
			return key;
		public void setKey(String key) {
			this.key = key;
		public String getValue() {
			return value;
		public void setValue(String value) {
			this.value = value;

Creating Managed Bean

We will create JSF managed bean to handle request and response for the clients.

This managed bean will load appropriate view file to display data on the view.

package com.roytuts.jsf2.google.chart.mbean;
import java.io.Serializable;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import com.roytuts.jsf2.google.chart.data.PieChartData;
import com.roytuts.jsf2.google.chart.data.PieChartData.KeyValue;
public class PieChartMBean implements Serializable {
	private static final long serialVersionUID = 1L;
	private String pieChartData;
	private List<KeyValue> pieDataList;
	public PieChartMBean() {
		this.pieDataList = PieChartData.getPieDataList();
	public String getPieChartData() {
		if (pieChartData == null || pieChartData.trim().length() <= 0) {
		return pieChartData;
	private void populateData() {
		StringBuilder stringBuilder = new StringBuilder();
		for (KeyValue pieData : pieDataList) {
		pieChartData = stringBuilder.toString().substring(0, stringBuilder.toString().length() - 1);

Creating View File

Create a view called chart.xhtml which will render the Google Pie Chart with the data from JSF Managed Bean.

In view you can initialize data to chart in two ways:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');


var data = google.visualization.arrayToDataTable([
	['Country', 'Area(square km)'],

In the above code, we simply call the backing bean property and add the data to the Google Pie Chart.

The source code for the view file is given below:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	<title>Google Chart - JSF 2</title>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">
		// Load the Visualization API and the piechart package.
		google.charts.load('current', {'packages':['corechart']});
		/* google.load('visualization', '1.0', {
			'packages' : [ 'corechart' ]
		}); */
		// Set a callback to run when the Google Visualization API is loaded.
			// Callback that creates and populates a data table,
			// instantiates the pie chart, passes in the data and
			// draws it.
		function drawChart() {
			// Create the data table.
			var data = google.visualization.arrayToDataTable([
				[ 'Country', 'Area(square km)' ],
			// Set chart options
			var options = {
				'title' : 'Area-wise Top Seven Countries in the World',
				is3D : true,
				pieSliceText : 'label',
				tooltip : {
					showColorCode : true
				'width' : 900,
				'height' : 500
			// Instantiate and draw our chart, passing in some options.
			var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
			chart.draw(data, options);
	<div style="width: 600px;">
		<div id="chart_div"></div>

Testing the Application

Now hit the URL http://localhost:8080/jsf2-google-pie-chart/ in the browser and you will see the exact output as shown in the image in Final Results section above.

Source Code

You can download source code.

Thanks for reading.


0 thoughts on “Google Pie Chart using JSF

  1. Hi Soumitra,
    This is very good example, But here instated of using tag can you tell me any tag is there.
    I’m pacing some problem using div tag because here div tag id is not possible to update
    using JSF Technology (Framefaces, richfaces)
    // Load the Visualization API and the piechart package.
    google.load(‘visualization’, ‘1.0’, {
    ‘packages’ : [ ‘corechart’, ‘table’ ]
    // Set a callback to run when the Google Visualization API is loaded.
    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
    var data1 = google.visualization.arrayToDataTable(
    var options1 = {
    colors: [‘green’, ‘red’, ‘blue’, ‘orange’, ‘yellow’],
    legend: { position: ‘right’, alignment: ‘start’, maxLines: 50 },
    bar: { groupWidth: ‘75%’ },
    isStacked: true,
    vAxis: {title: ‘Count’, titleTextStyle: {color: ‘black’}},
    hAxis: {title: ‘Event Names’, titleTextStyle: {color: ‘black’}}
    var chart1 = new google.visualization.ColumnChart(document.getElementById(‘chart_divd’));
    chart1.draw(data1, options1);
    Report by Event Names
    whenever we click Search button it will display the graph chart but here after click search button and refresh the then it will display the graph. so here div tag will not be updated. Please tell now instated of using div tag any tag can we use? without refresh page.

Leave a Reply

Your email address will not be published. Required fields are marked *