Google Chart using Spring

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 Spring MVC. 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 Spring, Java
Apache Tomcat v7
Eclipse IDE
Jars

Google Chart using Spring - jars

Final Output

When chart renders on the view

Google Chart API

When mouse hover happens on chart

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 all jar files under WEB-INF/lib directory.

Step 3. Now modify deployment descriptor – web.xml under WEB-INF directory. Paste the below code in your web.xml file.

 

Step 4. Create Spring DAO

 

Step 5. Create Spring Service

 

Step 6. Create Spring Controller

 

Step 7. Create dispatcher-servlet.xml with the below code under WEB-INF directory

 

Step 8. Create applicationContext.xml with the below code under WEB-INF directory

 

Step 9. 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 10. Create a view called spring.jsp under webapp directory which will render the Google Pie Chart along with the data from Spring Controller. 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 11. If everything is done please run the application and see yourself. Hit the URL http://<host>:<port>/<context-path>/piechart.html. For example  http://localhost:8080/google-chart/piechart.html

Download source code google-chart

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

23 thoughts on “Google Chart using Spring

  1. Respected Sir
    I see above code for generate pie chart with static values .
    I am new in Spring mvc+jsp+ajax+jquery.
    I want code how to display database value to bar chat in jsp spring mvc.
    I am expected correct code in your web site.

    Thanking you.

  2. I have everything working except this part of the code:

    ———————————————————–
    // Create the data table.
    var data = google.visualization.arrayToDataTable([
    [‘Country’, ‘Area(square km)’],

    [ ‘${entry.key}’, ${entry.value} ],

    ]);
    ———————————————————–
    I change it with fixed values like this part of code just to ake sure everything working and it has shown up:
    ———————————————————–
    var data = google.visualization.arrayToDataTable([
    [‘Element’, ‘Density’, { role: ‘style’ }],
    [‘Copper’, 8.94, ‘#b87333’, ],
    [‘Silver’, 10.49, ‘silver’],
    [‘Gold’, 19.30, ‘gold’],
    [‘Platinum’, 21.45, ‘color: #e5e4e2’ ]
    ]);
    ———————————————————–
    So, i need some explanation maybe something is missing.

    1. That’s welcome and you can get my email at Contact page link; but first try to make the example work whatever there in my tutorial. And once it works then try to change according to your requirements.

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.