Google Chart using JSP, Servlet

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 with JSP, Servlet. 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.

If you have any query please feel free to leave a comment.

Prerequisites

JDK 1.6
Knowledge of JSP, Servlet
Apache Tomcat v7
Eclipse IDE
jstl-1.2.jar

Final Output

When Chart rendered on view

Google Chart API

When you mouse hover on Chart slices

Google Chart API

Now we will see how it happens step by step.

Step 1. Create the Dynamic Web Project in Eclipse IDE. The required project structure gets created in the IDE.

Step 2. Put the jstl jar file under WEB-INF/lib directory. This jstl jar is used for iteration, conditional statement check etc. in UI side on JSP page.

Step 3. Now modify deployment descriptor – web.xml. Remove evrything including <welcome-file-list/> from web.xml.

Step 4. Then we will create sample data for showing on Google Pie Chart. So create a class PieChartData.java as shown below. This file contains area-wise top seven countries in the world.

 

Step 5. Now we will create a servlet which will forward the data to the jsp page.

 

Step 6. Create a view called servlet.jsp which will render the Google Pie Chart along with the data from servlet. In view you can initialize data to chart in two ways

or

In the above code look carefully we simply iterate through list using jstl and add the data to the Google Pie Chart.

 

Step 7. If everything is done please run the application and see yourself. Hit the URL http://<host>:<port>/<context-path>/PieChartServlet. For examplehttp://localhost:8080/google-chart/PieChartServlet

Thanks for your reading. Please do not forget to leave a comment.

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

5 thoughts on “Google Chart using JSP, Servlet

  1. hi , i am not getting jar file to import in.webtuts.google.chart.data.PieChartData package . Can you please help.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.